/* Карточка валюты /currency/{code}/ — web-calculator.ru. Scoped под #cc-card.
   Типографика по канону сайта: база 12px Unbounded, заголовки 16px/700; иерархия — вес и цвет, не размер. */
#cc-card, #cc-card input, #cc-card button, #cc-card table, #cc-card select { font-family: "Unbounded", sans-serif; }
#cc-card { color: #000; font-size: 12px; line-height: 1.55; }
#cc-card [hidden] { display: none !important; }
#cc-card .up, #cc-card .cc-up { color: #0a7a3d; } #cc-card .down, #cc-card .cc-down { color: #c0392b; }
#cc-card h2, #cc-card .cc-block > h2 { font-size: 16px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
#cc-card p { font-size: 12px; line-height: 1.55; margin: 0 0 8px; }
#cc-card .cc-muted { opacity: .6; }

/* ── Hero ─────────────────────────────────────────────── */
#cc-card .cc-hero { border: 1px solid #000; border-radius: 16px; padding: 16px; margin-bottom: 14px; }
#cc-card .cc-hero-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
#cc-card .cc-rate-label { font-size: 12px; opacity: .6; }
#cc-card .cc-rate-val { font-size: 16px; font-weight: 700; }
#cc-card .cc-chg { font-size: 12px; font-weight: 700; }
#cc-card .cc-hero-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
#cc-card .cc-hero-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; border-top: 1px solid #eee; padding-top: 6px; }
#cc-card .cc-hero-row span:first-child { opacity: .65; }
#cc-card .cc-hero-row b { font-weight: 700; }
#cc-card .cc-src { margin-top: 10px; font-size: 12px; opacity: .7; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
#cc-card .cc-src a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
#cc-card .cc-updated { color: #0a7a3d; }
#cc-card .cc-tip { border-bottom: 1px dotted #999; cursor: help; }

/* ── Блоки-секции ─────────────────────────────────────── */
#cc-card .cc-block { border: 1px solid #eee; border-radius: 14px; padding: 16px; margin-bottom: 14px; }

/* ── График ───────────────────────────────────────────── */
#cc-card .cc-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#cc-card .cc-chart-head h2 { margin: 0; }
#cc-card .cc-periods { display: flex; gap: 6px; flex-wrap: wrap; }
#cc-card .cc-period { width: auto; padding: 6px 12px; border: 1px solid #ddd; border-radius: 16px; background: #fff; color: #000; font-size: 12px; cursor: pointer; }
#cc-card .cc-period:hover { border-color: #000; }
#cc-card .cc-period.is-active { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
#cc-card .cc-chart-box { position: relative; }
#cc-card .cc-chart { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: pan-y; }
#cc-card .cc-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;
}
#cc-card .cc-chart-tip b { display: block; font-weight: 700; }
#cc-card .cc-chart-tip span { opacity: .7; }
#cc-card .cc-chart-legend { margin-top: 6px; font-size: 12px; opacity: .6; display: flex; gap: 14px; flex-wrap: wrap; }
#cc-card .cc-leg-line::before { content: "―"; color: #000; font-weight: 700; margin-right: 4px; }
#cc-card .cc-leg-fc::before { content: "⋯"; color: #888; font-weight: 700; margin-right: 4px; }
#cc-card .cc-chart-stat { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; }
#cc-card .cc-chart-stat b { font-weight: 700; }

/* ── Прогноз ──────────────────────────────────────────── */
#cc-card .cc-forecast { margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px; }
#cc-card .cc-fc-p { font-size: 12px; line-height: 1.55; margin: 0 0 8px; }
#cc-card .cc-fc-p b { font-weight: 700; }
#cc-card .cc-fc-signals { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
#cc-card .cc-fc-signals li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; }
#cc-card .cc-sig-mark { flex: none; width: 12px; text-align: center; }
#cc-card .cc-fc-meta { font-size: 12px; line-height: 1.5; opacity: .65; margin: 0 0 8px; }
#cc-card .cc-fc-disclaimer { font-size: 12px; line-height: 1.5; color: #8a5a00; background: #fff7e6; border: 1px solid #ffe0a3; border-radius: 12px; padding: 10px 12px; margin: 0; }

/* ── Мини-конвертер ───────────────────────────────────── */
#cc-card .cc-conv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#cc-card .cc-conv input { width: 160px; height: 52px; padding: 0 14px; border: 1px solid #ddd; border-radius: 12px; font-size: 16px; font-weight: 700; }
#cc-card .cc-conv-swap { width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 50%; background: #fff; cursor: pointer; font-size: 16px; }
#cc-card .cc-conv-swap:hover { border-color: #000; }
#cc-card .cc-conv-eq { font-size: 16px; }
#cc-card .cc-conv-eq b { font-weight: 700; }
#cc-card .cc-conv-labels { font-size: 12px; opacity: .6; width: 100%; }
#cc-card .cc-conv-cta { font-size: 12px; margin-top: 10px; }
#cc-card .cc-conv-cta a { color: #000; }

/* ── Кросс-курсы ──────────────────────────────────────── */
#cc-card .cc-cross-wrap { overflow-x: auto; }
#cc-card table.cc-cross-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
#cc-card table.cc-cross-tbl th, #cc-card table.cc-cross-tbl td { border-bottom: 1px solid #eee; padding: 8px 10px; text-align: right; white-space: nowrap; }
#cc-card table.cc-cross-tbl th { background: #f7f9fc; font-weight: 700; }
#cc-card table.cc-cross-tbl th:nth-child(-n+2), #cc-card table.cc-cross-tbl td:nth-child(-n+2) { text-align: left; }

/* ── Мобайл ───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #cc-card .cc-conv input { width: 100%; }
  #cc-card .cc-conv { flex-direction: column; align-items: stretch; }
}

/* ── Таблицы в тексте (в контенте сайта, 12px как body) ── */
.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; }