/* Capymapa — виджет курсов обмена, версия 5.4 (стили).
   Перенесено из WPCode-сниппета 2787 «currency exchange (front)» в файл темы,
   деплоится через git (см. functions.php, capymapa_rates_assets()).
   Полная история версий и решений — см. ТЕХНИЧЕСКОЕ/Курс валют/capymapa-rates-widget-v5.4.html */

.cpm-widget{
  /* ===== ДИЗАЙН-ТОКЕНЫ (общие с виджетом сонгтео) — имена прежние, значения из capymapa-tokens.css ===== */
  --ink:var(--cm-ink); --ink-soft:var(--cm-ink-soft); --ink-faint:var(--cm-ink-faint);
  --teal:var(--cm-teal-500); --teal-deep:var(--cm-teal-700); --teal-tint:var(--cm-teal-50);
  --gold:var(--cm-amber-500); --gold-deep:var(--cm-amber-800); --gold-tint:var(--cm-amber-50);
  --good:var(--cm-good); --bad:var(--cm-bad); --bad-tint:#fdecea;
  --blue:#2563eb; --blue-tint:#eaf2fe;
  --line:var(--cm-line); --line-soft:var(--cm-line-soft); --bg1:var(--cm-teal-50); --bg2:var(--cm-line-soft);
  --d-bg1:var(--cm-deep-1); --d-bg2:var(--cm-deep-2); --d-line:rgba(255,255,255,.10);
  --d-text:#eaf4f2; --d-dim:#9fc4bd; --d-accent:#7fd6cb;
  --radius:var(--cm-r-lg); --radius-sm:var(--cm-r-md);
  --shadow:var(--cm-sh-2);
  --shadow-lg:var(--cm-sh-3);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); -webkit-tap-highlight-color:transparent;
}
.cpm-widget *{box-sizing:border-box;}
/* СТРАХОВКА: у любого svg внутри виджета по умолчанию есть размер.
   Без этого правила незаданный <svg> браузер рисует 300×150px —
   ровно так один раз уже сломалась кнопка «На карте». Более узкие
   правила ниже (например .cpmd-who small svg) всё равно
   перекрывают это по specificity и порядку в файле. */
.cpm-widget svg{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;}
/* …а вот графикам эта страховка вредила: они схлопывались в 1em.
   Явные размеры обязательны, атрибуты width/height CSS не спасают. */
/* график рисуется в реальных пикселях (JS меряет ширину контейнера),
   поэтому никакого preserveAspectRatio="none": кружки остаются кружками,
   подписи не растягиваются. */
.cpm-widget .cpm-chart{position:relative;width:100%;}
.cpm-widget .cpm-chart svg{width:100%;height:auto;display:block;vertical-align:baseline;}
.cpm-widget .cpm-chart-tip{position:absolute;pointer-events:none;z-index:2;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;box-shadow:var(--shadow);
  font-size:11.5px;line-height:1.45;white-space:nowrap;opacity:0;transition:opacity .12s;}
