/* ================================================================
   HARMONY SAS BANK — RESPONSIVE SYSTEM
   Clean unified responsive CSS — mobile + desktop optimization
   No emoji, no conflicts.
   Breakpoints:
     1280px+ = full desktop
     1024px  = medium desktop / tablet landscape
     768px   = tablet / large phone
     480px   = phone
     380px   = small phone
================================================================ */

/* ================================================================
   1. LOGIN PAGE — RESPONSIVE
================================================================ */

/* Full-screen split grid fix */
#bankLogin {
  display: grid !important;
  grid-template-columns: 460px 1fr !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Скрытие страницы логина после входа — перебивает display:grid !important */
#bankLogin.hidden,
#bankLogin[data-hidden="true"] {
  display: none !important;
}

.bls-left {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.bls-form-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 40px 48px !important;
  box-sizing: border-box !important;
}

.bls-right {
  width: 100% !important;
  min-height: 100vh !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 40px 48px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Medium desktop */
@media (max-width: 1100px) {
  #bankLogin {
    grid-template-columns: 420px 1fr !important;
  }
  .bls-form-area {
    padding: 32px 36px !important;
  }
}

/* Tablet landscape */
@media (max-width: 900px) {
  #bankLogin {
    grid-template-columns: 1fr !important;
  }
  .bls-right {
    display: none !important;
  }
  .bls-left {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 100vh !important;
  }
  #bankLogin {
    justify-items: center !important;
    background: #fff !important;
  }
  .bls-form-area {
    padding: 32px 40px !important;
  }
}

/* Phone */
@media (max-width: 600px) {
  .bls-left {
    max-width: 100% !important;
  }
  .bls-form-area {
    padding: 24px 20px !important;
    justify-content: flex-start !important;
    padding-top: 32px !important;
  }
  .bls-top-bar {
    padding: 16px 20px !important;
  }
  .bls-trust-bar {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .bls-trust-sep { display: none !important; }
  .bls-trust-item { font-size: 10px !important; }
}

/* ================================================================
   2. BANK APP — TOP NAVIGATION
================================================================ */

.bank-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--nav-h, 64px) !important;
  background: #fff !important;
  border-bottom: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  z-index: 300 !important;
  gap: 12px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}

.bank-nav-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.bank-nav-brand-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #003594 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  flex-shrink: 0 !important;
}

.bank-nav-brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #003594 !important;
  letter-spacing: -.3px !important;
}

.bank-nav-items {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
  justify-content: center !important;
  max-width: 700px !important;
}

.bank-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all .18s !important;
  border: none !important;
  background: none !important;
  white-space: nowrap !important;
}

.bank-nav-item:hover {
  background: #EFF6FF !important;
  color: #0A4FD4 !important;
}

.bank-nav-item.active {
  background: #EFF6FF !important;
  color: #0A4FD4 !important;
  font-weight: 600 !important;
}

.bank-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Medium desktop — shrink nav items */
@media (max-width: 1180px) {
  .bank-nav-item span { display: none !important; }
  .bank-nav-item { padding: 8px 10px !important; gap: 0 !important; }
  .bank-nav-items { max-width: unset !important; }
}

/* Tablet */
@media (max-width: 900px) {
  .bank-nav-items { display: none !important; }
  .bank-nav { padding: 0 16px !important; }
  .bank-nav-brand-name { display: none !important; }
  .bnr-user-info { display: none !important; }
  .bnr-divider { display: none !important; }
  .bnr-lang-wrap { display: none !important; }
}

/* Mobile bottom nav */
.bank-bottom-nav {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border-top: 1px solid #E2E8F0 !important;
  z-index: 300 !important;
  padding: 6px 0 8px !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,.07) !important;
}

.bank-bn-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 12px !important;
  flex: 1 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color .15s !important;
}

.bank-bn-item i {
  font-size: 18px !important;
}

.bank-bn-item.active,
.bank-bn-item:hover {
  color: #0A4FD4 !important;
}

@media (max-width: 900px) {
  .bank-bottom-nav {
    display: flex !important;
  }
  #bankMain {
    margin-bottom: 64px !important;
  }
}

/* ================================================================
   3. MAIN CONTENT AREA
================================================================ */

#bankMain {
  margin-top: 64px !important;
  flex: 1 !important;
  background: #F4F6FB !important;
  min-height: calc(100vh - 64px) !important;
}

/* Page containers */
.bpage {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 28px 32px !important;
  box-sizing: border-box !important;
}

#bpage-dashboard {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ================================================================
   4. DASHBOARD — GRID LAYOUT
================================================================ */

