.broker-rating-nav .card {
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
  text-align: left;
}

.broker-rating-nav .card > a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.broker-rating-nav .card img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  object-fit: contain;
}

.broker-rating-nav .card-name {
  display: block;
  min-width: 0;
  text-align: left;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  background: none;
  box-shadow: none;
  text-shadow: none;
}
.sr-table caption, .sr-table th, .sr-table td, .sr-table a, .sr-table span {
  box-shadow: none;
  text-shadow: none;
}

.sr-table caption.sr-caption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sr-table thead th {
  text-align: left;
  font-weight: normal;
  color: #666;
  font-size: 14px;
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid #e7e7e7;
}

.sr-table tbody tr { border-bottom: 1px solid #e7e7e7; }
.sr-table tbody tr:last-child { border-bottom: none; }
.sr-table tbody th,
.sr-table tbody td {
  padding: 5px 8px 5px 0;
  vertical-align: middle;
  text-align: left;
  font-weight: normal;
}

.sr-col-broker { width: 22%; }
.sr-col-rating { width: 16%; }
.sr-col-review { width: 9%; }
.sr-col-desc   { width: 39%; }
.sr-col-cta    { width: 14%; }

.sr-broker-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.sr-logo {
  width: var(--sr-logo-desktop-width, 141px);
  height: var(--sr-logo-desktop-height, 50px);
  object-fit: contain;
  object-position: left center;
  box-sizing: border-box;
}

/* Individual logo sizes are set here for desktop and both mobile breakpoints. */
.sr-logo[src$="/interactivebrokers.svg"] {
  --sr-logo-desktop-width: 155px;
  --sr-logo-mobile-width: 155px;
  --sr-logo-mobile-height: 48px;
  --sr-logo-small-width: 138px;
  --sr-logo-small-height: 44px;
}
.sr-logo[src$="/just2trade.svg"] {
  --sr-logo-mobile-width: 150px;
  --sr-logo-mobile-height: 38px;
  --sr-logo-small-width: 138px;
  --sr-logo-small-height: 34px;
}
.sr-logo[src$="/exante.svg"] {
  --sr-logo-mobile-width: 135px;
  --sr-logo-mobile-height: 48px;
  --sr-logo-small-width: 125px;
  --sr-logo-small-height: 44px;
}
.sr-logo[src$="/freedom24.svg"] {
  --sr-logo-desktop-width: 127px;
  --sr-logo-desktop-height: 45px;
  --sr-logo-mobile-width: 117px;
  --sr-logo-mobile-height: 43px;
  --sr-logo-small-width: 113px;
  --sr-logo-small-height: 40px;
}
.sr-logo[src$="/freedomfinance_global.png"] {
  --sr-logo-desktop-width: 127px;
  --sr-logo-desktop-height: 45px;
  --sr-logo-mobile-width: 113px;
  --sr-logo-mobile-height: 43px;
  --sr-logo-small-width: 104px;
  --sr-logo-small-height: 40px;
}

.sr-logo--tbank { padding: 10px 0; }
.sr-logo--vtb   { padding: 10px 0; }
.sr-logo--solid {
  transform: scale(.8);
  transform-origin: left center;
}

.sr-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.sr-name {
  font-weight: normal;
  font-size: 14px;
  color: #000;
  line-height: 1.2;
}
.sr-name:hover { color: #C30; }

.sr-review a { color: #00F; font-weight: normal; }
.sr-review a:hover { color: #C30; }

.sr-stars {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  white-space: nowrap;
  line-height: 1;
}
.sr-stars .icon-star { width: 16px; height: 16px; }
.sr-num {
  font-size: 13px;
  font-weight: normal;
  color: #666;
  margin-left: 6px;
}

.sr-desc { padding-right: 5px; }

@media screen and (max-width: 768px) {
  .sr-table,
  .sr-table tbody,
  .sr-table colgroup { display: block; }
  .sr-table thead { display: none; }
  .sr-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 90px;
    grid-template-areas:
      "broker rating cta"
      "broker review cta"
      "desc desc desc";
    grid-template-rows: 48px auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 0 12px;
  }
  .sr-table tbody th,
  .sr-table tbody td { display: block; padding: 0; }

  .sr-broker { grid-area: broker; min-width: 0; min-height: 74px; align-self: start; }
  .sr-rating { grid-area: rating; align-self: start; }
  .sr-review { grid-area: review; align-self: start; text-align: left; line-height: 1.2; }
  .sr-review a { display: block; line-height: 1.2; }
  .sr-cta { grid-area: cta; align-self: start; justify-self: end; }
  .sr-cta .button-green-link { min-width: 64px; padding: 7px 5px; font-size: 13px; }
  .sr-desc { grid-area: desc; padding-top: 2px; padding-bottom: 0; line-height: 1.45; }

  .sr-broker-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .sr-id { gap: 2px; min-width: 0; flex: 1 1 auto; max-width: 100%; }
  .sr-id > a:first-child { display: flex; align-items: center; height: 48px; }
  .sr-logo {
    display: block;
    width: var(--sr-logo-mobile-width, 115px);
    height: var(--sr-logo-mobile-height, 40px);
    max-width: 100%;
  }
  .sr-logo--tbank, .sr-logo--vtb { padding: 7px 0; }
  .sr-name  { font-size: 13px; overflow-wrap: break-word; }
  .sr-stars { flex-shrink: 0; }
  .sr-stars .icon-star { width: 14px; height: 14px; }
  .sr-num   { font-size: 12px; margin-left: 4px; }
  .sr-review a { font-size: 13px; }
  .sr-desc  { font-size: 12px; margin-top: 0; }
}

@media screen and (max-width: 400px) {
  .sr-logo {
    width: var(--sr-logo-small-width, 90px);
    height: var(--sr-logo-small-height, 32px);
  }
  .sr-logo--tbank, .sr-logo--vtb { padding: 5px 0; }
  .sr-stars .icon-star { width: 12px; height: 12px; }
  .sr-table tbody tr { grid-template-columns: minmax(0, 1fr) 86px 64px; grid-template-rows: 44px auto auto; column-gap: 10px; }
  .sr-broker { min-height: 66px; }
  .sr-id > a:first-child { height: 44px; }
}

/* Broker logos in the commissions comparison table. */
.brokers_ratings tbody td.brokerinfo > a.broker-logo {
  display: block;
  height: 32px;
  overflow: hidden;
}

.brokers_ratings tbody td.brokerinfo > a.broker-logo img {
  display: block;
  width: auto;
  height: 32px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

/* Compensate for transparent padding in source SVG viewboxes. */
.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/bcs.svg"] {
  height: 24.4px;
  transform: translateY(-1px);
}

.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/finam.svg"] {
  height: 48.4px;
  transform: translate(-6.9px, -8.2px);
}

.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/alor.svg"] {
  height: 23.4px;
  transform: translateY(-1px);
}

.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/vtb.svg"] {
  height: 27.2px;
}