.cpm-widget .cpm-chart-tip.is-on{opacity:1;}
.cpm-widget .cpm-chart-tip b{display:block;font-size:10.5px;font-weight:800;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.cpm-widget .cpm-chart-tip span{display:flex;align-items:center;gap:6px;color:var(--ink-soft);
  font-weight:600;}
.cpm-widget .cpm-chart-tip span i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.cpm-widget .cpm-chart-tip span u{margin-left:auto;padding-left:10px;text-decoration:none;
  color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;}
.cpm-widget .cpm-chart-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;}
.cpm-widget .cpm-chart-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:600;color:var(--ink-soft);}
.cpm-widget .cpm-chart-legend i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.cpm-widget .cpm-chart-legend b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;}
/* карточки на мобильной: одна колонка и чуть плотнее десктопных */
.cpm-mobile .cpmd-cards{grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
.cpm-mobile .cpmd-cards-head{margin:2px 0 4px;}
.cpm-mobile .cpmd-cards-title{font-size:13.5px;}
.cpm-mobile .cpmd-cards-sub{font-size:11px;}
.cpm-mobile .cpmd-card{border-radius:16px;padding:15px;box-shadow:none;}
.cpm-mobile .cpmd-card:hover{transform:none;box-shadow:none;}
.cpm-mobile .cpmd-av{width:36px;height:36px;border-radius:10px;font-size:11px;}
.cpm-mobile .cpmd-card-head h3{font-size:14.5px;}
.cpm-mobile .cpmd-rate{padding:9px 0;}
.cpm-mobile .cpmd-rate .val b{font-size:15px;}
.cpm-mobile .cpmd-cta span{margin-top:12px;padding:11px 10px;font-size:12.5px;}
.cpm-mobile .cpmd-cards-legend{font-size:10.5px;margin:-4px 0 12px 2px;}
.cpm-rates .cpm-order-note{font-size:10.5px;line-height:1.5;color:var(--d-dim);margin-top:10px;}
.cpm-rates .cpm-calc-note{font-size:9.5px;line-height:1.4;color:var(--d-dim);opacity:.7;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);}
.cpm-desktop .cpmd-calc-note{font-size:9.5px;line-height:1.4;color:var(--d-dim);opacity:.7;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
.cpm-widget .cpm-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cpm-widget a{text-decoration:none;}
.cpm-widget [hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){.cpm-widget *{animation:none!important;transition:none!important;}}
/* ── переключатель раскладок: только CSS, логика и данные общие ── */
.cpm-mobile{display:block;}
.cpm-desktop{display:none;}
@media (min-width:900px){
  .cpm-mobile{display:none;}
  /* ширина как у виджета версии 3 (1120px) — иначе на широких мониторах
     карточки растягиваются в плитки и перестают быть «кубиками» */
  .cpm-desktop{display:block;max-width:1220px;margin:0 auto;}
}
/* ═══════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ КАРТОЧКА — без изменений против версии 3.1
   ═══════════════════════════════════════════════════════════ */
.cpm-rates{
  max-width:460px; margin:0 auto; background:var(--bg1);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.cpm-rates .cpm-top{display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;background:#fff;border-bottom:1px solid var(--line);}
.cpm-rates .cpm-brand{display:flex;align-items:center;gap:7px;}
.cpm-rates .cpm-brand svg{width:20px;height:20px;display:block;}
.cpm-rates .cpm-brand b{font-family:"Unbounded",sans-serif;font-weight:700;font-size:13px;color:var(--ink);}
.cpm-rates .cpm-live{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-soft);}
.cpm-rates .cpm-dot{width:6px;height:6px;border-radius:50%;background:var(--good);
  animation:cpmPulse 2.4s ease-in-out infinite;}
@keyframes cpmPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cpm-rates .cpm-body{padding:16px;}
.cpm-rates .cpm-h{font-family:"Unbounded",sans-serif;font-weight:800;color:var(--ink);
  font-size:19px;line-height:1.18;letter-spacing:-.02em;margin-bottom:5px;}
.cpm-rates .cpm-h em{font-style:normal;color:var(--teal-deep);}
.cpm-rates .cpm-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-bottom:14px;}
.cpm-rates .cpm-calc{background:linear-gradient(168deg,var(--d-bg1),var(--d-bg2));
  border-radius:20px;padding:16px 13px 13px;color:var(--d-text);margin-bottom:10px;}
.cpm-rates .cpm-calc-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-accent);margin-bottom:10px;}
.cpm-rates .cpm-amount{background:rgba(255,255,255,.07);border:1px solid var(--d-line);
  border-radius:14px;padding:10px 14px 11px;}