/* Dashboard hero banner */
.db-hero-banner {
  background: linear-gradient(135deg, #003594 0%, #0A4FD4 60%, #1A6FFF 100%) !important;
  padding: 36px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  overflow: hidden !important;
}

.db-hero-content {
  max-width: 560px !important;
}

.db-hero-name {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.db-hero-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,.75) !important;
}

/* Stats row */
.db-stats-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 24px 32px !important;
}

.dash-card {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 20px !important;
  transition: transform .2s, box-shadow .2s !important;
}

.dash-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(10,79,212,.1) !important;
}

/* Main content grid */
.db-main-grid {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 20px !important;
  padding: 0 32px 32px !important;
}

@media (max-width: 1100px) {
  .db-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 20px !important;
  }
  .db-main-grid {
    grid-template-columns: 1fr !important;
    padding: 0 20px 24px !important;
  }
}

@media (max-width: 768px) {
  .db-hero-banner {
    padding: 24px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .db-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .db-main-grid {
    padding: 0 16px 20px !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px) {
  .db-stats-strip {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .db-hero-name {
    font-size: 20px !important;
  }
}

/* ================================================================
   5. THREE-COLUMN PAGE LAYOUT (Transfer, History, Cards, Loans)
================================================================ */

.transfer-page-grid,
.hpage-layout,
.cpage-layout,
.lpage-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr 280px !important;
  gap: 20px !important;
  align-items: start !important;
}

@media (max-width: 1280px) {
  .transfer-page-grid,
  .hpage-layout,
  .cpage-layout,
  .lpage-layout {
    grid-template-columns: 240px 1fr 240px !important;
    gap: 16px !important;
  }
}

@media (max-width: 1024px) {
  .transfer-page-grid,
  .hpage-layout,
  .cpage-layout,
  .lpage-layout {
    grid-template-columns: 1fr !important;
  }
  .transfer-sidebar,
  .hpage-sidebar,
  .cpage-sidebar,
  .lpage-sidebar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #bpage-transfer,
  #bpage-history,
  #bpage-cards,
  #bpage-loans,
  #bpage-profile {
    padding: 16px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 480px) {
  #bpage-transfer,
  #bpage-history,
  #bpage-cards,
  #bpage-loans,
  #bpage-profile {
    padding: 12px !important;
    padding-bottom: 76px !important;
  }
}

/* ================================================================
   6. TRANSFER PAGE
================================================================ */

.tpage-hero-banner {
  background: linear-gradient(135deg, #003594 0%, #0A4FD4 70%) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 24px !important;
  align-items: center !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.tpage-hero-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}

.tpage-hero-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.tpage-hero-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,.8) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
}

.tpage-hero-stats {
  display: flex !important;
  gap: 28px !important;
  margin-top: 20px !important;
}

.tpage-hero-num {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  display: block !important;
}

.tpage-hero-label {
  font-size: 11px !important;
  color: rgba(255,255,255,.65) !important;
  margin-top: 2px !important;
}

.tpage-hero-img-wrap {
  width: 200px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
}

.tpage-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Transfer steps */
.transfer-steps {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 24px !important;
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px 24px !important;
}

.tstep {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}

.tstep-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #E2E8F0 !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.tstep.active .tstep-num {
  background: #0A4FD4 !important;
  color: #fff !important;
}

.tstep-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
}

.tstep.active .tstep-label {
  color: #0A4FD4 !important;
  font-weight: 600 !important;
}

/* Widgets */
.tpage-widget,
.hpage-widget,
.cpage-widget,
.lpage-widget {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.tpage-widget-title,
.hpage-widget-title,
.cpage-widget-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

@media (max-width: 768px) {
  .tpage-hero-banner {
    grid-template-columns: 1fr !important;
    padding: 20px 18px !important;
  }
  .tpage-hero-img-wrap { display: none !important; }
  .tpage-hero-title { font-size: 22px !important; }
  .tpage-hero-stats { gap: 18px !important; }

  /* ── Форма перевода: одна колонка на мобильном ── */
  #transferFormBody > div[style*="grid-template-columns"],
  #bpage-transfer [style*="grid-template-columns:1fr 1fr"],
  #bpage-transfer [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Все span:2 сбрасываем — не нужны при одноколоночном лейауте */
  #bpage-transfer [style*="grid-column:span 2"],
  #bpage-transfer [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Поле суммы + валюта: фиксируем минимальную ширину */
  .transfer-amount-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
  .transfer-amount-input {
    flex: 1 !important;
    min-width: 0 !important;
    width: 0 !important; /* позволяет flex растягиваться */
  }
  .transfer-currency-select {
    width: 75px !important;
    flex-shrink: 0 !important;
  }
  /* bform-group полная ширина */
  .bform-group {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .bform-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .tpage-hero-title { font-size: 18px !important; }
  .transfer-steps { padding: 12px 14px !important; }
  .tstep-label { font-size: 11px !important; }
  .transfer-currency-select { width: 68px !important; }
}

/* ================================================================
   7. HISTORY PAGE
================================================================ */

.history-layout {
  display: grid !important;
  grid-template-columns: 1fr 240px !important;
  gap: 16px !important;
  align-items: start !important;
}

.history-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.hist-filter-input {
  flex: 1 !important;
  min-width: 160px !important;
}

.hist-filter-select {
  width: auto !important;
  min-width: 120px !important;
}

.table-wrap-bank {
  overflow-x: auto !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  background: #fff !important;
}

.data-table th,
.data-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.data-table th {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: #64748B !important;
  background: #F8FAFC !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .history-layout {
    grid-template-columns: 1fr !important;
  }
  .history-filters {
    flex-direction: column !important;
  }
  .hist-filter-input,
  .hist-filter-select {
    width: 100% !important;
  }
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    display: none !important;
  }
}

