/* Coin bubble tool */



.cb-tool {

  --cb-purple: #7c3aed;

  --cb-purple-soft: #f5f3ff;

  --cb-ink: #18181d;

  --cb-muted: #8b8b9a;

  --cb-border: rgba(24, 24, 29, 0.08);

  --cb-up: #059669;

  --cb-down: #dc2626;

  font-family: 'Vazirmatn', Tahoma, sans-serif;

  color: var(--cb-ink);

}



.cb-rates {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  padding: 16px;

  border-radius: 18px;

  border: 1px solid var(--cb-border);

  background: var(--cb-purple-soft);

  margin-bottom: 14px;

}



.cb-rate__label {

  display: block;

  font-size: 11px;

  font-weight: 700;

  color: var(--cb-muted);

  margin-bottom: 6px;

}



.cb-rate__input {

  width: 100%;

  height: 44px;

  padding: 0 12px;

  border: 1px solid var(--cb-border);

  border-radius: 12px;

  background: #fff;

  font: inherit;

  font-size: 16px;

  font-weight: 800;

  color: var(--cb-ink);

  cursor: not-allowed;

  opacity: 1;

}



.cb-rate__input:disabled {

  -webkit-text-fill-color: var(--cb-ink);

}



.cb-rates__note {

  grid-column: 1 / -1;

  margin: 4px 0 0;

  font-size: 11px;

  font-weight: 600;

  color: var(--cb-muted);

  text-align: center;

}



.cb-loader {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  padding: 40px 16px;

  text-align: center;

  font-size: 13px;

  font-weight: 700;

  color: var(--cb-muted);

}



.cb-loader__ring {

  width: 36px;

  height: 36px;

  border: 3px solid #ddd6fe;

  border-top-color: var(--cb-purple);

  border-radius: 50%;

  animation: cb-spin 0.75s linear infinite;

}



@keyframes cb-spin { to { transform: rotate(360deg); } }



.cb-tool.is-ready .cb-loader { display: none; }



.cb-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

  gap: 12px;

}



.cb-card {

  padding: 16px;

  border-radius: 18px;

  border: 1px solid var(--cb-border);

  background: #fff;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.cb-card--up { border-color: rgba(5, 150, 105, 0.25); background: #fafffb; }

.cb-card--down { border-color: rgba(220, 38, 38, 0.2); background: #fffafa; }



.cb-card__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;

}



.cb-card__name {

  font-size: 14px;

  font-weight: 800;

  line-height: 1.4;

}



.cb-card__pct {

  flex-shrink: 0;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: -0.02em;

}



.cb-card__pct--up { color: var(--cb-up); }

.cb-card__pct--down { color: var(--cb-down); }

.cb-card__pct--flat { color: var(--cb-muted); }



.cb-card__rows {

  display: grid;

  gap: 6px;

}



.cb-card__row {

  display: flex;

  justify-content: space-between;

  gap: 10px;

  font-size: 12px;

}



.cb-card__row span { color: var(--cb-muted); font-weight: 600; }

.cb-card__row strong { font-weight: 800; }



.cb-card__bar {

  height: 6px;

  border-radius: 999px;

  background: #eef0f4;

  overflow: hidden;

}



.cb-card__bar span {

  display: block;

  height: 100%;

  border-radius: inherit;

  max-width: 100%;

}



.cb-card__bar span.cb-up { background: var(--cb-up); }

.cb-card__bar span.cb-down { background: var(--cb-down); }



@media (max-width: 520px) {

  .cb-rates { grid-template-columns: 1fr; }

  .cb-grid { grid-template-columns: 1fr; }

}