.cpm-rates .cpm-amount small{display:block;font-size:10px;font-weight:600;color:var(--d-dim);margin-bottom:3px;}
.cpm-rates .cpm-amount-row{display:flex;align-items:baseline;gap:8px;}
.cpm-rates .cpm-amount-row input{background:none;border:none;color:#fff;outline:none;flex:1;min-width:0;
  font:800 26px/1.1 "Manrope",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.cpm-rates .cpm-amount-row span{font-size:20px;font-weight:800;color:var(--d-dim);}
.cpm-rates .cpm-curseg{display:grid;gap:2px;background:rgba(255,255,255,.07);
  border:1px solid var(--d-line);border-radius:12px;padding:3px;margin-top:8px;}
.cpm-rates .cpm-curseg button{border:none;background:none;cursor:pointer;border-radius:9px;padding:9px 4px;
  font:700 12px "Manrope",sans-serif;color:var(--d-dim);transition:.15s;}
.cpm-rates .cpm-curseg button.is-on{background:rgba(255,255,255,.14);color:#fff;}
.cpm-rates .cpm-div{display:flex;align-items:center;gap:10px;margin:14px 2px 9px;}
.cpm-rates .cpm-div span{font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--d-dim);}
.cpm-rates .cpm-div i{flex:1;height:1px;background:var(--d-line);}
.cpm-rates .cpm-ex{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:10px;
  align-items:center;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);margin-bottom:7px;min-height:70px;}
.cpm-rates .cpm-ex.is-best{background:linear-gradient(100deg,rgba(247,148,0,.17),rgba(247,148,0,.04));
  border-color:rgba(247,148,0,.42);}
.cpm-rates .cpm-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:5px;margin-bottom:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);}
.cpm-rates .cpm-eyebrow svg{width:11px;height:11px;flex:0 0 auto;}
.cpm-rates .cpm-l{min-width:0;}
.cpm-rates .cpm-nmrow{display:flex;align-items:center;gap:6px;min-width:0;}
.cpm-rates .cpm-nm{font-size:14.5px;font-weight:700;color:#fff;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.cpm-rates .cpm-caps{display:flex;gap:3px;flex:0 0 auto;}
.cpm-rates .cpm-caps svg{width:13px;height:13px;opacity:.55;}
.cpm-rates .cpm-meta{font-size:11px;font-weight:600;color:var(--d-dim);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpm-rates .cpm-loss{color:#f0a596;font-weight:700;}
.cpm-rates .cpm-r{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
.cpm-rates .cpm-get{font-size:18px;font-weight:800;color:#fff;text-align:right;
  letter-spacing:-.01em;line-height:1;}
.cpm-rates .cpm-cta{display:flex;align-items:center;justify-content:center;gap:4px;height:34px;
  border-radius:9px;font:800 11.5px "Manrope",sans-serif;white-space:nowrap;}
.cpm-rates .cpm-cta.is-solid{background:var(--teal);color:#fff;}
.cpm-rates .cpm-cta.is-solid:active{background:var(--teal-deep);}
.cpm-rates .cpm-ex.is-best .cpm-cta.is-solid{background:var(--gold);color:#3a2700;}
.cpm-rates .cpm-cta.is-ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--d-dim);}
.cpm-rates .cpm-cta svg{width:12px;height:12px;flex:0 0 auto;}
.cpm-rates .cpm-mapbtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  height:46px;background:#fff;border:1px solid var(--line);border-radius:13px;color:var(--ink);
  font:800 13px "Manrope",sans-serif;margin-bottom:12px;}
.cpm-rates .cpm-mapbtn svg{width:16px;height:16px;}
.cpm-rates .cpm-panel{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:14px;margin-bottom:12px;}
.cpm-rates .cpm-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cpm-rates .cpm-panel-title{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.3;}
.cpm-rates .cpm-panel-sub{font-size:10.5px;color:var(--ink-faint);font-weight:600;margin-bottom:10px;}
.cpm-rates table{width:100%;border-collapse:collapse;}
.cpm-rates th{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 0 7px;text-align:right;background:none;border:none;}
.cpm-rates th:first-child{text-align:left;}
.cpm-rates th b{display:block;font-size:12px;color:var(--ink);letter-spacing:0;text-transform:none;}
.cpm-rates td{padding:9px 0;border:none;border-top:1px solid var(--line-soft);font-size:12.5px;
  font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;background:none;}
.cpm-rates td:first-child{text-align:left;font-weight:600;color:var(--ink-soft);font-size:12px;
  max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpm-rates td .cpm-top-rate{background:var(--gold-tint);color:#8a5f0c;padding:3px 7px;
  border-radius:7px;display:inline-block;}
.cpm-rates td.cpm-na{color:#c7d3d9;font-weight:600;}
.cpm-rates .cpm-legend{font-size:10px;color:var(--ink-faint);margin-top:9px;line-height:1.5;}
.cpm-rates .cpm-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;
  background:var(--gold-tint);border:1px solid rgba(247,148,0,.55);vertical-align:-1px;margin-right:2px;}
.cpm-rates .cpm-seg{display:flex;background:var(--line-soft);border-radius:9px;padding:2px;gap:2px;flex:0 0 auto;}
.cpm-rates .cpm-chart-meta{display:flex;justify-content:space-between;margin-top:8px;
  font-size:10px;color:var(--ink-faint);}
.cpm-rates .cpm-chart-meta b{color:var(--ink);font-weight:800;}
.cpm-rates .cpm-foot{border-top:1px solid var(--line);padding-top:14px;}
.cpm-rates .cpm-foot p{font-size:10.5px;color:var(--ink-faint);line-height:1.6;margin-bottom:8px;}
.cpm-rates .cpm-foot p:last-child{margin-bottom:0;}
.cpm-rates .cpm-foot b{color:var(--ink-soft);font-weight:700;}
.cpm-rates .cpm-empty{padding:26px 18px;text-align:center;}
.cpm-rates .cpm-empty svg{width:34px;height:34px;opacity:.35;margin-bottom:10px;}
.cpm-rates .cpm-empty p{font-size:13px;color:var(--ink-soft);line-height:1.5;}
/* ═══════════════════════════════════════════════════════════════
   ДЕСКТОП ≥900px — РЕДИЗАЙН
   Слева закреплён калькулятор (единственное место ввода),
   справа один ранжированный лист: строка = обменник = все его факты.
   ═══════════════════════════════════════════════════════════ */
.cpmd-header{margin-bottom:18px;}
.cpmd-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:14px;}
.cpmd-brand{display:flex;align-items:center;gap:10px;}
.cpmd-brand svg{width:32px;height:32px;display:block;}
.cpmd-brand b{font-family:"Unbounded",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em;
  display:block;}
.cpmd-brand span{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--teal-deep);
  text-transform:uppercase;}
.cpmd-live{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow);}
.cpmd-dot{width:7px;height:7px;border-radius:50%;background:var(--good);position:relative;}
.cpmd-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--good);
  opacity:.35;animation:cpmdPulse 1.8s ease-out infinite;}