/* ================================================================
   8. CARDS PAGE
================================================================ */

.cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}

/* Card visual */
.bank-card-visual {
  border-radius: 16px !important;
  aspect-ratio: 1.586 !important;
  padding: 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .25s, box-shadow .25s !important;
}

.bank-card-visual:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.2) !important;
}

/* Cashback widget */
.cpage-cashback {
  background: linear-gradient(135deg, #003594 0%, #0A4FD4 100%) !important;
  color: #fff !important;
  border: none !important;
}

.cpage-cashback-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  margin-bottom: 12px !important;
}

.cpage-cashback-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.cpage-cashback-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.75) !important;
  margin-bottom: 14px !important;
  line-height: 1.5 !important;
}

.cpage-cb-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.85) !important;
  gap: 8px !important;
}

.cpage-cb-row span {
  font-weight: 700 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   9. LOANS PAGE
================================================================ */

.lpage-layout {
  grid-template-columns: 260px 1fr 260px !important;
}

.lpage-hero-banner {
  background: linear-gradient(120deg, #003594 0%, #0A4FD4 100%) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.lpage-photo-banner {
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 21/6 !important;
  margin-bottom: 24px !important;
}

.lpage-photo-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.lpage-photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,53,148,.8) 0%, rgba(10,79,212,.4) 50%, transparent 100%) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 36px !important;
}

.lpage-overlay-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  max-width: 400px !important;
}

/* Products grid */
.lpage-products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.lpage-product-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
  cursor: pointer !important;
  transition: all .2s !important;
}

.lpage-product-card:hover {
  border-color: #0A4FD4 !important;
  box-shadow: 0 4px 20px rgba(10,79,212,.1) !important;
  transform: translateY(-2px) !important;
}

.lpage-product-rate {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #003594 !important;
  margin: 8px 0 4px !important;
}

.lpage-product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 2px !important;
}

.lpage-product-sub {
  font-size: 11px !important;
  color: #64748B !important;
}

@media (max-width: 1024px) {
  .lpage-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .lpage-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lpage-photo-banner {
    aspect-ratio: 16/5 !important;
  }
}

@media (max-width: 480px) {
  .lpage-products-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ================================================================
   10. PROFILE PAGE
================================================================ */

.ppage-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.ppage-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ppage-avatar-card {
  background: linear-gradient(135deg, #003594 0%, #0A4FD4 100%) !important;
  border-radius: 16px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  color: #fff !important;
}

.ppage-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 auto 14px !important;
  border: 3px solid rgba(255,255,255,.3) !important;
}

.ppage-user-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.ppage-user-type {
  font-size: 12px !important;
  color: rgba(255,255,255,.7) !important;
  margin-bottom: 16px !important;
}

/* Profile tabs */
.ppage-tabs {
  display: flex !important;
  gap: 2px !important;
  background: #F1F5F9 !important;
  border-radius: 10px !important;
  padding: 3px !important;
  margin-bottom: 20px !important;
}

.ppage-tab {
  flex: 1 !important;
  padding: 8px 14px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  transition: all .18s !important;
  text-align: center !important;
}

.ppage-tab.active {
  background: #fff !important;
  color: #0A4FD4 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
}

@media (max-width: 900px) {
  .ppage-layout {
    grid-template-columns: 1fr !important;
  }
  .ppage-sidebar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .ppage-avatar-card {
    flex: 1 !important;
    min-width: 240px !important;
  }
}

@media (max-width: 480px) {
  .ppage-sidebar {
    flex-direction: column !important;
  }
  .ppage-avatar-card {
    min-width: unset !important;
  }
}

/* ================================================================
   11. FORM ELEMENTS — UNIVERSAL
================================================================ */

.b-form-group {
  margin-bottom: 16px !important;
}

.b-form-label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  letter-spacing: .02em !important;
}