/* Long wordmarks: 70% scale, preserving their aspect ratio. */
.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/alfabank.svg"],
.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/cifra.svg"],
.brokers_ratings tbody td.brokerinfo > a.broker-logo img[src$="/sberbank.svg"] {
  height: 22.4px;
}

.broker-commissions {
  margin: 32px 0 40px;
}

.broker-commissions__info {
  margin-bottom: 12px;
}

.broker-commissions__info > a:first-child {
  display: inline-block;
  border-bottom: 0;
}

.broker-commissions__info > a:first-child img {
  width: 141px;
  height: 50px;
  object-fit: contain;
  object-position: left center;
  vertical-align: top;
}

.broker-commissions__info .stars {
  margin-top: 10px;
  color: gold;
  font-size: 19px;
}

.broker-commissions__info .reviewa {
  display: block;
  padding: 10px 0;
  color: #000;
  font-size: 13px;
}

.broker-commissions__info .reviewb {
  display: block;
  padding: 10px 0;
  color: #00f;
}

.broker-commissions__info .reviewb:hover {
  color: #c30;
}

/* Russian broker rating calculator */
.btc-top * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.btc-top {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
}

.btc-top-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.btc-top-tab-input,
.btc-top-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.btc-top-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px 0;
    background: #eef0f2;
    overflow: hidden;
}

.btc-top-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    background: #e2e6ea;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #5c636a;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.btc-top-tab:hover {
    background: #d5dae0;
}

#btc-tab-stocks:checked ~ .btc-top-tabs label[for="btc-tab-stocks"],
#btc-tab-futures:checked ~ .btc-top-tabs label[for="btc-tab-futures"],
#btc-tab-currency:checked ~ .btc-top-tabs label[for="btc-tab-currency"],
#btc-tab-margin:checked ~ .btc-top-tabs label[for="btc-tab-margin"] {
    background: #fff;
    color: #007bff;
}

#btc-tab-stocks:focus-visible ~ .btc-top-tabs label[for="btc-tab-stocks"],
#btc-tab-futures:focus-visible ~ .btc-top-tabs label[for="btc-tab-futures"],
#btc-tab-currency:focus-visible ~ .btc-top-tabs label[for="btc-tab-currency"],
#btc-tab-margin:focus-visible ~ .btc-top-tabs label[for="btc-tab-margin"] {
    outline: 2px solid #007bff;
    outline-offset: -3px;
}