@keyframes cpmdPulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.9);opacity:0}}
.cpmd-live b{color:var(--ink);font-weight:700;}
/* заголовок и подзаголовок в один горизонтальный ряд — это и есть
   лекарство от пустоты сверху: h1 перестаёт быть узкой колонкой */
.cpmd-h1row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:28px;align-items:end;}
.cpmd-h1{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(23px,2.3vw,31px);
  line-height:1.14;letter-spacing:-.02em;max-width:24ch;}
.cpmd-h1 em{font-style:normal;color:var(--teal-deep);}
.cpmd-sub{font-size:14.5px;color:var(--ink-soft);max-width:52ch;line-height:1.55;
  padding-bottom:3px;}
/* ── две колонки: контрол слева (sticky), результат справа ── */
.cpmd-layout{display:grid;grid-template-columns:326px minmax(0,1fr);gap:24px;align-items:start;}
.cpmd-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px;}
.cpmd-main{display:flex;flex-direction:column;gap:20px;min-width:0;}
/* ── калькулятор: ЕДИНСТВЕННОЕ место ввода на десктопе ── */
.cpmd-calc{background:linear-gradient(165deg,var(--d-bg1),var(--d-bg2));border-radius:var(--radius);
  padding:clamp(18px,2vw,24px);color:var(--d-text);box-shadow:var(--shadow-lg);overflow:hidden;}