.b-input-wrap {
  position: relative !important;
}

.b-form-input {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #0F172A !important;
  background: #fff !important;
  transition: border-color .18s, box-shadow .18s !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.b-form-input:focus {
  border-color: #0A4FD4 !important;
  box-shadow: 0 0 0 3px rgba(10,79,212,.1) !important;
}

.b-form-input--icon {
  padding-left: 42px !important;
}

.b-input-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

/* Buttons */
.bank-btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 46px !important;
  background: #003594 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .18s, transform .18s !important;
  letter-spacing: .01em !important;
}

.bank-btn-primary:hover {
  background: #0A4FD4 !important;
  transform: translateY(-1px) !important;
}

.bank-btn-sm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #003594 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .18s !important;
}

.bank-btn-sm:hover {
  background: #0A4FD4 !important;
}

/* ================================================================
   12. PANELS AND CARDS
================================================================ */

.bank-panel {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* ================================================================
   13. SIDEBAR PHOTO WIDGETS
================================================================ */

.sidebar-photo-widget {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.sidebar-photo-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
}

.sidebar-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .4s !important;
}

.sidebar-photo-widget:hover .sidebar-photo-img {
  transform: scale(1.04) !important;
}

.sidebar-photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, transparent 50%, rgba(10,36,99,.35) 100%) !important;
}

.sidebar-photo-body {
  padding: 14px 16px !important;
}

.sidebar-photo-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sidebar-photo-text {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
}

/* ================================================================
   14. BOTTOM PROMO STRIPS
================================================================ */

.tpage-bottom-banner,
.hpage-promo-strip,
.cpage-promo-strip {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-top: 20px !important;
}

.tpage-bottom-content {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.tpage-bottom-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin-bottom: 4px !important;
}

.tpage-bottom-sub {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

.tpage-bottom-icon {
  font-size: 28px !important;
  color: #0A4FD4 !important;
  flex-shrink: 0 !important;
}

.tpage-bottom-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.tpage-bottom-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.hpage-promo-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

.hpage-promo-card {
  border-radius: 12px !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.hpage-promo-icon {
  font-size: 24px !important;
  color: rgba(255,255,255,.85) !important;
}

.hpage-promo-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.hpage-promo-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}

.hpage-promo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  align-self: flex-start !important;
}

.cpage-promo-inner {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

.cpage-promo-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 140px !important;
}

.cpage-promo-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.cpage-promo-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.cpage-promo-desc {
  font-size: 11px !important;
  color: #64748B !important;
}

@media (max-width: 768px) {
  .hpage-promo-cards {
    grid-template-columns: 1fr !important;
  }
  .cpage-promo-inner {
    gap: 12px !important;
  }
  .cpage-promo-item {
    min-width: 120px !important;
  }
}

/* ================================================================
   15. NOTIFICATIONS PANEL
================================================================ */

.notif-panel {
  position: fixed !important;
  top: calc(var(--nav-h, 64px) + 8px) !important;
  right: 20px !important;
  width: 340px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.13) !important;
  z-index: 400 !important;
}

@media (max-width: 480px) {
  .notif-panel {
    right: 8px !important;
    width: calc(100vw - 16px) !important;
  }
}

/* ================================================================
   16. REGULATORY FOOTER
================================================================ */

.bank-regulatory-footer {
  background: #0A2463 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,.55) !important;
  line-height: 1.7 !important;
}

.brf-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 20px 32px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.brf-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.brf-logo-box {
  width: 34px !important;
  height: 34px !important;
  background: #0A4FD4 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.brf-logo-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: -.2px !important;
}

.brf-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.brf-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.7) !important;
  white-space: nowrap !important;
}

.brf-body {
  padding: 20px 32px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 24px !important;
  align-items: start !important;
}

.brf-text {
  font-size: 11px !important;
  color: rgba(255,255,255,.45) !important;
  line-height: 1.7 !important;
  max-width: 800px !important;
}

.brf-text a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,.25) !important;
}

.brf-text a:hover {
  color: rgba(255,255,255,.9) !important;
}

.brf-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.brf-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer !important;
  padding: 2px 0 !important;
  transition: color .15s !important;
}

.brf-link:hover {
  color: rgba(255,255,255,.9) !important;
}

.brf-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 32px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  font-size: 10.5px !important;
  color: rgba(255,255,255,.3) !important;
}

.brf-copy {
  flex: 1 !important;
}

.brf-back-top {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  color: rgba(255,255,255,.4) !important;
  font-size: 11px !important;
  transition: color .15s !important;
  flex-shrink: 0 !important;
}

.brf-back-top:hover {
  color: rgba(255,255,255,.85) !important;
}