.btc-top-panel {
    display: none;
    padding: 30px;
}

#btc-tab-stocks:checked ~ .btc-top-panels #btc-panel-stocks,
#btc-tab-futures:checked ~ .btc-top-panels #btc-panel-futures,
#btc-tab-currency:checked ~ .btc-top-panels #btc-panel-currency,
#btc-tab-margin:checked ~ .btc-top-panels #btc-panel-margin {
    display: block;
}

.btc-top p {
    margin-bottom: 20px;
    color: #6c757d;
}

.btc-top p.btc-top-lead {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #212529;
}

.btc-top-scenario {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fff;
}

.btc-top .btc-top-scenario summary {
    display: list-item;
    list-style-type: disclosure-closed;
    list-style-position: inside;
    padding: 14px 16px;
    cursor: pointer;
}

.btc-top .btc-top-scenario[open] summary {
    list-style-type: disclosure-open;
}

.btc-top .btc-top-scenario summary::before,
.btc-top .btc-top-scenario summary::after {
    content: none;
    display: none;
}

.btc-top-scenario summary:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: -3px;
    border-radius: 8px;
}

.btc-top-scenario-title {
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}

.btc-top-scenario-desc {
    margin-left: 10px;
    font-size: 13px;
    color: #6c757d;
}

.btc-top-scenario-body {
    padding: 0 16px 16px;
}

.btc-top-results-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 14px;
}

.btc-top-results-table th,
.btc-top-results-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.btc-top-results-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.btc-top-results-table tbody th {
    font-weight: 600;
    color: #212529;
}

.btc-top-results-table tr:hover {
    background: #f8f9fa;
}

.btc-top-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.btc-top-plan-name {
    font-size: 13px;
    color: #6c757d;
}

.btc-top-commission {
    font-weight: 600;
    color: #28a745;
    white-space: nowrap;
}

.btc-top-dash {
    color: #adb5bd;
}

.btc-top-footer {
    padding: 0 30px 24px;
}

