css
/* ============================================
   PREMIUM CSS — FORCE MODE (mydebcard.ru)
   ============================================ */

:root {
  --cw-ink: #0d1b23 !important;
  --cw-brand: #15bc73 !important;
  --cw-brand-dark: #0f9f5e !important;
  --cw-bg: #f5f7fa !important;
  --cw-card-bg: #ffffff !important;
  --cw-border: #e8ecf1 !important;
  --cw-text: #1a2b3c !important;
  --cw-text-muted: #6b7c93 !important;
  --cw-accent: #ff6b35 !important;
  --cw-top: #f5a623 !important;
  --cw-radius: 16px !important;
  --cw-radius-sm: 10px !important;
  --cw-shadow: 0 2px 12px rgba(13, 27, 35, 0.06) !important;
  --cw-shadow-hover: 0 8px 30px rgba(13, 27, 35, 0.12) !important;
  --cw-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Базовый шрифт */
body, .short_offers, .of-name, .of-select, .short_of_bnt a, .short_of_rekomend, h1, h2, h3, h4, h5, h6 {
  font-family: var(--cw-font) !important;
}

/* ============================================
   КАРТОЧКА ОФФЕРА
   ============================================ */

.short_offers {
  background: var(--cw-card-bg) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow) !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--cw-border) !important;
  position: relative !important;
}

.short_offers:hover {
 box-shadow: var(--cw-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* =================================
   ВЕРХ КАРТОЧКИ (лого + название)
   ============================================ */

.short_of_line {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px 0 !important;
}

.short_offers_img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  background: var(--cw-bg) !important;
  padding: 6px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.short_offers_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.short_of_title {
  flex: 1 !important;
  min-width: 0 !important;
}

.short_of_title a {
  font-size: 16px !important;
  font-weight: 70 !important;
  color: var(--cw-ink) !important;
  text-decoration: none !important;
  display: block !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}

.short_of_title a:hover {
  color: var(--cw-brand) !important;
}

.short_of_bank {
  font-size: 13px !important;
  color: var(--cw-text-muted) !important;
  margin: 0 !important;
}

/* ============================================
   ХАРАКТЕРИСТИКИ (4 плитки)
   ============================================ */

.short_of_loan {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 14px 18px !important;
}

.of-name {
  background: var(--cw-bg) !important;
  border-radius: var(--cw-radius-sm) !important;
  padding: 10px 8px !important;
  text-align: center !important;
  min-height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.of-name .of-select {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--cw-ink) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.of-name > div:last-child {
  font-size: 11px !important;
  color: var(--cw-text-muted) !important;
  line-height: 1.2 !important;
}

/* Подсветка первой характеристики (зеленая) */
.of-name:first-child .of-select {
  color: var(--cw-brand) !important;
}

/* Пустые значения */
.of-name .of-select:empty,
.of-name .of-select:empty::after {
  content: '—' !important;
  color: var(--cw-text-muted) !important;
  font-weight: 400 !important;
}

/* ============================================
   КНОПКА CTA
   ============================================ */

.short_of_bnt a,
.mob_short_of_bnt a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--cw-brand), var(--cw-brand-dark)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  height: 48px !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 15px rgba(21, 188, 115, 0.3) !important;
  margin: 14px 18px 0 !important;
  width: calc(100% - 36px) !important;
}

.short_of_bnt a:hover,
.mob_short_of_bnt a:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(21, 188, 115, 0.4) !important;
  color: #fff !important;
}

/* ============================================
   ЛИЦЕНЗИЯ
   ============================================ */

.short_of_licenz {
  font-size: 11px !important;
  color: var(--cw-text-muted) !important;
  padding: 12px 18px !important;
  text-align: center !important;
}

/* ============================================
   TOP-МЕТКА (Золотая рамка)
   ============================================ */

.short_of_rekomend {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: linear-gradient(135deg, #f5a623, #ff6b35) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 8px rgba(245, 16, 35, 0.4) !important;
}

/* ============================================
   ШАПКА СПИСКА
   ============================================ */

.sect-title h1 {
  font-size: 24px !important;
  font-weight: 70 !important;
  color: var(--cw-ink) !important;
  margin: 0 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--cw-border) !important;
}

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================ */

@media (max-width: 768px) {
  .short_of_loan {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }

  .of-name {
    min-height: 56px !important;
    padding: 8px 6px !important;
  }

  .of-name .of-select {
    font-size: 14px !important;
  }

 .short_of_line {
    padding: 14px 0 !important;
    gap: 10px !important;
  }

  .short_offers_img {
    width: 44px !important;
    height: 44px !important;
  }

  .short_of_title a {
    font-size: 14px !important;
  }

  .short_of_bnt {
    display: none !important;
  }

  .mob_short_of_bnt {
    padding: 0 18px 16px !important;
  }
}