@media (max-width: 900px) {
  .brf-body {
    grid-template-columns: 1fr !important;
  }
  .brf-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 600px) {
  .brf-top, .brf-body, .brf-bottom {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .brf-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ================================================================
   17. MODAL OVERLAYS
================================================================ */

.bank-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 500 !important;
  /* НЕ задаём display здесь — JS управляет через style.display */
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.bank-modal-box {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 480px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.2) !important;
}

@media (max-width: 480px) {
  .bank-modal-box {
    padding: 20px !important;
    border-radius: 12px !important;
  }
}

/* ================================================================
   18. NAVIGATION RIGHT AREA
================================================================ */

.bnr-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: none !important;
  border: none !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  position: relative !important;
  font-size: 15px !important;
}

.bnr-icon-btn:hover {
  background: #EFF6FF !important;
  color: #0A4FD4 !important;
}

.bnr-notif-dot {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #EF4444 !important;
  border: 2px solid #fff !important;
}

.bnr-user-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px 4px 4px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

.bnr-user-pill:hover {
  background: #F1F5F9 !important;
}

.bnr-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #003594, #0A4FD4) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.bnr-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
}

.bnr-user-type {
  font-size: 11px !important;
  color: #64748B !important;
}

.bnr-logout-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: none !important;
  border: none !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  transition: background .15s, color .15s !important;
}

.bnr-logout-btn:hover {
  background: #FEF2F2 !important;
  color: #EF4444 !important;
}

.bnr-divider {
  width: 1px !important;
  height: 28px !important;
  background: #E2E8F0 !important;
  flex-shrink: 0 !important;
}

/* Language switcher */
.bnr-lang-wrap {
  position: relative !important;
}

.bnr-lang-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

.bnr-lang-btn:hover {
  background: #F1F5F9 !important;
}

.bnr-lang-drop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
  min-width: 160px !important;
  z-index: 400 !important;
}

.bnr-lang-item {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #334155 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background .12s !important;
}

.bnr-lang-item:hover {
  background: #EFF6FF !important;
}

/* ================================================================
   19. UTILITY CLASSES
================================================================ */