.cpmd-calc-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-accent);margin-bottom:12px;}
.cpmd-field{background:rgba(255,255,255,.07);border:1px solid var(--d-line);border-radius:var(--radius-sm);
  padding:12px 16px;}
.cpmd-field small{display:block;font-size:11px;color:var(--d-dim);font-weight:600;letter-spacing:.03em;
  margin-bottom:2px;}
.cpmd-field-row{display:flex;align-items:baseline;gap:8px;}
.cpmd-field input{background:none;border:none;color:#fff;font:700 25px "Manrope",sans-serif;
  flex:1;min-width:0;outline:none;font-variant-numeric:tabular-nums;}
.cpmd-field-row span{font-size:19px;font-weight:800;color:var(--d-dim);}
.cpmd-curseg{display:flex;gap:2px;background:rgba(255,255,255,.07);border:1px solid var(--d-line);
  border-radius:var(--radius-sm);padding:3px;margin-top:10px;}
.cpmd-curseg button{border:none;background:none;cursor:pointer;border-radius:10px;padding:10px 4px;
  font:700 12.5px "Manrope",sans-serif;color:var(--d-dim);transition:.15s;flex:1;white-space:nowrap;}
.cpmd-curseg button.is-on{background:rgba(255,255,255,.14);color:#fff;}
/* результат расчёта — живёт ВНУТРИ калькулятора, потому что это
   не свойство обменника, а ответ на введённую сумму */
.cpmd-results{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.cpmd-res{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);}
.cpmd-res.is-best{background:linear-gradient(100deg,rgba(247,148,0,.20),rgba(247,148,0,.06));
  border-color:rgba(247,148,0,.55);}
.cpmd-rk{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;
  place-items:center;font-size:11px;font-weight:800;flex:0 0 auto;}
.cpmd-res.is-best .cpmd-rk{background:var(--gold);color:#3a2700;}
.cpmd-res .nm{font-weight:700;font-size:13.5px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.cpmd-res .out{text-align:right;flex:0 0 auto;}
.cpmd-res .out b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
.cpmd-res .out small{display:block;font-size:10.5px;color:var(--d-dim);font-weight:600;margin-top:1px;}
.cpmd-res .out small.is-top{color:#f2cf83;}
/* разброс лучший↔худший — факт, которого больше нигде в интерфейсе нет */
.cpmd-spread{margin-top:16px;padding-top:14px;border-top:1px solid var(--d-line);}
.cpmd-spread-label{display:block;font-size:11px;font-weight:600;color:var(--d-dim);margin-bottom:3px;}
.cpmd-spread-val{display:block;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;}
.cpmd-spread-note{display:block;font-size:11px;font-weight:600;color:var(--d-accent);margin-top:3px;}
.cpmd-maplink{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow);align-self:center;}
.cpmd-maplink svg{width:16px;height:16px;color:var(--teal-deep);flex:0 0 auto;}
/* ── ранжированный лист: одна строка = один обменник ── */
/* ═══ КАРТОЧКИ ОБМЕННИКОВ ═══
   Карточка — контейнер сущности, а не строка таблицы. Она растёт вниз:
   сюда потом лягут адрес, часы работы, KYC, доставка, фото. Именно
   поэтому мы вернулись к карточкам из версии 3 — в строку таблицы
   ничего доложить нельзя, каждый новый факт там = новая колонка.
   Номер на карточке НЕ утверждает «этот лучший» второй раз: он просто
   связывает карточку со строкой калькулятора слева. */
.cpmd-cards-head{margin-bottom:-6px;}
.cpmd-cards-title{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.cpmd-cards-sub{font-size:12px;color:var(--ink-faint);font-weight:600;margin-top:3px;}
/* ровно две колонки: при четырёх обменниках это 2×2 без дырки.
   auto-fit давал 3+1 — тот самый пустой угол, что был в версии 3. */
.cpmd-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  align-items:stretch;margin-top:6px;}
.cpmd-card{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;}
.cpmd-card:hover{transform:translateY(-2px);box-shadow:0 26px 50px -28px rgba(10,34,48,.32);}
.cpmd-card-rk{position:absolute;top:-11px;left:18px;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--ink-soft);box-shadow:0 4px 10px -4px rgba(10,34,48,.25);}
.cpmd-card.is-best .cpmd-card-rk{background:var(--gold);border-color:var(--gold);color:#3a2700;
  box-shadow:0 6px 14px -4px rgba(247,148,0,.6);}
.cpmd-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.cpmd-av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font:800 13px "Unbounded",sans-serif;flex:0 0 auto;}
.cpmd-card-head h3{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpmd-card-head small{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--ink-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpmd-card-head small svg{width:12px;height:12px;opacity:.6;flex:0 0 auto;}
.cpmd-rate{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);}
.cpmd-rate:last-of-type{border-bottom:none;}
.cpmd-rate .lbl{font-size:13px;color:var(--ink-soft);font-weight:600;}
.cpmd-rate .lbl small{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:600;margin-top:1px;}
.cpmd-rate .val{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.cpmd-rate .val b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.cpmd-rate.is-lead .val b{background:var(--gold-tint);color:#8a5f0c;padding:3px 8px;border-radius:8px;}
.cpmd-trend{font-size:9.5px;font-weight:800;padding:2px 5px;border-radius:6px;}
.cpmd-trend.up{color:var(--good);background:#e7f7ef;}
.cpmd-trend.down{color:var(--bad);background:var(--bad-tint);}
.cpmd-cta{display:block;margin-top:auto;padding-top:0;border:none;cursor:pointer;
  font:700 13px "Manrope",sans-serif;text-align:center;text-decoration:none;}
.cpmd-cta span{display:block;margin-top:16px;padding:12px 10px;border-radius:11px;}
.cpmd-cta.is-solid span{background:var(--teal);color:#fff;}
.cpmd-cta.is-solid:hover span{background:var(--teal-deep);}
.cpmd-cta.is-ghost span{background:var(--line-soft);color:var(--ink-soft);}
.cpmd-cards-legend{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin:-6px 0 0 2px;}
.cpmd-cards-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--gold-tint);
  border:1px solid rgba(247,148,0,.55);vertical-align:-1px;margin-right:3px;}
.cpmd-note{font-size:12px;color:var(--ink-faint);line-height:1.5;margin:-8px 0 0 2px;}
/* ── график: единственное место, где есть время ── */
.cpmd-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);}
.cpmd-panel-title{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:3px;}
.cpmd-panel-sub{font-size:12px;color:var(--ink-faint);font-weight:600;margin-bottom:14px;}
.cpmd-chart-head{margin-bottom:12px;}
.cpmd-chart-meta{display:flex;gap:20px;margin-top:10px;font-size:11.5px;color:var(--ink-faint);}
.cpmd-chart-meta b{color:var(--ink);font-weight:800;}
.cpmd-empty{padding:60px 24px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);}
.cpmd-empty svg{width:40px;height:40px;opacity:.35;margin-bottom:14px;}
.cpmd-empty p{font-size:15px;color:var(--ink-soft);line-height:1.6;}
.cpmd-foot{display:flex;gap:24px;flex-wrap:wrap;padding-top:4px;}
.cpmd-foot p{flex:1;min-width:260px;font-size:12px;color:var(--ink-faint);line-height:1.6;}
.cpmd-foot p b{color:var(--ink-soft);font-weight:700;}
/* ── узкий десктоп 900–1059: контрол разворачивается горизонтально ── */
@media (max-width:1059px){
  .cpmd-h1row{grid-template-columns:minmax(0,1fr);gap:8px;}
  .cpmd-sub{padding-bottom:0;}
  .cpmd-layout{grid-template-columns:minmax(0,1fr);}
  .cpmd-side{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:14px;}
  .cpmd-calc{flex:1 1 100%;}
  .cpmd-calc-body{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.3fr);
    gap:14px;align-items:end;}
  .cpmd-curseg{margin-top:0;}
  .cpmd-spread{margin-top:14px;}
}