.btc-top-note {
    font-size: 12px;
    color: #6c757d;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #adb5bd;
    border-radius: 4px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .btc-top-tabs {
        gap: 6px;
        padding: 8px 8px 0;
    }

    .btc-top-tab {
        flex: 0 0 calc(50% - 3px);
        padding: 10px 10px;
        font-size: 13px;
        white-space: normal;
    }

    .btc-top-panel {
        padding: 20px;
    }

    .btc-top-footer {
        padding: 0 20px 20px;
    }

    .btc-top-scenario-body {
        padding: 0 10px 10px;
    }

    .btc-top-results-table {
        font-size: 12px;
    }

    .btc-top-results-table th,
    .btc-top-results-table td {
        padding: 8px 6px;
    }

    .btc-top-commission {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .btc-top-panel {
        padding: 14px;
    }

    .btc-top-footer {
        padding: 0 14px 14px;
    }

    .btc-top-results-table {
        font-size: 11px;
    }

    .btc-top-results-table th,
    .btc-top-results-table td {
        padding: 6px 4px;
    }

    .btc-top-plan-name {
        font-size: 11px;
    }
}

/* Trading page tables and calculators */

.brokers-tarifs-ru-note { color: #5b6773; font-size: 12px; }
.brokers-tarifs-ru-pill { display: inline-block; margin: 1px 2px; padding: 1px 6px; border-radius: 3px; background: #e8f7ec; color: #146c2e; font-size: 11.5px; white-space: nowrap; }

/* Таблицы: без карточек и дополнительных обёрток. */
.brokers-tarifs-ru-scroll { width: 100%; margin: 14px 0 8px; overflow-x: auto; }

.brokers-tarifs-ru-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #fff;
  color: #1c2430;
  font-size: 13.4px;
}

.brokers-tarifs-ru-table th,
.brokers-tarifs-ru-table td { padding: 8px 10px; border: 1px solid #dde4ec; text-align: left; vertical-align: top; }
.brokers-tarifs-ru-table thead th { position: sticky; top: 0; z-index: 1; background: #eef3f8; color: #33475b; font-size: 12.6px; letter-spacing: .3px; text-transform: uppercase; }
.brokers-tarifs-ru-table tbody tr:nth-child(even) { background: #fafcfe; }

/* Калькулятор. */
.brokers-tarifs-ru-calc { margin: 14px 0; padding: 18px 20px; border: 1px solid #dde4ec; border-radius: 14px; background: #fff; color: #1c2430; }
@media (min-width: 769px) {
  .brokers-tarifs-ru-calc { box-shadow: 0 0 18px 2px rgba(28, 36, 48, .12); }
}
.brokers-tarifs-ru-calc .calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.brokers-tarifs-ru-calc .calc-tab { padding: 9px 18px; border: 1px solid #dde4ec; border-radius: 999px; background: #eef3f8; color: #33475b; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.brokers-tarifs-ru-calc .calc-tab.active { border-color: #16537e; background: #16537e; color: #fff; }
.brokers-tarifs-ru-calc .calc-panel { display: none; }
.brokers-tarifs-ru-calc .calc-panel.active { display: block; }
.brokers-tarifs-ru-calc .calc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.brokers-tarifs-ru-calc .calc-preset { padding: 6px 12px; border: 1px dashed #9db4c8; border-radius: 8px; background: #fff; color: #16537e; cursor: pointer; font: inherit; font-size: 12.8px; }
.brokers-tarifs-ru-calc .calc-preset:hover { background: #eef3f8; }
.brokers-tarifs-ru-calc .calc-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 12px; }
.brokers-tarifs-ru-calc .calc-field label { display: block; margin-bottom: 4px; color: #5b6773; font-size: 12.4px; font-weight: 600; }
.brokers-tarifs-ru-calc .calc-field input,
.brokers-tarifs-ru-calc .calc-field select { width: 100%; padding: 8px 10px; border: 1px solid #dde4ec; border-radius: 8px; background: #fff; color: #1c2430; font: inherit; font-size: 14px; }
.brokers-tarifs-ru-calc .calc-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 12px; color: #1c2430; font-size: 13px; }
.brokers-tarifs-ru-calc .calc-check input { width: auto; margin-top: 2px; }
.brokers-tarifs-ru-calc tr.calc-best td { background: #e8f7ec; }
.brokers-tarifs-ru-calc .calc-bar { width: 100%; min-width: 90px; height: 14px; overflow: hidden; border-radius: 6px; background: #edf1f6; }
.brokers-tarifs-ru-calc .calc-bar-fill { height: 100%; border-radius: 6px; background: #8aa8c4; }
.brokers-tarifs-ru-calc .calc-bar-fill.fill-best { background: #21a038; }

/* Trading page layout and notes */

.trading-page > .master-image { height: auto; }
.trading-page [id] { scroll-margin-top: 24px; }
.brokers-tarifs-ru-scroll:focus-visible { outline: 2px solid #04aa6d; outline-offset: 3px; }
.brokers-tarifs-ru-table caption { padding: 0 0 12px; color: #333; text-align: left; font-weight: 700; }
.trading-note { font-size: 12px; line-height: 1.8; color: #555; }
.trading-formula { overflow-wrap: anywhere; }
.trading-scroll-hint { display: none; }
@media (max-width: 768px) {
  .trading-scroll-hint { display: block; }
}

.trading-broker-profiles .plus-minus-block h4 { margin-top: 0; }
.trading-broker-profiles .brokers-tarifs-ru-pill { white-space: normal; }

/* Trading commission calculator */

.trading-commission-calc,
.trading-commission-calc * { box-sizing: border-box; }
.trading-commission-calc { min-width: 0; max-width: 100%; }
.trading-commission-calc h3 { margin-top: 0; }
.trading-commission-calc [data-commission-fields] { min-width: 0; margin: 0; padding: 0; border: 0; }
.trading-commission-calc .calc-inputs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.trading-commission-calc .calc-field { min-width: 0; }
.trading-commission-calc .calc-field label,
.trading-commission-calc .calc-check,
.trading-commission-calc .calc-preset { overflow-wrap: anywhere; }
.trading-commission-calc .calc-tab { max-width: 100%; }
.trading-commission-calc [aria-invalid="true"] { border-color: #b42318; }
.trading-commission-calc [data-commission-error] { margin: 12px 0; color: #b42318; font-size: 13px; }
.trading-commission-calc .trading-commission-options { margin: 14px 0; }
.trading-commission-calc .trading-commission-options summary { cursor: pointer; font-weight: 600; }
.trading-commission-calc .trading-commission-options .calc-inputs { margin-top: 12px; }
.trading-commission-calc [data-commission-summary] { margin: 16px 0 10px; line-height: 1.6; }
.trading-commission-calc .trading-commission-results-scroll { max-width: 100%; overflow-x: auto; }
.trading-commission-calc .brokers-tarifs-ru-table { min-width: 760px; }
.trading-commission-calc .brokers-tarifs-ru-table th:first-child { min-width: 245px; font-weight: 400; }
.trading-commission-calc .trading-commission-tariff { margin-top: 4px; font-weight: 600; }
.trading-commission-calc .trading-commission-row-note { display: block; margin-top: 5px; color: #5b6773; font-size: 12px; line-height: 1.6; }
.trading-commission-calc .calc-bar { margin-top: 8px; }
.trading-commission-calc .brokers-tarifs-ru-table caption { padding-bottom: 10px; text-align: left; font-weight: 700; }
.trading-commission-calc .brokers-tarifs-ru-table tr.calc-best th,
.trading-commission-calc .brokers-tarifs-ru-table tr.calc-best td { background: #e8f7ec; }
.trading-commission-calc .trading-commission-results-scroll:focus-visible,
.trading-commission-calc .calc-tab:focus-visible,
.trading-commission-calc .calc-preset:focus-visible { outline: 2px solid #16537e; outline-offset: 3px; }
.trading-commission-calc [hidden] { display: none; }
@media (max-width: 420px) {
  .trading-commission-calc { padding: 16px 12px; }
  .trading-commission-calc .calc-tab { flex: 1 1 auto; padding-right: 12px; padding-left: 12px; }
}

/* Trading margin calculator */

.trading-margin-calc .trading-margin-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.trading-margin-calc .calc-inputs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.trading-margin-calc .calc-field { min-width: 0; }
.trading-margin-calc .calc-field input,
.trading-margin-calc .calc-field select { box-sizing: border-box; }
.trading-margin-calc .calc-field [aria-invalid="true"] { border-color: #b42318; }
.trading-margin-calc .trading-margin-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding: 14px; border-radius: 8px; background: #e8f7ec; }
.trading-margin-calc .trading-margin-result dl { margin: 0; }
.trading-margin-calc .trading-margin-result dt { color: #476453; font-size: 12.5px; }
.trading-margin-calc .trading-margin-result dd { margin: 5px 0 0; color: #146c2e; font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.trading-margin-calc .trading-margin-formula { grid-column: 1 / -1; margin: 0; color: #33475b; font-size: 12.5px; overflow-wrap: anywhere; }
.trading-margin-calc .trading-margin-error { margin: 12px 0 0; color: #b42318; font-size: 13px; }
.trading-margin-calc [hidden] { display: none; }
@media (max-width: 420px) {
  .trading-margin-calc .trading-margin-result { grid-template-columns: minmax(0, 1fr); }
}

/* Trading colocation diagram */

.trading-colo-diagram,
.trading-colo-diagram * { box-sizing: border-box; }
.trading-colo-diagram { width: 100%; max-width: 100%; margin: 24px 0; color: #1c2430; }
.trading-colo-diagram figcaption { margin-bottom: 14px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.trading-colo-diagram .trading-colo-lane { min-width: 0; margin-top: 14px; padding: 16px; border: 1px solid #dde4ec; border-radius: 10px; background: #fafcfe; }
.trading-colo-diagram .trading-colo-lane-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.trading-colo-diagram .trading-colo-zone { padding: 3px 8px; border-radius: 4px; background: #fff; color: #146c2e; font-size: 13px; font-weight: 400; }
.trading-colo-diagram .trading-colo-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.trading-colo-diagram .trading-colo-node { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 96px; margin: 0; padding: 12px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; list-style: none; }
.trading-colo-diagram .trading-colo-node small { display: block; margin-top: 5px; color: #5b6773; font-size: 13px; line-height: 1.5; }
.trading-colo-diagram .trading-colo-node:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -22px; color: #64748b; font-size: 23px; line-height: 1; transform: translateY(-50%); }
.trading-colo-diagram .trading-colo-channel { border-style: dashed; background: transparent; color: #476071; }
.trading-colo-diagram .trading-colo-lane--near { border-color: #a2cdb1; background: #e8f7ec; }
.trading-colo-diagram .trading-colo-lane--near .trading-colo-node { border-color: #93bda1; }
.trading-colo-diagram .trading-colo-lane--near .trading-colo-channel,
.trading-colo-diagram .trading-colo-lane--near .trading-colo-node::after { color: #146c2e; }
.trading-colo-diagram .trading-colo-note { margin: 12px 0 0; color: #5b6773; font-size: 13px; line-height: 1.6; }
@media (max-width: 680px) {
  .trading-colo-diagram .trading-colo-lane { padding: 14px; }
  .trading-colo-diagram .trading-colo-route { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .trading-colo-diagram .trading-colo-node { min-height: 64px; }
  .trading-colo-diagram .trading-colo-node:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -24px; left: 50%; transform: translateX(-50%); }
}