.text-blue { color: #0A4FD4 !important; }
.text-green { color: #10B981 !important; }
.text-red { color: #EF4444 !important; }
.text-gray { color: #64748B !important; }
.font-bold { font-weight: 700 !important; }
.font-600 { font-weight: 600 !important; }

/* Status badges */
.badge-success {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
}

.badge-warning {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #FFFBEB !important;
  color: #D97706 !important;
}

.badge-danger {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

/* ================================================================
   20. REMOVE OLD CONFLICTING OVERRIDES
================================================================ */

/* Force consistent max-width for all pages */
@media (min-width: 1440px) {
  .bpage {
    padding-left: calc((100% - 1400px) / 2) !important;
    padding-right: calc((100% - 1400px) / 2) !important;
  }
  #bpage-dashboard {
    padding: 0 !important;
  }
}

/* Prevent overflow on all pages */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Transfer main column */
.transfer-main-col {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* History main */
.hpage-main {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Cards main */
.cpage-main {
  min-width: 0 !important;
}

/* Loans main */
.lpage-main {
  min-width: 0 !important;
}

/* ================================================================
   21. BANK APP CONTAINER
================================================================ */

#bankApp {
  display: none;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: #F4F6FB !important;
}

/* ================================================================
   22. BANK PROFILE HEADER
================================================================ */

.bank-profile-header,
.profile-header-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.bank-profile-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.bank-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}

.bank-btn-outline:hover {
  border-color: #0A4FD4 !important;
  color: #0A4FD4 !important;
}

.bank-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  background: #FEF2F2 !important;
  border: 1.5px solid #FECACA !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #DC2626 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}

.bank-btn-danger:hover {
  background: #DC2626 !important;
  color: #fff !important;
}

/* ================================================================
   23. PROFILE BOTTOM GRID
================================================================ */

.profile-bottom-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

.profile-why-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  overflow: hidden !important;
}

.profile-why-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.profile-why-header > i {
  font-size: 28px !important;
  color: #003594 !important;
  flex-shrink: 0 !important;
}

.profile-why-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.profile-why-sub {
  font-size: 12px !important;
  color: #64748B !important;
  margin-top: 2px !important;
}

.profile-why-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.profile-why-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.profile-why-item > i {
  font-size: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.profile-why-item strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin-bottom: 2px !important;
}

.profile-why-item p {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.profile-why-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.profile-why-badges span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Profile contact card */
.profile-contact-card {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.profile-contact-photo-wrap {
  position: relative !important;
  aspect-ratio: 16/7 !important;
  min-height: 180px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #003594 0%, #0A4FD4 100%) !important; /* fallback пока фото грузится */
}

.profile-contact-photo {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .4s !important;
}

.profile-contact-card:hover .profile-contact-photo {
  transform: scale(1.03) !important;
}

.profile-contact-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,53,148,.75) 0%, transparent 60%) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 14px 16px !important;
}

.profile-contact-location {
  font-size: 12px !important;
  color: rgba(255,255,255,.9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.profile-contact-info {
  padding: 20px !important;
}

.profile-contact-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 14px !important;
}

.profile-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.profile-contact-row > i {
  font-size: 14px !important;
  color: #0A4FD4 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.pcr-label {
  font-size: 10.5px !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-weight: 600 !important;
}

.pcr-val {
  font-size: 13px !important;
  color: #1E293B !important;
  font-weight: 500 !important;
}

.profile-contact-btn {
  width: 100% !important;
  margin-top: 14px !important;
  padding: 10px !important;
  background: #003594 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transition: background .18s !important;
}

.profile-contact-btn:hover {
  background: #0A4FD4 !important;
}

/* Profile legal strip */
.profile-legal-strip {
  margin-top: 20px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.profile-legal-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
}

.profile-legal-item > i {
  font-size: 12px !important;
  color: #0A4FD4 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 900px) {
  .profile-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  .bank-profile-header {
    padding: 18px 20px !important;
  }
  /* Фото офиса — явная высота на планшетах */
  .profile-contact-photo-wrap {
    height: 220px !important;
    min-height: 220px !important;
    aspect-ratio: unset !important;
  }
  .profile-contact-photo {
    height: 220px !important;
    min-height: 220px !important;
  }
}

@media (max-width: 600px) {
  /* Фото офиса — явная высота на телефонах */
  .profile-contact-photo-wrap {
    height: 200px !important;
    min-height: 200px !important;
    aspect-ratio: unset !important;
    width: 100% !important;
  }
  .profile-contact-photo {
    height: 200px !important;
    min-height: 200px !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .bank-profile-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  .profile-contact-photo-wrap {
    height: 180px !important;
    min-height: 180px !important;
  }
  .profile-contact-photo {
    height: 180px !important;
    min-height: 180px !important;
  }
}

/* ================================================================
   24. LOAN PRODUCTS STRIP
================================================================ */

.lpage-products-strip {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-top: 20px !important;
}

.lpage-products-header {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.lpage-products-row {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
}

.lpage-product-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 14px 10px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  background: #F8FAFC !important;
}

.lpage-product-pill:hover {
  border-color: #0A4FD4 !important;
  background: #EFF6FF !important;
  transform: translateY(-2px) !important;
}

.lpage-product-pill > i {
  font-size: 20px !important;
}

.lpp-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.lpp-rate {
  font-size: 10.5px !important;
  color: #64748B !important;
}

@media (max-width: 900px) {
  .lpage-products-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .lpage-products-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   25. DETAIL TABS (Profile + History)
================================================================ */

.detail-tabs {
  display: flex !important;
  gap: 2px !important;
  background: #F1F5F9 !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 4px 4px 0 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.detail-tabs::-webkit-scrollbar {
  display: none !important;
}

.detail-tab {
  padding: 10px 16px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all .18s !important;
  white-space: nowrap !important;
  border: none !important;
  background: none !important;
}

.detail-tab.active {
  background: #fff !important;
  color: #0A4FD4 !important;
  font-weight: 600 !important;
  box-shadow: 0 -1px 0 0 #E2E8F0 inset, 1px 0 0 0 #E2E8F0 inset, -1px 0 0 0 #E2E8F0 inset !important;
}

.detail-tab:hover:not(.active) {
  color: #1E293B !important;
  background: rgba(255,255,255,.6) !important;
}

@media (max-width: 480px) {
  .detail-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ================================================================
   26. LOAN SIDEBAR WIDGETS
================================================================ */

.lpage-why {
  text-align: center !important;
  padding: 20px !important;
}

.lpage-why-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #EFF6FF !important;
  color: #003594 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin: 0 auto 10px !important;
}

.lpage-why-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1E293B !important;
  margin-bottom: 12px !important;
}

.lpage-why-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #475569 !important;
  padding: 6px 0 !important;
  border-top: 1px solid #F1F5F9 !important;
}

.lpage-widget-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.lpage-legal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin: 3px 0 !important;
}

.lpage-elig-item,
.lpage-tip-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: #475569 !important;
  padding: 5px 0 !important;
}

/* ================================================================
   27. PHOTO BANNER FOR LOANS
================================================================ */

.lpage-photo-banner {
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  height: 280px !important;
  margin-bottom: 20px !important;
}

.lpage-photo-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.lpage-photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,53,148,.82) 0%, rgba(10,79,212,.4) 50%, transparent 100%) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 40px !important;
}

.lpage-photo-content {
  max-width: 500px !important;
}

.lpage-photo-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.lpage-photo-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}

.lpage-photo-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

.lpage-photo-certs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.lpage-photo-certs span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: rgba(255,255,255,.15) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.9) !important;
}

@media (max-width: 768px) {
  .lpage-photo-banner {
    height: 200px !important;
  }
  .lpage-photo-overlay {
    padding: 0 20px !important;
  }
  .lpage-photo-title {
    font-size: 18px !important;
  }
  .lpage-photo-sub {
    display: none !important;
  }
}

/* ================================================================
   28. TRANSFER RATES WIDGET
================================================================ */

.tpage-rate-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 12.5px !important;
}

.tpage-rate-pair {
  color: #64748B !important;
  font-weight: 500 !important;
}

.tpage-rate-val {
  font-weight: 700 !important;
  color: #1E293B !important;
}

.tpage-rate-chg {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.tpage-rate-chg.up { color: #10B981 !important; }
.tpage-rate-chg.down { color: #EF4444 !important; }

.tpage-rates-note {
  font-size: 10.5px !important;
  color: #94A3B8 !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tpage-type-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.tpage-type-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.tpage-type-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.tpage-type-desc {
  font-size: 11px !important;
  color: #64748B !important;
}

.tpage-sec-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  color: #10B981 !important;
  padding: 4px 0 !important;
}

.tpage-limit-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 12.5px !important;
}

.tpage-limit-val {
  font-weight: 700 !important;
  color: #0A4FD4 !important;
}

.tpage-limits-note {
  font-size: 11px !important;
  color: #94A3B8 !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.tpage-tip {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  font-size: 12px !important;
  color: #475569 !important;
  padding: 5px 0 !important;
  line-height: 1.5 !important;
}

/* ================================================================
   29. HISTORY PAGE WIDGETS
================================================================ */

.hpage-stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 12.5px !important;
  color: #475569 !important;
}

.hpage-tip-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  border-bottom: 1px solid #F8FAFC !important;
  line-height: 1.5 !important;
}

.hpage-export-btn {
  width: 100% !important;
  padding: 9px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transition: all .18s !important;
}

.hpage-export-btn:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
}

.hpage-fgdr-widget {
  text-align: center !important;
}

.hpage-fgdr-logo {
  font-size: 32px !important;
  color: #0A4FD4 !important;
  margin-bottom: 10px !important;
}

.hpage-fgdr-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.hpage-fgdr-amount {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #003594 !important;
  margin: 6px 0 !important;
}

.hpage-fgdr-sub {
  font-size: 11px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

.hpage-cat-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  font-size: 12.5px !important;
  color: #475569 !important;
}

.hpage-cat-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ================================================================
   30. CARDS WIDGETS
================================================================ */

.cpage-wallet-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1E293B !important;
}

.cpage-wallet-badge {
  margin-left: auto !important;
  padding: 2px 8px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

.cpage-ins-item,
.cpage-sec-feature {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 12.5px !important;
  color: #475569 !important;
}

.cpage-ins-note {
  font-size: 10.5px !important;
  color: #94A3B8 !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.cpage-fee-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 12px !important;
  color: #475569 !important;
}

.cpage-fee-free {
  color: #10B981 !important;
  font-weight: 700 !important;
}

/* ================================================================
   31. ACCOUNT SUMMARY CARDS
================================================================ */

.account-summary-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #F8FAFC !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
}

.account-summary-item-label {
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

.account-summary-item-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #003594 !important;
}

/* ================================================================
   32. LANDING PAGE (landing.html)
================================================================ */

/* Fix any landing.html overflows */
.landing-nav,
.landing-hero,
.landing-section {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ================================================================
   31. REGISTRATION OVERLAY — MOBILE OPTIMIZATION
   Убираем горизонтальный скролл, растягиваем вниз
================================================================ */

/* Базовый оверлей — скролл снаружи модального окна */
#regOverlay {
  overflow-y: auto !important;
  padding: 20px !important;
  align-items: flex-start !important;
}

/* Модальное окно — нет ограничения высоты */
#regModalBox {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Двухколоночные гриды → одна колонка на мобильных */
@media (max-width: 640px) {
  #regOverlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* Модальное окно — flex-column, ничего не обрезаем */
  #regOverlay > div {
    border-radius: 0 !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Тело формы — скроллится, занимает всё свободное пространство */
  #regBody {
    flex: 1 1 0 !important;
    min-height: 0 !important;  /* важно для flex-скролла */
    padding: 16px 16px 24px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Навигационные кнопки — не сжимаются, всегда внизу */
  #regNavBar {
    flex-shrink: 0 !important;
    background: white !important;
    padding: 12px 16px 20px !important;
    border-top: 1px solid var(--gray-100) !important;
  }

  /* Старый селектор по inline-стилю — оставляем для совместимости */
  #regOverlay [style*="padding:16px 28px"] {
    padding: 12px 16px 20px !important;
  }

  /* Заголовок */
  #regOverlay [style*="padding:24px 28px"] {
    padding: 16px 16px 0 !important;
  }

  /* Двухколоночный грид → одна колонка */
  .reg-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Трёхколоночный грид → одна колонка */
  .reg-grid-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Поля формы: полная ширина */
  .reg-field {
    width: 100% !important;
  }

  .reg-field input,
  .reg-field select,
  .reg-field textarea {
    width: 100% !important;
    font-size: 16px !important;   /* iOS не зумирует поля >=16px */
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Поле с паролем */
  .reg-pass-wrap {
    width: 100% !important;
  }
  .reg-pass-wrap input {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Секции регистрации */
  .reg-section {
    margin-bottom: 16px !important;
  }
  .reg-section-header {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  /* Резюме шага 5 */
  .reg-summary-box {
    overflow: hidden !important;
    word-break: break-word !important;
  }
  .reg-summary-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    word-break: break-word !important;
  }

  /* Кнопки навигации — полная ширина */
  #regNextBtn,
  #regSubmitBtn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  #regPrevBtn {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  /* Точки прогресса */
  .reg-dot {
    width: 7px !important;
    height: 7px !important;
  }

  /* Заголовок шага */
  #regStepTitle {
    font-size: 16px !important;
  }
  #regStepSub {
    font-size: 12px !important;
  }

  /* Чекбоксы */
  .reg-checkbox-label {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Блок terms */
  .reg-terms-box {
    font-size: 12px !important;
    padding: 12px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
  }

  /* Уведомление */
  .reg-notice {
    font-size: 11px !important;
    padding: 10px 12px !important;
  }

  /* PEP info */
  .reg-pep-info {
    font-size: 11px !important;
  }
}

/* ================================================================
   32. ВСПЛЫВАЮЩЕЕ ОКНО ВОССТАНОВЛЕНИЯ ПАРОЛЯ — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 480px) {
  #forgotPassOverlay {
    padding: 8px !important;
    align-items: flex-end !important;
  }

  .fp-card {
    padding: 24px 20px !important;
    border-radius: 20px 20px 16px 16px !important;
    max-width: 100% !important;
  }

  .fp-code-input {
    gap: 6px !important;
  }
  .fp-code-input input {
    width: 38px !important;
    height: 46px !important;
    font-size: 18px !important;
  }
}

/* ================================================================
   33. DASHBOARD — MOBILE GRID
================================================================ */

@media (max-width: 768px) {
  /* Accounts strip */
  .dash-accounts-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .dash-account-card {
    min-width: 200px !important;
    flex-shrink: 0 !important;
  }

  /* Quick actions */
  .dash-quick-actions {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  /* Stats grid */
  .dash-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Promo cards */
  .dash-promo-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .dash-quick-actions {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .dash-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ================================================================
   34. TRANSFER PAGE — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 768px) {
  /* Убираем сайдбар у переводов */
  .transfer-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .transfer-sidebar {
    display: none !important;
  }

  /* Шаги трансфера */
  .tstep-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  /* Кнопки подтверждения */
  .tx-btn-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .tx-btn-row > button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================
   35. HISTORY PAGE — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 768px) {
  .hpage-layout {
    flex-direction: column !important;
  }

  .hpage-sidebar {
    display: none !important;
  }

  /* Фильтры */
  .hpage-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hpage-filters input,
  .hpage-filters select {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Таблица транзакций */
  .htx-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Скрываем ненужные колонки на мобильном */
  .htx-col-cat,
  .htx-col-id {
    display: none !important;
  }
}

/* ================================================================
   36. CARDS PAGE — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 768px) {
  .cpage-layout {
    flex-direction: column !important;
  }
  .cpage-sidebar {
    display: none !important;
  }

  /* Промо полоса карточек */
  .cpage-promo-inner {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Тарифная таблица */
  .cpage-fee-table {
    font-size: 12px !important;
  }

  .cpage-bottom-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }

  .cpage-strip-item {
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================================
   37. LOANS PAGE — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 768px) {
  .lpage-layout {
    flex-direction: column !important;
  }
  .lpage-sidebar {
    display: none !important;
  }

  .lpage-products-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .lpage-products-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   38. PROFILE PAGE — МОБИЛЬНАЯ
================================================================ */

@media (max-width: 768px) {
  /* Табы профиля — скролл */
  .profile-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }

  .profile-tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Поля личной информации */
  .profile-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Настройки безопасности */
  .profile-security-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ================================================================
   39. INPUT/SELECT FONT-SIZE ON IOS (prevent zoom)
================================================================ */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}