.app-loader {
  --loader-size: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 180px;
  width: 100%;
  padding: 32px 20px;
  color: var(--ui-accent, #8b5cf6);
  text-align: center;
}
.app-loader--small { --loader-size: 24px; min-height: 96px; gap: 10px; }
.app-loader--large { --loader-size: 60px; min-height: 260px; }
.app-loader-ring { flex: none; width: var(--loader-size); height: var(--loader-size); overflow: visible; }
.app-loader-track { stroke: currentColor; stroke-width: 3; opacity: .12; }
.app-loader-arc { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 28 72; transform-origin: 24px 24px; animation: app-loader-orbit 1.15s cubic-bezier(.45, .05, .55, .95) infinite; }
.app-loader-core { fill: currentColor; opacity: .7; animation: app-loader-breathe 1.8s ease-in-out infinite; }
.app-loader-text { max-width: 320px; color: var(--ui-secondary, var(--ui-secondary)); font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-loader--page { min-height: calc(100dvh - 100px); background: var(--ui-canvas, var(--ui-canvas)); }
.app-loader--inline { display: inline-flex; flex-direction: row; width: auto; min-height: 0; padding: 0; gap: 8px; vertical-align: middle; text-align: inherit; }
.app-loader--inline .app-loader-text { color: inherit; font: inherit; }
body .ui-button .app-loader { --loader-size: 18px; color: inherit; }
@keyframes app-loader-orbit { to { transform: rotate(360deg); } }
@keyframes app-loader-breathe { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .app-loader-arc, .app-loader-core { animation: none; } }
/* frontend/src/pages/LandingPage.css */

/* ============================================================
   🔥 БАЗОВЫЕ СТИЛИ — СВЕТЛАЯ ТЕМА
   ============================================================ */
.landing-page {
  min-height: 100vh;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   🔥 НАВИГАЦИЯ — НА ВСЮ ШИРИНУ
   ============================================================ */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ui-surface-translucent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
}

.landing-nav .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
}

.logo-icon {
  font-size: 28px;
}

.logo-highlight {
  color: var(--ui-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  color: var(--ui-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--ui-ink);
}

.nav-cta {
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  padding: 8px 20px;
  border-radius: 8px;
  color: white !important;
  font-weight: 600 !important;
}

.nav-cta:hover {
  opacity: 0.9;
  color: white !important;
}

/* ============================================================
   🔥 HERO СЕКЦИЯ
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  background: linear-gradient(135deg, var(--ui-canvas) 0%, var(--ui-accent-soft) 100%);
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  color: var(--ui-accent);
  margin-bottom: 24px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--ui-action);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.fade-in-up-delay {
  animation: fadeInUp 0.8s ease 0.3s forwards;
  opacity: 0;
}

.hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--ui-ink);
}

.hero-gradient {
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action), #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 18px;
  color: var(--ui-secondary);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  border: none;
  color: white;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
  color: white;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--ui-ink);
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: var(--ui-subtle);
  border-color: var(--ui-border-strong);
}

.btn-large {
  padding: 18px 48px;
  font-size: 18px;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 14px;
  color: var(--ui-muted);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--ui-border);
}

/* ============================================================
   🔥 ПРЕВЬЮ КАЛЬКУЛЯТОРА
   ============================================================ */
.calculator-preview {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-subtle);
}

.preview-dots {
  display: flex;
  gap: 6px;
}

.preview-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.preview-dots span:first-child {
  background: #ef4444;
}
.preview-dots span:nth-child(2) {
  background: #f59e0b;
}
.preview-dots span:last-child {
  background: #22c55e;
}

.preview-title {
  font-size: 14px;
  color: var(--ui-muted);
  margin-left: 4px;
}

.preview-body {
  padding-top: 16px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-subtle);
}

.preview-label {
  color: var(--ui-muted);
  font-size: 14px;
}

.preview-value {
  color: var(--ui-ink);
  font-weight: 500;
}

.preview-divider {
  height: 1px;
  background: var(--ui-subtle);
  margin: 12px 0;
}

.preview-result {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 0;
}

.preview-result .preview-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-ink);
}

.preview-result-value {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   🔥 FEATURES
   ============================================================ */
.features {
  position: relative;
  z-index: 1;
  padding: 80px 0;
  background: var(--ui-surface);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ui-ink);
}

.section-subtitle {
  font-size: 18px;
  color: var(--ui-muted);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--ui-canvas);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 32px 24px;
  transition: all 0.3s;
}

.feature-card:hover {
  background: var(--ui-surface);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ui-ink);
}

.feature-card p {
  font-size: 14px;
  color: var(--ui-secondary);
  line-height: 1.6;
}

/* ============================================================
   🔥 CTA
   ============================================================ */
.cta {
  position: relative;
  z-index: 1;
  padding: 80px 0;
  background: var(--ui-canvas);
}

.cta-content {
  text-align: center;
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  border-radius: 24px;
  padding: 60px 40px;
  color: white;
}

.cta-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}

.cta-description {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 32px;
}

.cta-content .btn-primary {
  background: var(--ui-surface);
  color: var(--ui-accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cta-content .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   🔥 FOOTER
   ============================================================ */
.landing-footer {
  position: relative;
  z-index: 1;
  padding: 60px 0 24px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-brand .logo-text {
  font-size: 20px;
}

.footer-desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ui-muted);
  max-width: 300px;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-column h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ui-ink);
}

.footer-column a {
  display: block;
  font-size: 14px;
  color: var(--ui-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: var(--ui-ink);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--ui-border);
  text-align: center;
  font-size: 14px;
  color: var(--ui-muted);
}

/* ============================================================
   🔥 АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-title {
    font-size: 40px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calculator-preview {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hero-title {
    font-size: 32px;
  }

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

  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cta-content {
    padding: 40px 24px;
  }

  .cta-title {
    font-size: 28px;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .stat-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }
}
/* frontend/src/components/Logo/Logo.css */

.logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s;
}

.logo-link:hover {
  opacity: 0.85;
}

.logo-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* Размеры */
.logo-small {
  font-size: 16px;
}

.logo-medium {
  font-size: 20px;
}

.logo-large {
  font-size: 28px;
}

/* ============================================================
   ВАРИАНТЫ ТЕМЫ
   ============================================================ */

/* Светлая тема: Ipoteka — чёрный, Partner — фиолетовый */
.logo-variant-light {
  color: var(--ui-ink);
}
.logo-variant-light .logo-highlight {
  color: var(--ui-accent);
}

/* Тёмная тема: Ipoteka — чёрный, Partner — белый */
.logo-variant-dark {
  color: var(--ui-ink);
}
.logo-variant-dark .logo-highlight {
  color: var(--ui-accent);
}
/* frontend/src/components/Footer/Footer.css */

.landing-footer {
  position: relative;
  z-index: 1;
  padding: 60px 0 24px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.landing-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ui-muted);
  max-width: 300px;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-column h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ui-ink);
}

.footer-column a {
  display: block;
  font-size: 14px;
  color: var(--ui-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: var(--ui-ink);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--ui-border);
  text-align: center;
  font-size: 14px;
  color: var(--ui-muted);
}

/* ============================================================
   🔥 АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.app-error-state {
  color: var(--ui-ink);
  text-align: left;
}

.app-error-state--inline {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px;
  margin: 16px 0;
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: var(--ui-surface);
}

.error-state-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 15px;
  color: var(--ui-accent-text);
  background: var(--ui-accent-soft);
}

.error-state-icon svg { width: 28px; height: 28px; }
.error-state-content { min-width: 0; }
.app-error-state h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; letter-spacing: -0.4px; }
.app-error-state .error-state-description { margin: 0; max-width: 48ch; color: var(--ui-secondary); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.error-state-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.error-state-actions svg { width: 18px; height: 18px; flex-shrink: 0; }

.app-error-page {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 70px);
  padding: 56px 32px;
  background: var(--ui-canvas);
}

.app-error-state--page {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  width: min(100%, 1040px);
  padding: 32px 0;
}

.app-error-state--page h1 { margin: 18px 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -1.3px; font-weight: 650; text-wrap: balance; }
.app-error-state--page .error-state-description { font-size: 16px; }
.error-state-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ui-accent-text); font-size: 13px; font-weight: 600; }
.error-state-eyebrow > span { padding: 3px 9px; border: 1px solid var(--ui-border); border-radius: 7px; color: var(--ui-secondary); background: var(--ui-surface); font-size: 11px; font-weight: 500; }
.app-error-state--page .error-state-actions { margin-top: 30px; }
.app-error-state--page .error-state-actions .ui-button { min-height: 48px; padding: 12px 18px; }

.error-artwork { position: relative; display: grid; place-items: center; height: 350px; isolation: isolate; color: var(--ui-accent); }
.error-artwork::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse, var(--ui-accent-soft) 20%, transparent 70%); z-index: -1; }
.error-artwork-orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed var(--ui-accent-border); border-radius: 50%; transform: translate(-50%, -50%); }
.error-artwork-orbit--outer { width: 350px; height: 350px; }
.error-artwork-orbit--inner { width: 282px; height: 282px; border-style: solid; opacity: 0.65; }
.error-artwork-sheet { position: absolute; width: 270px; height: 224px; border: 1px solid var(--ui-accent-border); border-radius: 20px; background: var(--ui-accent-soft); transform: rotate(-9deg) translate(-7px, 3px); }
.error-artwork-window { position: relative; width: 276px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); box-shadow: 0 20px 48px -20px #6c46aa38; transform: rotate(4deg); overflow: hidden; }
.error-artwork-toolbar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-subtle); }
.error-artwork-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent-border); }
.error-artwork-toolbar span { width: 98px; height: 7px; margin-left: 12px; border-radius: 5px; background: var(--ui-border); }
.error-artwork-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 24px 30px; }
.error-artwork-code { font-size: 82px; font-weight: 750; line-height: 1.25; letter-spacing: -5px; color: var(--ui-accent); }
.error-artwork-symbol { display: grid; place-items: center; height: 102px; }
.error-artwork-symbol svg { width: 76px; height: 76px; stroke-width: 1.4; }
.error-artwork-line { width: 128px; height: 8px; border-radius: 8px; background: var(--ui-accent-soft); }
.error-artwork-line--short { width: 78px; background: var(--ui-subtle); }
.error-artwork-badge { position: absolute; top: 218px; left: calc(50% + 87px); display: grid; place-items: center; width: 64px; height: 64px; border: 5px solid var(--ui-canvas); border-radius: 22px; background: var(--ui-action); color: white; box-shadow: 0 8px 20px #6c46aa24; transform: rotate(-8deg); }
.error-artwork-badge svg { width: 34px; height: 34px; }
.error-artwork-spark { position: absolute; color: var(--ui-accent); font-size: 24px; font-weight: 300; }
.error-artwork-spark--one { top: 23px; left: 56px; transform: rotate(15deg); }
.error-artwork-spark--two { right: 17px; bottom: 53px; font-size: 18px; transform: rotate(20deg); }

@media (max-width: 760px) {
  body:has(.app-error-page) .floating-tools { display: none; }
  .app-error-page { padding: 28px 24px; }
  .app-error-state--page { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; text-align: center; }
  .error-artwork { height: 280px; width: min(100%, 360px); margin: 0 auto; transform: scale(0.8); }
  .app-error-state--page .error-state-description { margin: 0 auto; }
  .error-state-eyebrow, .app-error-state--page .error-state-actions { justify-content: center; }
  .app-error-state--page h1 { margin: 16px 0; }
}

@media (max-width: 420px) {
  .app-error-state--inline { padding: 20px; gap: 12px; flex-direction: column; }
  .app-error-page { padding: 16px 20px 32px; }
  .app-error-state--page .error-state-actions { flex-direction: column; align-items: stretch; }
  .app-error-state--page .error-state-actions .ui-button { width: 100%; }
  .app-error-state--page h1 { font-size: 30px; }
}

.app-recovery { min-height: 100svh; }
.app-notices { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 10000; display: grid; gap: 10px; max-width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.app-notices .floating-notice { position: static; width: 100%; max-height: none; flex-shrink: 0; }
.app-notices:empty { display: none; }
.app-notices .floating-notice-message .ui-button { display: flex; margin-top: 10px; }
/* MortgageCalculator.css */

.mortgage-calculator-page {
  max-width: 100%;
  margin: 0 auto;
  background: var(--ui-subtle);
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;
}

.calculator-content-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.calculator-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-shrink: 0; margin-bottom: 24px; }
.calculator-page-heading h1 { margin: 0; color: var(--ui-ink); font-size: 32px; font-weight: 650; letter-spacing: -1px; line-height: 1.3; }
.calculator-page-heading p { margin: 12px 0 0; color: var(--ui-secondary); font-size: 14px; line-height: 1.7; }

/* 🔥 Основной layout */
.calculator-status-page {
  display: grid;
  place-items: center;
}

.calculator {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 30px;
  align-items: start;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

/* Левая колонка — форма */
.calculator-form-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

.calculator-form-wrapper::-webkit-scrollbar {
  width: 6px;
}
.calculator-form-wrapper::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 3px;
}

/* Правая колонка — результаты + офферы */
.calculator-results {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  box-sizing: border-box;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.calculator-results::-webkit-scrollbar {
  display: none;
}

/* Карточка результатов */
.results-white-card {
  background: var(--ui-surface);
  border-radius: 0.75rem;
  border: 1px solid var(--ui-border);
  padding: 0.875rem 1.25rem;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  overflow: hidden;
}

/* ============================================================
   🔥 КНОПКА-ТРИГГЕР КОРЗИНЫ (fixed, слева от панели)
   ============================================================ */
.basket-toggle-btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1100;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.75rem 0.9rem;
  border: none;
  border-radius: 1rem 0 0 0.75rem;

  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;

  box-shadow: -4px 4px 16px rgba(139, 92, 246, 0.35);
  transition: all 0.25s ease;

  right: 0;
}

.basket-toggle-btn:hover {
  transform: translateY(-50%) translateX(-2px);
  box-shadow: -6px 4px 20px rgba(139, 92, 246, 0.5);
}

/* 🔥 Когда панель открыта — кнопка уезжает вправо на ширину панели */
.basket-toggle-btn.is-open {
  right: var(--basket-width, 50vw);
  border-radius: 0.75rem 0 0 0.75rem;
}

.basket-toggle-btn .basket-toggle-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.basket-toggle-btn .basket-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* 🔥 Пульсация, если в корзине есть новые элементы */
.basket-toggle-btn.has-items {
  animation: none;
}

@keyframes basketPulse {
  0%,
  100% {
    box-shadow: -4px 4px 16px rgba(139, 92, 246, 0.35);
  }
  50% {
    box-shadow: -4px 4px 24px rgba(139, 92, 246, 0.65);
  }
}

/* ============================================================
   🔥 ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ КОРЗИНЫ
   ============================================================ */
.calculator-basket {
  --basket-width: var(--side-panel-width);

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--basket-width);
  z-index: 1050;

  background: var(--ui-subtle);
  border-left: 1px solid var(--ui-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);

  padding: 1rem;
  box-sizing: border-box;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;

  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-basket.is-open {
  transform: translateX(0);
}

/* Кнопка-триггер уезжает на ширину панели */
.basket-toggle-btn.is-open {
  right: var(--basket-width, 550px);
  border-radius: 0.75rem 0 0 0.75rem;
}

.calculator-basket::-webkit-scrollbar {
  width: 6px;
}
.calculator-basket::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 3px;
}

/* Внутренний контейнер корзины */
.calculator-basket .offer-basket {
  height: 100%;
  max-height: 100%;
}

/* ============================================================
   🔥 ОВЕРЛЕЙ ПОД ПАНЕЛЬЮ
   ============================================================ */
.basket-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.basket-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   EMPTY RESULTS
   ============================================================ */
.empty-results {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  width: 100%;
  background: var(--ui-surface);
  border-radius: 1rem;
  padding: 3rem 2rem;
  border: 1px solid var(--ui-border);
  box-sizing: border-box;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1200px) {
  .calculator-content-page { height: auto; }
  .calculator-basket { --basket-width: 100vw; }
  .mortgage-calculator-page {
    padding: 1.5rem;
    overflow: visible;
    min-height: 100vh;
  }

  .calculator {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    height: auto;
    max-height: none;
    min-height: auto;
  }

  .calculator-form-wrapper {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .calculator-results {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    gap: 1rem;
  }

  .empty-results {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mortgage-calculator-page {
    padding: 1rem;
  }

  .calculator {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .results-white-card {
    padding: 0.75rem 1rem;
  }

  /* 🔥 На мобилках корзина на всю ширину */
  .calculator-basket {
    --basket-width: 100vw;
    width: 100vw;
    padding: 1rem;
  }

  .basket-toggle-btn.is-open {
    right: 100vw;
  }
}

@media (max-width: 600px) {
  .calculator-page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .calculator-page-heading h1 { font-size: 28px; }
}

@media (max-width: 480px) {
  .mortgage-calculator-page {
    padding: 0.5rem;
  }

  .calculator {
    gap: 0.75rem;
  }

  .results-white-card {
    padding: 0.625rem 0.75rem;
  }
}

/* Floating basket control stays accessible while the right drawer is open. */
.mortgage-calculator-page .basket-toggle-btn.ui-button {
  top: auto;
  right: var(--floating-panel-right);
  bottom: calc(var(--floating-panel-bottom) + var(--floating-tools-height) + var(--floating-panel-gap));
  width: var(--floating-panel-size);
  min-width: var(--floating-panel-size);
  height: var(--floating-panel-size);
  min-height: var(--floating-panel-size);
  padding: 0;
  border-radius: 13px;
  transform: none;
}
.basket-toggle-btn .basket-toggle-icon { font-size: 24px; }
.basket-toggle-btn .basket-toggle-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid #fff;
  background: var(--ui-action-hover);
  color: #fff;
}
.calculator-basket { padding-right: calc(var(--floating-panel-right) + var(--floating-panel-size) + 16px); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 768px) {
  .mortgage-calculator-page .basket-toggle-btn.ui-button {
    right: var(--floating-panel-right);
    bottom: calc(var(--floating-panel-bottom) + var(--floating-tools-height) + var(--floating-panel-gap));
  }
}
/* FormSection.css */
.form-section {
  --price-input-height: 44px;
  background: var(--ui-surface);
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.form-block {
  display: flex;
  flex-direction: column;
}

.form-block h2 {
  color: var(--ui-ink);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ui-accent);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.field {
  display: flex;
  flex-direction: column;
}

.form-section .field[data-guide-highlight] {
  border-radius: 10px;
  outline: 2px solid var(--ui-accent);
  outline-offset: 6px;
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 7px var(--ui-accent-soft), 0 0 0 11px #8b5cf61a;
}
.form-section .field[data-guide-highlight] > label,
.form-section .field[data-guide-highlight] > .field-label-row > label {
  color: var(--ui-accent-text);
  font-weight: 600;
}
body .form-section [data-guide-control] {
  border-color: var(--ui-accent);
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
  background-color: var(--ui-surface);
  box-shadow: 0 0 0 4px #8b5cf626;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--ui-secondary);
}

.field select,
.field input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.field select:focus,
.field input[type="number"]:focus {
  border-color: var(--ui-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.field input[type="range"] {
  width: 100%;
  cursor: pointer;
}

.range-value {
  font-weight: 600;
  color: var(--ui-accent);
}

/* Блок с чекбоксами */
.form-block-checkboxes .form-fields {
  gap: 0.75rem;
}

.down-payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--ui-accent);
  flex-shrink: 0;
}

.checkbox-field label {
  font-size: 0.875rem;
  color: var(--ui-ink);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

.checkbox-field label:hover {
  color: var(--ui-ink);
}

.field input[type="number"]::placeholder {
  color: var(--ui-muted);
  font-size: 0.75rem;
}

/* Адаптив */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .form-section {
    padding: 1rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .form-block h2 {
    font-size: 1rem;
  }

  .checkbox-field {
    padding: 0.15rem 0;
  }

  .checkbox-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }

  .checkbox-field label {
    font-size: 0.8125rem;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
}

.calculate-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.calculate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.calculate-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.calculate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   🔥 КНОПКА СБРОСА
   ============================================================ */

.reset-btn {
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--ui-secondary);
  border: 1px solid var(--ui-border-strong);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  white-space: nowrap;
}

.reset-btn:hover:not(:disabled) {
  background: var(--ui-subtle);
  border-color: var(--ui-muted);
  color: var(--ui-ink);
}

.reset-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .form-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .reset-btn {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1.5rem;
  }

  .calculate-btn {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1.5rem;
  }
}

/* ============================================================
   🔥 СТИЛИ ДЛЯ READ-ONLY ПОЛЕЙ
   ============================================================ */

.field-readonly .readonly-value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--ui-canvas);
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  color: var(--ui-ink);
  font-weight: 500;
  min-height: 40px;
}

.readonly-badge {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ui-secondary);
  background-color: var(--ui-border);
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem;
  margin-left: auto;
}

.field-hint {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .field-readonly .readonly-value {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .readonly-badge {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

.form-section .form-block-checkboxes {
  container-type: inline-size;
}

.form-section .form-block-checkboxes .checkbox-field label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  flex: 1;
  min-width: 0;
  min-height: 28px;
  margin: 0;
}

.form-section .checkbox-field .option-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  box-sizing: border-box;
  min-width: 10rem;
  padding: 2px 7px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-canvas);
  color: var(--ui-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.form-section .checkbox-field input:checked + label .option-amount {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-hover-soft);
  color: var(--ui-accent-text);
}

.form-section .checkbox-field .deposit-none {
  color: var(--ui-muted);
}

@container (max-width: 360px) {
  .form-section .form-block-checkboxes .checkbox-field {
    align-items: flex-start;
  }

  .form-section .form-block-checkboxes .checkbox-field input[type="checkbox"] {
    margin-top: 2px;
  }

  .form-section .form-block-checkboxes .checkbox-field label {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-section .checkbox-field .option-amount {
    justify-self: start;
  }
}

/* ============================================================
   🔥 ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА ВВОДА СТОИМОСТИ (3 режима)
   ============================================================ */

.cost-input-mode-switcher {
  display: flex;
  gap: 0;
  background: var(--ui-subtle);
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.cost-mode-btn {
  flex: 1;
  padding: 0.5rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--ui-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  font-family: inherit;
}

.cost-mode-btn:hover:not(.active) {
  background: var(--ui-surface-translucent);
  color: var(--ui-ink);
}

.cost-mode-btn.active {
  background: var(--ui-surface);
  color: var(--ui-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cost-mode-btn:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

@media (max-width: 768px) {
  .cost-mode-btn {
    font-size: 0.7rem;
    padding: 0.4rem 0.3rem;
  }
}

@media (max-width: 480px) {
  .cost-input-mode-switcher {
    padding: 0.2rem;
  }

  .cost-mode-btn {
    font-size: 0.65rem;
    padding: 0.35rem 0.25rem;
  }
}

/* 🔥 Заблокированный переключатель цены */
.cost-input-mode-switcher.disabled,
body .form-section .area-input-row .min-lot-button.ui-button:disabled {
  opacity: 0.5;
}

.cost-input-mode-switcher.disabled {
  pointer-events: none;
}

.cost-mode-btn:disabled {
  cursor: not-allowed;
}

/* ============================================================
   🔥 ЭКВИВАЛЕНТ ПВ (подсказка под полем)
   ============================================================ */

.field-equivalent {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--ui-muted);
  font-weight: 500;
}

/* 🔥 Пометка «не применимо» на кнопке переключателя ПВ */
.cost-mode-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ui-danger-text);
  line-height: 1;
  margin-top: 2px;
}

.cost-mode-btn.active .cost-mode-note {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   🔥 СКРЫТИЕ СТРЕЛОК У NUMBER-ИНПУТОВ
   ============================================================ */

/* Chrome, Safari, Edge, Opera */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ============================================================
   🔥 ПОДСКАЗКИ ЦЕНЫ
   ============================================================ */

/* Подсказка справа под переключателем (режим «Прайсовая») */
.price-hint-right {
  align-self: flex-end;
  margin-top: 0.75rem;
  min-height: 1.4em;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ui-accent);
  text-align: right;
  line-height: 1.4;
}

/* Строка с label + подсказкой справа */
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.field-label-row label {
  margin-bottom: 0;
}

.form-section .area-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.form-section .area-input-row > input[type="number"] {
  min-width: 0;
  height: 44px;
  border-radius: 12px;
}

body .form-section .area-input-row .min-lot-button.ui-button {
  --button-bg: var(--ui-surface);
  --button-color: var(--ui-accent-text);
  min-height: 44px;
  height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Подсказка справа от поля */
.field-hint-right {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ui-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .field-hint-right {
    font-size: 0.7rem;
  }
}

/* ============================================================
   🔥 ПОДПОЛЕ РЕЖИМА ЦЕНЫ (внутри .field с переключателем)
   ============================================================ */

.price-mode-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.form-section .price-mode-field > :is(label, .price-adjustment-label) {
  margin: 0;
  min-height: 20px;
  color: var(--ui-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 20px;
}
.price-adjustment-control { position: relative; flex: 1; min-width: 0; }
body .form-section .price-adjustment-sign.ui-button {
  --button-border: transparent;
  --button-hover-border: transparent;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--price-input-height);
  height: var(--price-input-height);
  min-height: var(--price-input-height);
  padding: 0;
  border-radius: 12px 0 0 12px;
  font-size: 20px;
}
body .form-section .price-adjustment-sign.ui-button + .price-adjustment-sign.ui-button {
  left: var(--price-input-height);
  border-radius: 0;
  border-right: 1px solid var(--ui-border);
}
.form-section .price-adjustment-control input[type="number"] {
  min-width: 0;
  width: 100%;
  height: var(--price-input-height);
  padding: 0.5rem 0.75rem 0.5rem calc(var(--price-input-height) * 2 + 10px);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.price-adjustment-error { color: var(--ui-danger-text); font-size: 0.75rem; line-height: 1.5; }

/* Инпуты внутри подполя — те же стили, что и у .field input */
.price-subfield input[type="number"] {
  height: var(--price-input-height);
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.price-subfield input[type="number"]:focus {
  border-color: var(--ui-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.price-subfield input[type="number"]::placeholder {
  color: var(--ui-muted);
  font-size: 0.75rem;
}

/* Firefox — скрыть стрелки */
.price-subfield input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Chrome/Safari/Edge — скрыть стрелки */
.price-subfield input[type="number"]::-webkit-outer-spin-button,
.price-subfield input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* ============================================================
   🔥 СООБЩЕНИЕ «ИПОТЕКА НЕ ТРЕБУЕТСЯ» — как предупреждение
   ============================================================ */

.full-payment-message {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--ui-warning-soft);
  border: 1px solid #f59e0b;
  border-left: 3px solid #f59e0b;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ui-warning-text);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.date-picker { position: relative; min-width: 0; width: 100%; }
body .date-picker .date-picker-input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding-right: 58px; color-scheme: inherit; }
.date-picker-input::-webkit-calendar-picker-indicator { display: none; }
body .date-picker .date-picker-trigger { position: absolute; right: 4px; top: 0; bottom: 0; margin-block: auto; color: var(--ui-accent-text); }
body .date-picker-dialog { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(340px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-hover); font-family: inherit; }
.date-picker-dialog::backdrop { background: #11182766; backdrop-filter: blur(3px); }
.date-picker-panel { padding: 16px; }
.date-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.date-picker-heading h2 { margin: 0; align-self: center; color: var(--ui-ink); font-size: 16px; line-height: 1.4; font-weight: 600; }
.date-picker-heading > button { flex-shrink: 0; }
.date-picker-navigation { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.date-picker-period { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; flex: 1; min-width: 0; }
body .date-picker-dialog .date-picker-period select { width: 100%; min-width: 0; padding-inline: 10px; font-size: 14px; }
body .date-picker-dialog .date-picker-navigation > button { min-width: 36px; padding-inline: 8px; font-size: 28px; }
.date-picker-grid { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 2px; margin: 0; }
.date-picker-grid th { padding: 4px 0 10px; border: 0; background: transparent; color: var(--ui-muted); text-align: center; font-size: 12px; font-weight: 500; }
.date-picker-grid td { padding: 0; border: 0; background: transparent; text-align: center; }
.date-picker-grid button { box-sizing: border-box; display: block; width: 100%; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ui-ink); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer; font-variant-numeric: tabular-nums; }
.date-picker-grid button[data-outside="true"] { color: var(--ui-muted); }
.date-picker-grid button:hover:not(:disabled) { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.date-picker-grid button[aria-current="date"] { border-color: var(--ui-accent-border); color: var(--ui-accent-text); }
.date-picker-grid button[data-selected="true"] { border-color: var(--ui-action); background: var(--ui-action); color: #fff; }
.date-picker-grid button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.date-picker-grid button:disabled { opacity: .35; cursor: not-allowed; }
.date-picker-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ui-line); }
.date-picker-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 440px) {
  .date-picker-panel { padding: 16px; }
  .date-picker-heading { margin-bottom: 12px; }
  .date-picker-grid { border-spacing: 2px; }
  .date-picker-grid button { min-height: 36px; }
}

body .date-picker-grid tbody tr:hover { background: transparent; }
.custom-tranche-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) var(--price-input-height); align-items: end; column-gap: 1rem; row-gap: 0.25rem; }
.custom-tranche-field { min-width: 0; gap: 0.25rem; margin: 0; color: var(--ui-secondary); font-size: 0.875rem; font-weight: 500; }
.tranche-editor-dialog .custom-tranche-field > label { margin: 0; }
.tranche-editor-dialog .custom-tranche-field input { box-sizing: border-box; width: 100%; min-width: 0; height: var(--price-input-height); padding: 0.5rem; border: 1px solid var(--ui-border); border-radius: 12px; color: var(--ui-ink); background: var(--ui-surface); font: inherit; font-size: 0.875rem; font-weight: 400; }
.tranche-editor-dialog .custom-tranche-field .date-picker-input { padding-right: 58px; }
.tranche-editor-dialog .custom-tranche-field input[aria-invalid="true"] { border-color: var(--ui-danger-text); outline-color: var(--ui-danger-text); }
.tranche-editor-dialog .custom-tranche-field input[readonly] { background: var(--ui-canvas); color: var(--ui-secondary); }
.custom-tranche-note, .custom-tranche-error { margin: 0; color: var(--ui-secondary); font-size: 0.75rem; line-height: 1.5; }
.custom-tranche-note p { margin: 0; }
.custom-tranche-totals { display: flex; flex-direction: column; gap: 8px; }
.custom-tranche-error { color: var(--ui-danger-text); }
.custom-tranche-limit { grid-column: 1 / -1; color: var(--ui-secondary); font-size: 0.75rem; line-height: 1.5; }
.custom-tranche-limit.custom-tranche-error { color: var(--ui-danger-text); }
.custom-tranche-limit-value { padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ui-accent-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.custom-tranche-limit-value:hover:not(:disabled) { color: var(--ui-action); }
.custom-tranche-limit-value:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.custom-tranche-limit-value:disabled { opacity: 0.5; cursor: not-allowed; }
.add-tranche { align-self: flex-start; }
body .custom-tranche-row .remove-tranche.ui-button { width: var(--price-input-height); height: var(--price-input-height); min-height: var(--price-input-height); padding: 0; border-radius: 12px; font-size: 24px; }
.edit-tranches { align-self: flex-start; }
.tranche-form-summary { display: flex; flex-direction: column; }
.tranche-form-stage { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--ui-line); font-size: 0.875rem; }
.tranche-form-stage:last-child { border-bottom: 0; }
.tranche-form-stage-label { flex-shrink: 0; color: var(--ui-secondary); }
.tranche-form-stage-amount { min-width: 0; color: var(--ui-ink); text-align: right; font-variant-numeric: tabular-nums; }
.tranche-form-stage-amount strong { font-weight: 500; }
.tranche-form-stage small { display: block; margin-top: 4px; color: var(--ui-secondary); font-size: 0.75rem; }
.tranche-editor-dialog { --price-input-height: 44px; position: fixed; inset: 0; box-sizing: border-box; width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-hover); font-family: inherit; }
.tranche-editor-dialog::backdrop { background: #11182766; backdrop-filter: blur(3px); }
.tranche-editor-dialog > form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.tranche-editor-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ui-line); }
.tranche-editor-header h2 { margin: 0; color: var(--ui-ink); font-size: 1.25rem; line-height: 1.5; }
.tranche-editor-body { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.tranche-editor-actions { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--ui-line); background: var(--ui-canvas); }
.tranche-editor-dialog .custom-tranche-field,
.tranche-editor-dialog .custom-tranche-field input,
.tranche-editor-dialog .cost-mode-btn,
.tranche-editor-dialog .ui-button { font-size: 1rem; }
.tranche-editor-dialog .custom-tranche-field > label { font-size: inherit; }
.tranche-editor-dialog .custom-tranche-note,
.tranche-editor-dialog .custom-tranche-error,
.tranche-editor-dialog .custom-tranche-limit { font-size: 0.875rem; }
@media (max-width: 480px) {
  .custom-tranche-row { column-gap: 0.5rem; }
  .tranche-editor-header, .tranche-editor-actions { padding: 12px 16px; }
  .tranche-editor-body { padding: 16px; }
}
.calculator-selection-panel { padding: 24px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: 0 1px 3px #00000014; }
.selection-panel-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.selection-panel-navigation { display: flex; align-items: center; height: 44px; }
body .selection-panel-header .ui-button.ui-button { justify-content: center; gap: 8px; width: 100%; height: 44px; min-height: 44px; padding: 0; border: 0; font-size: 13px; line-height: 20px; text-align: center; }
.selection-panel-navigation svg { width: 18px; height: 18px; flex-shrink: 0; }
.selection-panel-label { margin: 0; color: var(--ui-secondary); font-size: 13px; font-weight: 500; line-height: 20px; }
.selection-panel-title { height: 28px; margin: 0; overflow: hidden; color: var(--ui-ink); font-size: 20px; font-weight: 600; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; }
.selection-panel-title-row { display: flex; align-items: center; gap: 12px; }
.selection-panel-title-row .selection-panel-title { flex: 1; min-width: 0; }
body .selection-panel-header .selection-panel-search-toggle.ui-button.ui-button { flex-shrink: 0; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; }
.selection-panel-search-toggle svg { width: 18px; height: 18px; }
.calculator-selection-search { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; color: var(--ui-secondary); font-size: 13px; }
.calculator-selection-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; }
@media (max-width: 768px) { .calculator-selection-panel { padding: 16px; } }
.calculator-guide { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; min-height: 440px; padding: 28px clamp(24px, 4vw, 52px) 32px; border: 1px solid var(--ui-border); border-radius: 24px; background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-ink); text-align: center; }
.calculator-results > .calculator-guide { flex: 1 0 auto; }
.calculator-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 24px; }
.calculator-guide-eyebrow { color: var(--ui-secondary); font-size: 13px; font-weight: 500; }
.calculator-guide-counter { font-size: 13px; font-weight: 600; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.calculator-guide-counter > span { color: var(--ui-muted); font-weight: 400; }
.calculator-guide-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
.calculator-guide-stages li { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-bottom: 13px; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
.calculator-guide-stages li::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 4px; background: var(--ui-line); }
.calculator-guide-stages li[data-state="current"] { color: var(--ui-accent); font-weight: 600; }
.calculator-guide-stages li[data-state="current"]::after { background: var(--ui-action); }
.calculator-guide-stages li[data-state="complete"]::after { background: var(--ui-accent-border); }
.calculator-guide-step-number { display: inline-flex; align-items: center; flex: none; opacity: .7; font-size: 11px; }
.calculator-guide-step-number svg { width: 13px; height: 13px; color: var(--ui-accent); }
.calculator-guide-mark { display: grid; place-items: center; flex: none; width: 72px; height: 72px; margin: 48px 0 30px; border: 1px solid var(--ui-accent-border); border-radius: 24px; background: var(--ui-accent-soft); box-shadow: 0 0 0 10px var(--ui-canvas), 0 0 0 20px var(--ui-surface); color: var(--ui-accent); }
.calculator-guide-mark svg { width: 34px; height: 34px; }
.calculator-guide-next { width: 100%; max-width: 490px; }
.calculator-guide-step-label { display: block; margin-bottom: 10px; color: var(--ui-muted); font-size: 11px; font-weight: 500; }
.calculator-guide-next h2 { margin: 0; font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.3; letter-spacing: -.65px; text-wrap: balance; }
.calculator-guide-next p { margin: 14px 0 24px; color: var(--ui-secondary); font-size: 14px; line-height: 1.75; }
body .calculator-guide-action.ui-button { padding: 12px 20px; }
.calculator-guide-footnote { max-width: 390px; margin: 24px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 640px) {
  .calculator-guide { min-height: 0; padding: 22px 20px 28px; border-radius: 20px; }
  .calculator-guide-heading { margin-bottom: 20px; }
  .calculator-guide-eyebrow { font-size: 12px; }
  .calculator-guide-stages { gap: 8px; }
  .calculator-guide-stages li { gap: 4px; font-size: 10px; padding-bottom: 10px; }
  .calculator-guide-step-number { font-size: 10px; }
  .calculator-guide-mark { width: 64px; height: 64px; margin: 40px 0 28px; border-radius: 21px; }
  body .calculator-guide-action.ui-button { width: 100%; }
}
.banks-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 18px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.banks-header-wrapper .banks-header {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ui-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.3px;
}
.banks-offer-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 10px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 500; line-height: 1.5; }
@media (max-width: 768px) {
  .banks-header-wrapper { padding: 18px; border-radius: 20px; }
}
.banks-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banks-filters .bank-filter-select { min-width: 180px; max-width: 100%; }
.toggle-overstatement { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-subtle); color: var(--ui-secondary); font-size: 13px; line-height: 1.5; cursor: pointer; }
.toggle-overstatement input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ui-accent); cursor: pointer; }
.toggle-overstatement span { user-select: none; }
@media (max-width: 768px) {
  .banks-filters { width: 100%; }
  .banks-filters .bank-filter-select { flex: 1; min-width: 0; }
  .banks-filters .toggle-overstatement { width: 100%; }
}
.no-results { padding: 32px 24px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--ui-ink); text-align: center; }
.no-results-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.no-results-mark svg { width: 24px; height: 24px; }
.no-results h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.no-results p { max-width: 440px; margin: 10px auto 20px; color: var(--ui-secondary); font-size: 14px; line-height: 1.7; }
.copy-button-label { display: grid; min-width: 0; }
.copy-button-state { grid-area: 1 / 1; }
.copy-button-state.is-hidden { visibility: hidden; }
.selection-count { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--ui-accent-border); border-radius: 13px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 14px; font-weight: 500; white-space: nowrap; }
.selection-count-value { min-width: 2ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.max-share-button img { display: block; flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; }
.max-share-button:disabled img { opacity: .45; }
.floating-selection-bar {
  position: fixed;
  bottom: var(--floating-panel-bottom, 24px);
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 2 * (var(--floating-panel-right, 24px) + var(--floating-panel-size, 56px) + var(--floating-panel-gap, 12px)));
  box-sizing: border-box;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-hover);
  animation: selectionBarSlideIn .2s ease-out;
}
.floating-bar-content, .floating-bar-selection, .floating-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.floating-bar-content { justify-content: space-between; gap: 16px 24px; }
.floating-bar-selection { padding-right: 24px; border-right: 1px solid var(--ui-line); }
.floating-bar-actions { justify-content: flex-end; }
@keyframes selectionBarSlideIn {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 1024px) {
  .floating-bar-selection { padding-right: 0; border-right: 0; }
  .floating-bar-content, .floating-bar-selection, .floating-bar-actions { gap: 8px; }
}
@media (max-width: 640px) {
  .floating-selection-bar {
    max-width: calc(100vw - 2 * var(--floating-panel-right, 16px));
    bottom: calc(var(--floating-panel-bottom, 16px) + var(--floating-tools-height, 112px) + var(--floating-panel-size, 56px) + 2 * var(--floating-panel-gap, 12px));
    padding: 12px;
    border-radius: 16px;
  }
  .floating-bar-selection, .floating-bar-actions { width: 100%; }
  .floating-bar-selection { justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--ui-line); }
  .floating-bar-actions > .ui-button { flex: 1 1 auto; }
}
/* src/components/BankCategory/BankCategory.css */
.category-group {
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--ui-canvas);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--ui-subtle);
  border-bottom: 1px solid var(--ui-border);
}

.category-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-ink);
  margin: 0;
}

.banks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: var(--ui-surface);
}

@media (max-width: 768px) {
  .banks-list {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .category-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
/* frontend/src/components/admin/Tabs.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   🔥 КОНТЕЙНЕР ВКЛАДОК
   ============================================================ */

.tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  border-bottom: 2px solid var(--gray-100);
}

/* ============================================================
   🔥 ЭЛЕМЕНТ ВКЛАДКИ
   ============================================================ */

.tabs-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  background: transparent;
  color: var(--gray-500);
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
}

.tabs-item:hover:not(.disabled) {
  background: var(--gray-100);
  color: var(--gray-800);
}

.tabs-item.active {
  background: var(--bg-white);
  color: var(--gray-900);
  border-bottom: 3px solid var(--primary);
}

.tabs-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tabs-item.disabled:hover {
  background: transparent;
  color: var(--gray-500);
}

/* ============================================================
   🔥 ИКОНКА
   ============================================================ */

.tabs-icon {
  font-size: 1rem;
}

/* ============================================================
   🔥 НАЗВАНИЕ
   ============================================================ */

.tabs-label {
  font-weight: 600;
}

/* ============================================================
   🔥 СЧЕТЧИК
   ============================================================ */

.tabs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  background: var(--gray-100);
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-500);
}

.tabs-item.active .tabs-count {
  background: var(--primary);
  color: white;
}

/* ============================================================
   🔥 СТАТУС
   ============================================================ */

.tabs-status {
  font-size: 0.7rem;
  margin-left: 2px;
}

.tabs-status.active {
  color: var(--success);
}

.tabs-status.inactive {
  color: var(--danger);
}

/* ============================================================
   🔥 РАЗДЕЛИТЕЛЬ
   ============================================================ */

.tabs-divider {
  width: 2px;
  background: var(--gray-200);
  margin: 4px 0;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   🔥 ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */

.tabs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 2px dashed var(--gray-300);
  margin: 16px 0;
  width: 100%;
}

.tabs-empty-message {
  font-size: 18px;
  font-weight: 500;
  color: var(--gray-500);
}

.tabs-empty-hint {
  font-size: 14px;
  color: var(--gray-400);
  margin-top: 8px;
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .tabs {
    gap: 0.25rem;
  }

  .tabs-item {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }

  .tabs-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .tabs-count {
    display: none;
  }
}
.tabs.entity-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--ui-line);
  overflow-x: auto;
}
.tabs.entity-tabs .ui-button.tabs-item {
  white-space: nowrap;
  border-radius: 12px;
  flex-shrink: 0;
}
.tabs.entity-tabs .ui-button.tabs-item.active { border-bottom-width: 1px; }
body .dynamic-condition-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 7px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font: 600 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
body .dynamic-condition-badge:hover, body .dynamic-condition-badge[aria-expanded="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); }
.dynamic-condition-badge svg { width: 12px; height: 12px; }
.offer-rate-with-badge, .offer-subsidy-with-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.offer-rate-with-badge > .bank-rate { margin: 0; }
.dynamic-conditions-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: 0 24px 80px #26324a30;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
.dynamic-conditions-dialog::backdrop { background: rgb(24 32 51 / 40%); backdrop-filter: blur(5px); }
.dynamic-conditions-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid var(--ui-line); }
.dynamic-conditions-header h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.5px; }
.dynamic-conditions-context { margin: 8px 0 0; color: var(--ui-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.dynamic-conditions-body { padding: 24px; }
.dynamic-conditions-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px; border: 1px solid var(--ui-accent-hover-soft); border-radius: 14px; background: var(--ui-accent-soft); }
.dynamic-conditions-summary > span { color: var(--ui-secondary); font-size: 13px; }
.dynamic-conditions-summary strong { color: var(--ui-accent-text); font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.dynamic-conditions-description { margin: 16px 0 20px; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
.dynamic-conditions-table-scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 12px; }
.dynamic-conditions-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.dynamic-conditions-table th { padding: 12px 16px; background: var(--ui-canvas); color: var(--ui-secondary); font-size: 14px; font-weight: 600; }
.dynamic-conditions-table td { padding: 14px 16px; border-top: 1px solid var(--ui-line); line-height: 1.6; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.dynamic-conditions-table td:first-child { width: 100px; white-space: nowrap; }
.dynamic-condition-value { color: var(--ui-ink); font-weight: 600; }
.dynamic-conditions-table tbody tr:hover { background: var(--ui-canvas); }
.dynamic-conditions-empty { margin: 0; padding: 20px; color: var(--ui-muted); text-align: center; font-size: 13px; }
.dynamic-conditions-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--ui-line); background: var(--ui-canvas); }
.dynamic-conditions-preview {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px));
  max-height: min(280px, calc(100dvh - 24px));
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: 0 12px 36px #26324a26;
  scrollbar-width: thin;
}
.dynamic-conditions-preview .dynamic-conditions-table-scroll { overflow: visible; border: 0; }
.dynamic-conditions-preview .dynamic-conditions-table th { padding: 9px 10px; font-size: 13px; }
.dynamic-conditions-preview .dynamic-conditions-table td { padding: 9px 10px; font-size: 12px; }
.dynamic-conditions-preview .dynamic-conditions-table td:first-child { width: 70px; }
@media (max-width: 480px) {
  .dynamic-conditions-dialog { border-radius: 20px; }
  .dynamic-conditions-header, .dynamic-conditions-body { padding: 20px; }
  .dynamic-conditions-header h2 { font-size: 20px; }
  .dynamic-conditions-table th, .dynamic-conditions-table td { padding: 12px; }
  .dynamic-conditions-footer { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { body .dynamic-condition-badge { transition: none; } }
.payment-schedule { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.payment-schedule-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
.payment-schedule-summary > div { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-canvas); }
.payment-schedule-summary span { color: var(--ui-secondary); font-size: 12px; }
.payment-schedule-summary strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.payment-schedule-summary small { color: var(--ui-success-text); font-size: 16px; font-weight: 600; line-height: 1.5; }
.payment-schedule-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 16px; }
.payment-schedule-empty { color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
.payment-schedule-table-wrap { border-top: 1px solid var(--ui-line); }
.payment-schedule-table { width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
.payment-schedule-table:focus { outline: none; }
.payment-schedule-col-month { width: 56px; }
.payment-schedule-col-extra { width: 220px; }
.payment-schedule-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.payment-schedule-table th, .payment-schedule-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--ui-line); }
.payment-schedule-table th:first-child { padding-inline: 6px; text-align: left; }
.payment-schedule-table thead th { background: var(--ui-canvas); color: var(--ui-secondary); font-weight: 500; }
.payment-schedule-table tbody th { font-weight: 400; }
.payment-schedule-table .payment-schedule-extra-heading { white-space: normal; }
.payment-schedule-extra-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 36px; outline: none; }
.payment-schedule-extra-cell:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 6px; }
.payment-schedule .payment-schedule-add, .payment-schedule .payment-schedule-remove { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ui-accent); font-size: 21px; line-height: 1; opacity: 0; }
.payment-schedule .payment-schedule-add { display: grid; margin-inline: auto; }
.payment-schedule-table tbody tr:hover .payment-schedule-add, .payment-schedule-table tbody tr:focus-within .payment-schedule-add,
.payment-schedule-extra-cell:hover .payment-schedule-remove, .payment-schedule-extra-cell:focus-within .payment-schedule-remove { opacity: 1; }
.payment-schedule .payment-schedule-add:hover, .payment-schedule .payment-schedule-remove:hover { background: var(--ui-accent-soft); }
.payment-schedule-saved-amount { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.payment-schedule .payment-schedule-amount { padding: 6px 0; border: 0; background: transparent; font-size: inherit; text-align: right; }
.payment-schedule .payment-schedule-amount:hover { color: var(--ui-accent-text); }
.payment-schedule-no-debt { display: inline-block; padding: 7px 0; color: var(--ui-muted); }
.payment-schedule-editor { margin: 0; }
.payment-schedule-editor-controls { display: flex; align-items: center; gap: 4px; }
.payment-schedule-editor input { box-sizing: border-box; flex: 1; width: 0; min-width: 0; height: 34px; padding: 6px 8px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; text-align: right; }
.payment-schedule-editor input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.payment-schedule-editor input[aria-invalid="true"] { border-color: var(--ui-danger-text); }
.payment-schedule-editor input[aria-invalid="true"]:focus-visible { outline-color: var(--ui-danger-text); }
.payment-schedule .payment-schedule-amount[aria-invalid="true"] { color: var(--ui-danger-text); }
.payment-schedule .payment-schedule-editor button { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 32px; padding: 0; font-size: 16px; }
.payment-schedule .payment-schedule-editor button:disabled { opacity: 0.45; cursor: not-allowed; }
.payment-schedule-extra-cell small { display: block; margin-top: 4px; color: var(--ui-secondary); font-size: 10px; white-space: normal; }
.payment-schedule-extra-cell .payment-schedule-input-error { color: var(--ui-danger-text); text-align: left; }
@media (hover: none), (pointer: coarse) {
  .payment-schedule .payment-schedule-add, .payment-schedule .payment-schedule-remove { opacity: 1; }
}
.payment-schedule .payment-schedule-extra-cell[data-just-saved] .payment-schedule-add,
.payment-schedule .payment-schedule-extra-cell[data-just-saved] .payment-schedule-remove { opacity: 0; pointer-events: none; }
.payment-schedule-table tfoot th, .payment-schedule-table tfoot td { border-bottom: 0; font-weight: 600; background: var(--ui-canvas); }
.payment-schedule-issue { background: var(--ui-accent-soft); }
.payment-schedule-table .payment-schedule-issue td { text-align: left; white-space: normal; }
@media (max-width: 900px) {
  .payment-schedule-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .payment-schedule-summary { grid-template-columns: 1fr; gap: 8px; }
  .payment-schedule-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
  .payment-schedule-summary strong { font-size: 14px; text-align: right; }
  .payment-schedule-summary small { grid-column: 2; text-align: right; }
}
.offer-bank-modal { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(1280px, calc(100vw - 32px)); height: 85dvh; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 24px 80px #0004; }
.offer-bank-modal::backdrop { background: #0f172a99; }
.offer-bank-modal[open] { display: flex; flex-direction: column; overflow: hidden; }
.offer-bank-modal > header, .offer-bank-modal > footer, .offer-bank-modal-tabs { flex-shrink: 0; }
.offer-bank-modal header, .offer-bank-modal footer { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--ui-canvas); }
.offer-bank-modal h2 { margin: 0; font-size: 22px; }
.offer-bank-modal button { border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); padding: 8px 16px; cursor: pointer; font: inherit; color: inherit; }
.offer-bank-modal header button { font-size: 24px; padding: 0 10px; }
.offer-bank-modal footer { justify-content: flex-end; }
.offer-bank-modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 8px 24px 24px; }
.offer-bank-modal-program { margin: 6px 0 0; color: var(--ui-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.offer-bank-modal-tabs { padding: 8px 24px 0; }
.offer-bank-modal-tabs .entity-tabs { margin-bottom: 16px; }
.offer-bank-modal-tabs .tabs-item { flex-shrink: 0; }
.offer-bank-conditions { display: grid; gap: 16px; font-size: 14px; line-height: 1.6; }
.offer-bank-condition-section { min-width: 0; padding: 18px 20px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-canvas); }
.offer-bank-condition-section h3 { margin: 0 0 12px; color: var(--ui-ink); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.3px; }
.offer-bank-conditions dl { margin: 0; }
.offer-bank-conditions dl > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); align-items: baseline; gap: 12px 24px; padding: 10px 0; }
.offer-bank-conditions dl > div + div { border-top: 1px solid var(--ui-line); }
.offer-bank-conditions dl > div:last-child { padding-bottom: 0; }
.offer-bank-conditions dt { min-width: 0; color: var(--ui-secondary); font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.offer-bank-conditions dd { min-width: 0; margin: 0; color: var(--ui-ink); font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.offer-bank-conditions a { color: var(--ui-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.offer-bank-conditions a:hover { color: var(--ui-accent-hover); }
.offer-bank-programs { display: grid; gap: 12px; }
.offer-bank-program { min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.offer-bank-program h4 { margin: 0 0 8px; color: var(--ui-ink); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.offer-bank-conditions-empty { margin: 0; padding: 24px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-canvas); color: var(--ui-secondary); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
  .offer-bank-condition-section { padding: 16px; }
  .offer-bank-conditions dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .offer-bank-program { padding: 12px; }
}
/* src/components/BankCard/BankCard.css */

/* ============================================================
   БАЗОВАЯ КАРТОЧКА
   ============================================================ */
.bank-card {
  position: relative;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  background: var(--ui-surface);
  transition:
    box-shadow 0.2s,
    border-color 0.2s; /* 🔥 Убрали transition для transform */
}

/* 🔥 Убрали transform: translateY(-2px); — карточка больше не прыгает */
.bank-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bank-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, var(--ui-info-soft) 0%, var(--ui-info-soft) 100%);
  border-width: 2px;
}

/* ============================================================
   ВЕРХНЯЯ СТРОКА: ШАПКА + КНОПКА КОРЗИНЫ
   ============================================================ */
.bank-card-top-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bank-card-top-row .bank-card-header {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

/* ============================================================
   ВЕРХНЯЯ ЧАСТЬ КАРТОЧКИ (внутри шапки)
   ============================================================ */
.bank-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bank-info {
  flex: 1;
}

.bank-program {
  font-size: 0.75rem;
  color: var(--ui-secondary);
  margin-bottom: 0.25rem;
}

.bank-rate {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ui-info-text);
  margin-top: 0.25rem;
}

.payment-info {
  text-align: right;
  min-width: 120px;
}

.payment-label {
  font-size: 0.7rem;
  color: var(--ui-secondary);
  margin-bottom: 0.25rem;
}

.payment-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ui-success-text);
  margin: 0;
}

.payment-value.payment-unavailable {
  color: var(--ui-border-strong);
  font-weight: 500;
}

.bank-rates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.bank-rates .bank-rate {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ui-info-text);
}

.bank-rates-two-contracts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.payment-values-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.payment-values-wrapper .payment-value {
  font-size: 1rem;
}

.payment-values-wrapper .payment-with-subsidy {
  color: var(--ui-success-text);
  font-weight: 600;
}

.payment-values-wrapper .payment-after-subsidy {
  color: var(--ui-warning-text);
  font-weight: 700;
  font-size: 1.125rem;
}

/* ============================================================
   КНОПКА «В КОРЗИНУ» (Квадрат со скруглением)
   ============================================================ */
.add-to-basket-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 0.6rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-accent);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-family: inherit;
  position: relative;
  z-index: 15;
}

.add-to-basket-btn:hover:not(:disabled) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-border);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);
}

.add-to-basket-btn:active:not(:disabled) {
  transform: scale(0.96); /* Легкое нажатие — ок */
}

.add-to-basket-btn.in-basket {
  background: var(--ui-success-soft);
  border-color: var(--ui-success-border);
  color: var(--ui-success-text);
  cursor: pointer;
}

.add-to-basket-btn.in-basket:hover {
  background: var(--ui-danger-soft);
  border-color: var(--ui-danger-border);
  color: var(--ui-danger-text);
}

.basket-icon-default {
  font-size: 1rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.basket-icon-hover {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.add-to-basket-btn.in-basket:hover .basket-icon-default {
  opacity: 0;
}

.add-to-basket-btn.in-basket:hover .basket-icon-hover {
  opacity: 1;
}

.basket-icon-plus {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.add-to-basket-btn:disabled:not(.in-basket) {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--ui-canvas);
}

/* ============================================================
   СПИСОК ДЕТАЛЕЙ
   ============================================================ */
.bank-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ui-subtle);
  font-size: 0.75rem;
}

.bank-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.bank-detail-label {
  color: var(--ui-secondary);
  font-size: 0.7rem;
  font-weight: 500;
}

.bank-detail-value {
  font-weight: 600;
  color: var(--ui-ink);
  text-align: right;
  word-break: break-word;
}

.bank-detail-value.positive {
  color: var(--ui-success-text);
}

.bank-detail-value.warning {
  color: var(--ui-warning-text);
}

.bank-excess {
  font-size: 0.7rem;
  color: #ef4444;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ui-subtle);
  font-weight: 500;
}

/* ============================================================
   АДАПТИВ ДЛЯ МОБИЛЬНЫХ
   ============================================================ */
@media (max-width: 768px) {
  .bank-card-header {
    flex-direction: column;
  }

  .payment-info {
    text-align: left;
    margin-top: 0.5rem;
    min-width: auto;
    width: 100%;
  }

  .payment-values-wrapper {
    align-items: flex-start;
  }

  .add-to-basket-btn {
    width: 30px;
    height: 30px;
  }
}

/* ============================================================
   ДИНАМИЧЕСКАЯ ИНФОРМАЦИЯ
   ============================================================ */
.bank-card-dynamic-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 10px 0 10px 0;
  flex-wrap: wrap;
  background: var(--ui-canvas);
  border-radius: 6px;
  border: 1px solid var(--ui-border);
  min-height: 28px;
  cursor: default;
  user-select: none;
}

.bank-card-dynamic-info:empty {
  display: none;
}

.bank-card-dynamic-info .dynamic-info-display {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ui-ink);
}

.bank-card-dynamic-info .dynamic-info-icon {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.dynamic-badge-divider {
  color: var(--ui-border-strong);
  font-weight: 300;
  font-size: 0.7rem;
  padding: 0 2px;
}

/* ============================================================
   НЕДОСТУПНО — ВСЯ КАРТОЧКА РОЗОВАЯ
   ============================================================ */
.bank-card.unavailable {
  background: var(--ui-danger-soft);
  border-color: var(--ui-danger-border);
  cursor: not-allowed;
}

.bank-card.unavailable:hover {
  box-shadow: none;
  border-color: var(--ui-danger-border);
}

.bank-card.unavailable.selected {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-soft);
}

.unavailable-issues-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--ui-danger-border);
}

.unavailable-issue {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.25rem;
}

.unavailable-issue + .unavailable-issue {
  border-top: 1px solid var(--ui-danger-border);
}

.unavailable-issue-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.unavailable-issue-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.unavailable-issue-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ui-danger-text);
  line-height: 1.2;
}

.unavailable-issue-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.unavailable-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.unavailable-metric-label {
  color: var(--ui-secondary);
  font-weight: 500;
}

.unavailable-metric-value {
  font-weight: 700;
  color: var(--ui-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.unavailable-metric-value.danger {
  color: var(--ui-danger-text);
}

.unavailable-issue-recommendation {
  margin-top: 0.15rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--ui-danger-border);
  font-size: 0.72rem;
  color: var(--ui-muted);
  font-style: italic;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .unavailable-issue-title {
    font-size: 0.8rem;
  }

  .unavailable-metric-row {
    font-size: 0.72rem;
  }

  .unavailable-issue-recommendation {
    font-size: 0.68rem;
  }

  .unavailable-issue {
    padding: 0.55rem 0.15rem;
  }

  .unavailable-issue-icon {
    font-size: 1rem;
  }
}

/* ============================================================
   КАСТОМНЫЕ БЕЙДЖИ ОФФЕРА (из админки)
   ============================================================ */
.bank-card-custom-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bank-card-custom-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--ui-accent-border);
  white-space: nowrap;
}
/* ============================================================
   🔥 РЕЖИМ КОРЗИНЫ (variant="basket")
   ============================================================ */

/* Карточка в корзине */
.bank-card.basket-item {
  cursor: grab;
}

.bank-card.basket-item:active {
  cursor: grabbing;
}

.bank-card.basket-item.dragging {
  opacity: 0.5;
}

.bank-card.basket-item.drag-over {
  border-color: var(--ui-accent);
  border-style: dashed;
  background: var(--ui-accent-soft);
}

/* Строка контекста сверху */
.basket-item-context-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--ui-border);
}

.basket-context-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  background: var(--ui-canvas);
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid var(--ui-border);
  font-size: 0.72rem;
  color: var(--ui-secondary);
}

/* Кнопка удаления */
.basket-remove-btn {
  color: var(--ui-danger-text) !important;
  border-color: var(--ui-danger-border) !important;
  background: var(--ui-danger-soft) !important;
}

.basket-remove-btn:hover:not(:disabled) {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger-border) !important;
  color: var(--ui-danger-text) !important;
}

@media (max-width: 768px) {
  .basket-item-context-row {
    font-size: 0.68rem;
  }
}
/* ============================================================
   🔥 ОСОБЕННОСТИ РАСЧЁТА + СРОК
   ============================================================ */
.bank-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.25rem;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.feature-special {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
  border-color: var(--ui-accent-border);
}
.feature-deposit {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
  border-color: var(--ui-success-border);
}
.feature-no-inflate {
  background: var(--ui-warning-soft);
  color: var(--ui-warning-text);
  border-color: var(--ui-warning-border);
}

@media (max-width: 768px) {
  .feature-badge {
    font-size: 0.62rem;
    padding: 0.12rem 0.45rem;
  }
}
.bank-card-horizontal .bank-card-top-row { align-items: center; gap: 24px; margin-bottom: 16px; }
.bank-card-horizontal .bank-card-header {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(100px, .7fr) minmax(150px, 1fr) minmax(130px, .9fr) minmax(140px, .9fr);
  align-items: start;
  gap: 20px;
}
.bank-card-horizontal .bank-card-header.with-subsidy {
  grid-template-columns: minmax(170px, 1.4fr) minmax(80px, .7fr) minmax(130px, 1fr) minmax(110px, .9fr) minmax(120px, .9fr) minmax(100px, .85fr);
  gap: 16px;
}
.offer-bank-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.offer-bank-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; background: var(--ui-info-soft); color: var(--ui-info-text); border-radius: 14px; font-size: 24px; font-weight: 700; }
.offer-bank-name { margin: 0 0 5px; font-size: 17px; color: var(--ui-ink); }
.offer-program-name { margin: 0; font-size: 12px; color: var(--ui-secondary); overflow-wrap: anywhere; }
.bank-card-horizontal .bank-program,
.bank-card-horizontal .payment-label { margin: 0 0 8px; font-size: 12px; color: var(--ui-secondary); }
.bank-card-horizontal .payment-info { text-align: left; min-width: 0; }
.bank-card-horizontal .payment-values-wrapper { align-items: flex-start; }
.bank-card-horizontal .bank-rate { margin: 0; font-size: 20px; }
.offer-summary-metric { display: flex; flex-direction: column; gap: 8px; }
.offer-summary-metric > span { color: var(--ui-secondary); font-size: 12px; }
.offer-summary-metric strong { font-size: 17px; color: var(--ui-ink); overflow-wrap: anywhere; }
.offer-summary-metric small { color: var(--ui-secondary); font-size: 12px; }
.bank-card-horizontal .add-to-basket-btn { width: auto; min-width: 140px; height: 48px; padding: 0 18px; background: #00b0ec; color: var(--ui-ink); border-color: #00b0ec; font-size: 14px; }
.bank-card-horizontal .add-to-basket-btn:hover:not(:disabled) { background: #0ea5e9; color: var(--ui-ink); }
.bank-card-horizontal .add-to-basket-btn.in-basket { background: var(--ui-success-soft); border-color: var(--ui-success-border); color: var(--ui-success-text); }
.bank-card-horizontal .bank-details-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding-top: 18px; margin-top: 16px; }
.bank-card-horizontal .bank-detail-item { flex-direction: row; align-items: baseline; gap: 6px; justify-content: flex-start; min-width: 0; padding: 0; }
.bank-card-horizontal .bank-detail-label { font-size: 12px; }
.bank-card-horizontal .bank-detail-value { text-align: left; font-size: 13px; }
@media (max-width: 1200px) {
  .bank-card-horizontal .bank-card-header,
  .bank-card-horizontal .bank-card-header.with-subsidy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-card-horizontal .offer-bank-identity { grid-column: 1 / -1; }
  .bank-card-horizontal .bank-card-top-row { align-items: flex-start; }
  .bank-card-horizontal .bank-details-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .bank-card-horizontal .bank-card-top-row { flex-direction: column; gap: 16px; }
  .bank-card-horizontal .bank-card-header { width: 100%; gap: 18px 12px; }
  .bank-card-horizontal .payment-info { margin: 0; }
  .bank-card-horizontal .add-to-basket-btn { width: 100%; }
  .bank-card-horizontal .bank-details-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horizontal-bank-group .bank-card-horizontal { padding: 18px; }
}

.bank-card-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 200px; width: 200px; }
.bank-card-horizontal .bank-card-actions > button { box-sizing: border-box; width: 100%; min-width: 0; height: 48px; padding: 0 12px; line-height: 1.2; }
.bank-card-horizontal .bank-card-actions > button:active { transform: none; }
.bank-card-actions:empty { display: none; }
.bank-details-button { min-width: 140px; padding: 9px 16px; border: 1px solid var(--ui-info-border); border-radius: 9px; background: var(--ui-info-soft); color: var(--ui-info-text); font: inherit; font-size: 13px; cursor: pointer; }
.bank-details-button:hover { background: var(--ui-info-soft); }
.offer-loan-term { margin: 6px 0 0; font-size: 12px; color: var(--ui-secondary); }
.offer-loan-term strong { color: var(--ui-ink); }
.bank-card-horizontal .bank-details-list { gap: 8px 24px; margin-top: 10px; padding-top: 12px; }
.bank-card-horizontal .bank-detail-label { font-size: 12px; }
.bank-card-horizontal .bank-detail-value { font-size: 12px; }
.bank-card-horizontal .bank-card-top-row { margin-bottom: 10px; gap: 16px; }
.bank-card-horizontal .bank-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bank-card-horizontal .bank-program, .bank-card-horizontal .payment-label { margin-bottom: 4px; }
.bank-card-horizontal .offer-summary-metric { flex-direction: column; align-items: flex-start; gap: 4px; }
.bank-card-horizontal .payment-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 768px) {
  .bank-card-actions { flex-direction: row; flex: 0 0 auto; width: 100%; }
  .bank-card-actions > button { flex: 1; min-width: 0; }
  .bank-card-horizontal .bank-details-list { gap: 8px 16px; }
}
@media (max-width: 480px) {
  .bank-card-horizontal .bank-details-list { grid-template-columns: minmax(0, 1fr); }
}

.bank-card-horizontal { line-height: 1.45; }
.bank-card-horizontal .offer-bank-name { font-size: 20px; }
.bank-card-horizontal .offer-program-name,
.bank-card-horizontal .bank-program,
.bank-card-horizontal .payment-label,
.bank-card-horizontal .offer-summary-metric > span,
.bank-card-horizontal .offer-summary-metric small,
.bank-card-horizontal .offer-loan-term,
.bank-card-horizontal .bank-detail-label,
.bank-card-horizontal .bank-detail-value { font-size: 14px; }
.bank-card-horizontal .bank-rate { font-size: 24px; }
.bank-card-horizontal .offer-summary-metric strong,
.bank-card-horizontal .payment-value { font-size: 20px; }
.bank-card-horizontal .payment-values-wrapper .payment-value { font-size: 18px; }
.bank-card-horizontal .add-to-basket-btn,
.bank-card-horizontal .bank-details-button { font-size: 15px; }
.bank-card-horizontal .feature-badge,
.bank-card-horizontal .bank-card-custom-badge,
.bank-card-horizontal .bank-card-dynamic-info .dynamic-info-display,
.bank-card-horizontal .bank-excess { font-size: 13px; }

.bank-tranche-schedule { min-width: 0; margin-top: 16px; }
.bank-tranche-stage + .bank-tranche-stage { margin-top: 16px; }
.bank-tranche-stage h4 { margin: 0 0 4px; color: var(--ui-ink); font-size: 14px; font-weight: 500; }
.bank-card-horizontal .bank-tranche-stage .bank-details-list { margin: 0; padding-block: 0; border-top: 0; border-bottom: 1px solid var(--offer-line, var(--ui-line)); }
.bank-card-horizontal .bank-tranche-stage .bank-detail-item { border-bottom: 0; }
.bank-card-horizontal .bank-tranche-stage .bank-tranche-funding { flex-direction: column; align-items: stretch; gap: 4px; }
.bank-tranche-funding > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bank-tranche-disclosure { margin-top: 16px; padding-top: 12px; }
.bank-tranche-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.45; text-align: left; cursor: pointer; }
.bank-tranche-button:hover { color: var(--ui-accent-text); }
.bank-tranche-button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
.bank-tranche-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.payment-stage-count { color: var(--ui-secondary); font-size: 12px; }
.payment-tranche-label { display: inline-block; margin-left: 8px; color: var(--ui-secondary); font-size: 12px; font-weight: 400; letter-spacing: normal; white-space: nowrap; }
/* ============================================================
   ПРЕДУПРЕЖДЕНИЕ О ПРЕВЫШЕНИИ ЛИМИТА (ПОВЕРХ КАРТОЧКИ)
   ============================================================ */

.bank-card {
  position: relative;
  overflow: visible !important; /* 🔥 Меняем на visible, чтобы бейджи не обрезались */
}

/* Оверлей должен быть внутри карточки, но не обрезать бейджи */
.bank-card .bank-excess-warning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  padding: 1.5rem;
  border-radius: 0.5rem;

  animation: bankFadeInOverlay 0.4s ease-out;

  pointer-events: none;

  /* 🔥 Чтобы оверлей не вылезал за пределы карточки */
  overflow: hidden;
}

.bank-card .bank-excess-warning-overlay * {
  pointer-events: auto;
}

/* 🔥 Бейджи должны быть ПОВЕРХ оверлея */
.bank-card .bank-card-badges {
  position: relative;
  z-index: 20; /* Выше чем у оверлея (z-index: 10) */
}

/* 🔥 Каждый бейдж тоже поверх */
.bank-card .bank-card-badge {
  position: relative;
  z-index: 20;
}

@keyframes bankFadeInOverlay {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bank-card .excess-overlay-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  animation: bankPulseIcon 1.5s ease-in-out infinite;
}

@keyframes bankPulseIcon {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.bank-card .excess-overlay-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bank-card .excess-overlay-hint {
  font-size: 0.8rem;
  color: var(--ui-border-strong);
  text-align: center;
  max-width: 90%;
  line-height: 1.4;
}

.bank-card .excess-overlay-hint strong {
  color: #f59e0b;
}
/* Offer cards inspired by the light macOS window treatment. */
.bank-card-horizontal { container-type: inline-size; }
.bank-card-horizontal .bank-card-header.with-availability-notice {
  grid-template-columns: minmax(170px, 1.2fr) minmax(90px, .6fr) minmax(260px, 3fr);
}
.bank-card-horizontal .offer-availability-notice { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-canvas); }
.offer-availability-notice .unavailable-issue { padding: 0; gap: 12px; }
.offer-availability-notice .unavailable-issue + .unavailable-issue { margin-top: 16px; padding-top: 16px; border-color: var(--ui-border); }
.offer-availability-notice .unavailable-issue-header { gap: 10px; }
.offer-availability-notice .unavailable-issue-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ui-accent-soft); color: var(--ui-accent); }
.offer-availability-notice .unavailable-issue-icon svg { width: 18px; height: 18px; }
.offer-availability-notice .unavailable-issue-title { color: var(--ui-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.offer-availability-notice .unavailable-issue-metrics { gap: 8px; }
.offer-availability-notice .unavailable-metric-row { flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.offer-availability-notice .unavailable-metric-label { color: var(--ui-secondary); font-weight: 400; }
.offer-availability-notice .unavailable-metric-value { color: var(--ui-ink); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.offer-availability-notice .unavailable-metric-value.danger { color: var(--ui-warning-text); }
.offer-availability-notice .unavailable-issue-recommendation { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--ui-line); color: var(--ui-secondary); font-size: 12px; font-style: normal; line-height: 1.6; }
@container (max-width: 1100px) {
  .bank-card-horizontal .bank-card-header,
  .bank-card-horizontal .bank-card-header.with-subsidy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-card-horizontal .offer-bank-identity { grid-column: 1 / -1; }
  .bank-card-horizontal .bank-details-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bank-card-horizontal .bank-card-header.with-availability-notice { grid-template-columns: minmax(0, 1fr) minmax(90px, .6fr); }
  .bank-card-horizontal .with-availability-notice .offer-bank-identity { grid-column: auto; }
  .bank-card-horizontal .offer-availability-notice { grid-column: 1 / -1; }
}
@container (max-width: 650px) {
  .bank-card-horizontal .bank-card-top-row { flex-direction: column; align-items: stretch; }
  .bank-card-horizontal .bank-card-header { width: 100%; }
  .bank-card-horizontal .bank-card-actions { flex-direction: row; flex: 0 0 auto; width: 100%; }
  .bank-card-horizontal .bank-card-actions > button { flex: 1; min-width: 0; }
  .bank-card-horizontal .bank-details-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 400px) {
  .bank-card-horizontal .bank-details-list { grid-template-columns: minmax(0, 1fr); }
}
.horizontal-bank-group .bank-card.bank-card-horizontal {
  --offer-ink: var(--ui-ink);
  --offer-muted: var(--ui-muted);
  --offer-line: var(--ui-line);
  box-sizing: border-box;
  padding: 22px 26px 24px;
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  background: var(--ui-surface);
  color: var(--offer-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  box-shadow: 0 12px 36px -14px #34476d26;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.horizontal-bank-group .bank-card.bank-card-horizontal:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 16px 40px -14px #34476d36;
}
.horizontal-bank-group .bank-card.bank-card-horizontal.selected {
  border-color: #a28af5;
  background: var(--ui-surface);
  box-shadow: 0 0 0 2px #8b5cf61a, 0 14px 36px -14px #7053bd30;
}
.bank-card-horizontal .offer-bank-name { color: var(--offer-ink); font-weight: 600; letter-spacing: -.4px; }
.bank-card-horizontal .bank-icon { color: var(--ui-accent); }
.bank-card-horizontal .offer-program-name,
.bank-card-horizontal .bank-program,
.bank-card-horizontal .payment-label,
.bank-card-horizontal .offer-summary-metric > span,
.bank-card-horizontal .offer-summary-metric small,
.bank-card-horizontal .offer-loan-term,
.bank-card-horizontal .bank-detail-label { color: var(--offer-muted); font-weight: 500; }
.bank-card-horizontal .offer-summary-metric strong,
.bank-card-horizontal .offer-loan-term strong,
.bank-card-horizontal .bank-detail-value { color: var(--offer-ink); font-weight: 500; }
.bank-card-horizontal .bank-rate { color: var(--offer-ink); font-weight: 600; letter-spacing: -.5px; }
.bank-card-horizontal .payment-info { padding-left: 16px; border-left: 1px solid var(--offer-line); }
.bank-card-horizontal .payment-info .payment-value { color: var(--ui-accent); font-size: 24px; font-weight: 650; letter-spacing: -.6px; }
.bank-card-horizontal .payment-info .payment-after-subsidy { color: var(--ui-accent-text); font-size: 20px; }
.bank-card-horizontal .payment-info .payment-unavailable { color: var(--ui-muted); }
.bank-card-horizontal .bank-details-list { border-top: 1px solid var(--offer-line); margin-top: 20px; padding-top: 10px; padding-right: 32px; gap: 0 24px; }
.bank-card-horizontal .bank-detail-item { justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--offer-line); }
.bank-card-horizontal .bank-detail-value { text-align: right; }
.bank-card-horizontal .bank-detail-value.warning { color: var(--ui-warning-text); }
.bank-card-horizontal .bank-detail-value.positive { color: var(--ui-secondary); }
.bank-card-horizontal .bank-card-dynamic-info { background: var(--ui-canvas); border-color: var(--ui-border); border-radius: 12px; padding: 8px 12px; }
.bank-card-horizontal .bank-card-custom-badge { background: var(--ui-accent-soft); border-color: var(--ui-accent-hover-soft); color: var(--ui-accent-text); }
.bank-card-badges-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 16px; }
.bank-card-badges-top .bank-card-features { margin: 0; }
.bank-card-horizontal .offer-down-payment-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--offer-line, var(--ui-line));
}
.offer-down-payment-breakdown > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.offer-down-payment-breakdown dt { color: var(--offer-muted, var(--ui-muted)); font-size: 11px; font-weight: 500; line-height: 1.5; }
.offer-down-payment-breakdown dd { margin: 0; color: var(--offer-ink, var(--ui-ink)); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.bank-card.bank-card-horizontal.unavailable,
.horizontal-bank-group .bank-card.bank-card-horizontal.unavailable { background: var(--ui-surface); border-color: var(--ui-border); cursor: default; }
.bank-card.bank-card-horizontal.unavailable:hover,
.horizontal-bank-group .bank-card.bank-card-horizontal.unavailable:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow); }
.bank-card-horizontal .bank-card-top-row { align-items: flex-start; }
@media (max-width: 768px) {
  .horizontal-bank-group .bank-card.bank-card-horizontal { padding: 18px; border-radius: 20px; }
  .bank-card-horizontal .bank-details-list { padding-right: 12px; }
  .bank-card-horizontal .payment-info { padding-left: 0; border-left: 0; }
  .bank-card-horizontal .payment-info .payment-value { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-bank-group .bank-card.bank-card-horizontal,
  .bank-card-horizontal .bank-card-actions > button { transition: none; }
}
.bank-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-sm); color: var(--ui-info-text); font-size: 24px; font-weight: 700; vertical-align: middle; }
.bank-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bank-header-title { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; }
.bank-header-title > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* src/components/BankGroup/BankGroup.css */
.bank-group {
  margin-bottom: 2.5rem;
}

.bank-group-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  border-radius: 0.75rem;
  color: white;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bank-group-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.bank-group-count {
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  flex-shrink: 0;
}

.bank-categories {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .bank-group-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .bank-group-title {
    font-size: 1rem;
  }
}
.horizontal-bank-group {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 24px;
}
.horizontal-bank-group .bank-group-header,
.horizontal-bank-group .category-header { display: none; }
.horizontal-bank-group .bank-categories { gap: 0; }
.horizontal-bank-group .category-group { border: 0; border-radius: 0; background: transparent; }
.horizontal-bank-group .banks-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; background: transparent; }
.horizontal-bank-group.collapsed .category-group ~ .category-group,
.horizontal-bank-group.collapsed .bank-card ~ .bank-card { display: none; }
.horizontal-bank-group .bank-card-horizontal { border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border); padding: 24px; }
.horizontal-bank-group .bank-card-horizontal.selected { box-shadow: inset 4px 0 #0ea5e9; }
.horizontal-bank-group.expanded .bank-categories { gap: 16px; background: transparent; }
.horizontal-bank-group.expanded .banks-list { gap: 16px; background: transparent; }
.bank-group-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 12px 8px;
  background: transparent;
  color: var(--ui-muted);
  font: inherit;
  cursor: pointer;
}
.bank-group-toggle:hover { color: var(--ui-accent); background: transparent; }
.bank-group-toggle-chevron { display: block; flex: none; width: 20px; height: 20px; align-self: center; }
.bank-group-toggle:focus-visible { outline: 2px solid #a78bfa; outline-offset: -4px; border-radius: 12px; }
/* ResultsSection.css */

/* ============================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ============================================================ */
.results-calc-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  container-type: inline-size;
}

.price-breakdown {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ui-line);
}

.price-breakdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  list-style: none;
  cursor: pointer;
}

.price-breakdown-toggle::-webkit-details-marker { display: none; }
.price-breakdown-toggle:hover { background: var(--ui-subtle); }
.price-breakdown-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.price-breakdown-title { flex: 1; font-size: 0.8125rem; font-weight: 500; line-height: 1.5; }
.price-breakdown-area { color: var(--ui-secondary); font-size: 0.75rem; white-space: nowrap; }
.price-breakdown-chevron { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ui-secondary); }
.price-breakdown[open] > .price-breakdown-toggle .price-breakdown-chevron { transform: rotate(180deg); }
.price-breakdown-frame { margin-top: 0.75rem; }
.price-breakdown-table .price-breakdown-discount td { color: var(--ui-success-text); }
.price-breakdown-note { margin: 0.75rem 0 0; color: var(--ui-secondary); font-size: 0.75rem; line-height: 1.5; }

@container (max-width: 480px) {
  .price-breakdown-table thead { display: none; }
  .price-breakdown-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-line);
  }
  .price-breakdown-table :is(th, td) { padding: 0; border-bottom: 0; text-align: left; }
  .price-breakdown-table th:first-child { grid-column: 1 / -1; }
  .price-breakdown-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--ui-secondary);
    font-size: 0.7rem;
    font-weight: 400;
  }
  .price-breakdown-table tfoot tr { border-bottom: 0; background: var(--ui-accent-soft); }
}

/* ============================================================
   БЛОК РЕЗУЛЬТАТОВ — ГОРИЗОНТАЛЬНЫЙ
   ============================================================ */
.results-calc-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ui-accent);
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   ЗАГОЛОВОК
   ============================================================ */
.results-calc-title {
  color: var(--ui-ink);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: 0;
}

/* ============================================================
   ОСНОВНАЯ СУММА
   ============================================================ */
.results-calc-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ui-info-text);
  padding: 0;
  line-height: 1.2;
}

/* ============================================================
   ДЕТАЛИ — В ОДНУ СТРОКУ
   ============================================================ */
.results-calc-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 0.25rem;
  align-items: center;
}

.results-calc-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border-bottom: none;
  min-width: 140px;
  flex: 1 1 auto;
}

/* ============================================================
   ЛЕЙБЛЫ
   ============================================================ */
.detail-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ui-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ============================================================
   ЗНАЧЕНИЯ
   ============================================================ */
.detail-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ui-ink);
  white-space: nowrap;
}

.detail-percent {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ui-secondary);
  margin-left: 0.35rem;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 768px) {
  .results-calc-title {
    font-size: 1rem;
  }

  .results-calc-value {
    font-size: 1.5rem;
  }

  .results-calc-details {
    gap: 0.6rem 1.25rem;
  }

  .results-calc-detail-item {
    min-width: 110px;
  }

  .detail-label {
    font-size: 0.65rem;
  }

  .detail-value {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .results-calc-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }

  .results-calc-detail-item {
    min-width: auto;
  }

  .results-calc-value {
    font-size: 1.25rem;
  }
}
.ui-price-table-frame {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
}

.ui-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-price-table :where(th, td) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-line);
  text-align: left;
  vertical-align: middle;
}

.ui-price-table :where(thead th) {
  background: var(--ui-canvas);
  color: var(--ui-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}

.ui-price-table :where(tbody th) {
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-weight: 500;
}

.ui-price-table :where(tr > :not(:first-child)) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-price-table :where(td) {
  white-space: nowrap;
}

.ui-price-table :where(tbody tr:hover > :is(th, td)) {
  background: var(--ui-canvas);
}

.ui-price-table :where(tbody:last-child tr:last-child > :is(th, td)) {
  border-bottom: 0;
}

.ui-price-table :where(tfoot th, tfoot td) {
  border-bottom: 0;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font-weight: 600;
}
/* src/components/OfferBasket/OfferBasket.css */

.offer-basket {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  background: var(--ui-surface);
  border-radius: 0.75rem;
  border: 1px solid var(--ui-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.2s ease;
}

.offer-basket.is-dragover {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* ============================================================
   ШАПКА
   ============================================================ */
.offer-basket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  color: #fff;
  flex-shrink: 0;
}

.offer-basket-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.offer-basket-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
}

.offer-basket-controls { display: flex; flex-wrap: wrap; flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); }
.offer-basket-details-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-subtle); color: var(--ui-secondary); font-size: 13px; line-height: 1.5; cursor: pointer; }
.offer-basket-details-toggle input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ui-accent); cursor: pointer; }
.offer-basket-details-toggle span { user-select: none; }

/* ============================================================
   ОШИБКА
   ============================================================ */
.offer-basket-error {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  background: var(--ui-danger-soft);
  border-bottom: 1px solid var(--ui-danger-border);
  color: var(--ui-danger-text);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
}

/* ============================================================
   СПИСОК (плоский, вертикальный)
   ============================================================ */
.offer-basket-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

.offer-basket-list.horizontal-bank-group {
  min-height: 0;
  margin: 0;
  padding: 16px;
  gap: 16px;
}
.offer-basket-item { flex-shrink: 0; min-width: 0; width: 100%; }
.offer-basket-item > .bank-card { min-width: 0; width: 100%; }
.offer-basket-share-selection { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; color: var(--ui-secondary); font-size: 13px; cursor: pointer; }
.offer-basket-share-selection input { width: 16px; height: 16px; accent-color: var(--ui-accent); }

.offer-basket-list::-webkit-scrollbar {
  width: 6px;
}
.offer-basket-list::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 3px;
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */
.offer-basket-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  border: 2px dashed var(--ui-border);
  border-radius: 0.75rem;
  margin: 0.75rem;
  color: var(--ui-muted);
  transition: all 0.2s ease;
}

.offer-basket-empty.is-dragover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
}

.offer-basket-empty-icon {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

.offer-basket-empty-text {
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 220px;
}

.offer-basket-empty-hint {
  font-size: 0.72rem;
  margin-top: 0.5rem;
  color: var(--ui-border-strong);
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.offer-basket-footer {
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-canvas);
  display: flex;
  gap: 0.4rem;
}

.offer-basket-footer .copy-selected-btn,
.offer-basket-footer .print-selected-btn {
  flex: 1;
  justify-content: center;
  font-size: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: var(--ui-surface);
  color: var(--ui-accent);
  border: 1px solid var(--ui-border);
}

.offer-basket-footer .copy-selected-btn:hover:not(:disabled),
.offer-basket-footer .print-selected-btn:hover:not(:disabled) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-border);
}
.complexes-list { container-type: inline-size; min-width: 0; }
.complexes-view-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 16px; }
.complexes-list-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 16px; }
.complexes-view-toolbar .complexes-list-actions { margin: 0; }
.complexes-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.complexes-cards > li { min-width: 0; }
.complexes-cards.is-reorderable > li { position: relative; }
.complexes-cards.is-reorderable .complexes-card-body { padding-right: 84px; }
.complexes-cards > li.is-dragging { opacity: .5; }
.complexes-cards > li.is-drop-target .complexes-card { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.complexes-card-order { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 8px; background: var(--ui-surface); color: var(--ui-secondary); font-size: 13px; }
.complexes-cards .complexes-card { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow); font: inherit; text-align: left; cursor: pointer; }
.complexes-cards .complexes-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-hover); }
.complexes-cards .complexes-card:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.complexes-card-media { position: relative; display: block; width: 100%; }
.complexes-card-photo, .complexes-card-placeholder { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ui-canvas); border-bottom: 1px solid var(--ui-line); }
.complexes-card-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ui-muted); font-size: 13px; }
.complexes-card-placeholder svg { width: 48px; height: 48px; }
.complexes-card-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 16px; width: 100%; padding: 18px; }
.complexes-card-name { color: var(--ui-ink); font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.complexes-card-statuses { position: absolute; inset: 12px 12px auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.complexes-card-stage { display: inline-flex; padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-canvas); color: var(--ui-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; }
.complexes-card-stage[data-stage="строится"] { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.complexes-card-stage[data-stage="сдан"] { border-color: var(--ui-success-border); background: var(--ui-success-soft); color: var(--ui-success-text); }
.complexes-cards-empty { margin: 0; padding: 32px 20px; color: var(--ui-secondary); text-align: center; font-size: 14px; line-height: 1.6; }
@container (max-width: 1100px) { .complexes-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 800px) { .complexes-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 520px) { .complexes-cards { grid-template-columns: minmax(0, 1fr); } }
.calculator-project-selection { --calculator-card-media-height: 160px; min-width: 0; }
.calculator-project-selection .complexes-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.calculator-project-selection.is-leaving .complexes-cards > li { animation: calculator-project-exit 420ms cubic-bezier(.4, 0, .2, 1) var(--project-exit-delay) both; pointer-events: none; will-change: transform, opacity; }
.calculator-project-selection.is-leaving .complexes-card:disabled { opacity: 1; cursor: default; }
@keyframes calculator-project-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-100vw, -12px, 0); }
}
@media (prefers-reduced-motion: reduce) { .calculator-project-selection.is-leaving .complexes-cards > li { animation-duration: 1ms; animation-delay: 0ms; } }
.calculator-project-message { margin: 0; color: var(--ui-secondary); font-size: 14px; line-height: 1.6; }
.calculator-project-selection .calculator-project-card-footer { flex-direction: row; align-items: center; gap: 12px; }
.calculator-project-card-footer .complexes-card-name { flex: 1; min-width: 0; }
.calculator-project-card-footer .complexes-card-stage { flex-shrink: 0; white-space: nowrap; }
.calculator-project-selection .complexes-card-statuses { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.calculator-project-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.calculator-project-badge { display: inline-flex; max-width: 100%; padding: 4px 10px; border: 1px solid var(--ui-accent-border); border-radius: 12px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.calculator-project-badge[data-kind="offer"] { border-color: var(--ui-success-border); background: var(--ui-success-soft); color: var(--ui-success-text); }
.company-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-canvas); color: var(--ui-accent-text); font-size: 20px; font-weight: 600; }
.company-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.company-identity { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.company-identity > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.calculator-company-logo { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--calculator-card-media-height); border-bottom: 1px solid var(--ui-line); background: var(--ui-canvas); }
.calculator-company-logo .company-logo { position: absolute; inset: 20px; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; font-size: 48px; }
.account-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; color: var(--ui-ink); }
.account-identity-avatar { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border: 1px solid var(--ui-accent-border); border-radius: 20px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 26px; font-weight: 600; line-height: 1; }
.account-identity-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; width: 100%; }
.account-identity-name { max-width: 100%; font-size: 22px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; letter-spacing: -.4px; }
.account-identity-email, .account-identity-company { max-width: 100%; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.account-identity-role { max-width: 100%; padding: 4px 10px; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 500; line-height: 1.4; }
.account-identity--compact { flex-direction: row; align-items: flex-start; gap: 12px; }
.account-identity--compact .account-identity-avatar { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
.account-identity--compact .account-identity-info { gap: 5px; }
.account-identity--compact .account-identity-name { font-size: 15px; letter-spacing: -.1px; }
.account-identity--compact .account-identity-email { font-size: 12px; }
.account-identity--compact .account-identity-role { margin-top: 3px; font-size: 11px; }
.catalog-panel {
  min-width: 0;
  padding: 24px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  box-shadow: var(--ui-shadow);
}
.catalog-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.catalog-panel-title { display: flex; align-items: center; gap: 12px; }
.catalog-panel .catalog-panel-title h2 { margin: 0; padding: 0; border: 0; background: none; color: var(--ui-ink); font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.catalog-panel-count { padding: 3px 11px; border-radius: 20px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 600; }
.catalog-panel-items { display: flex; flex-direction: column; gap: 4px; }
.selection-menu-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.selection-menu-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.selection-menu-count { flex-shrink: 0; min-width: 24px; padding: 2px 7px; border-radius: 8px; background: var(--ui-subtle); color: var(--ui-secondary); font-size: 12px; text-align: center; }
.catalog-item[aria-pressed="true"] .selection-menu-count { background: var(--ui-accent-hover-soft); color: var(--ui-accent-text); }
body .catalog-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
body .catalog-item:hover { background: var(--ui-accent-hover-soft); }
body .catalog-item[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-accent-text); }
body .catalog-item:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
@media (max-width: 768px) { .catalog-panel { padding: 18px; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { body .catalog-item { transition: none; } }
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 999px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-status-badge[data-active="false"] {
  background: var(--ui-subtle);
  border-color: var(--ui-border);
  color: var(--ui-secondary);
}
.admin-status-badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.admin-status-badge--md { padding: 5px 12px; font-size: 13px; }
.admin-status-badge--lg { padding: 6px 14px; font-size: 14px; }
body .profile-page.account-page { width: 100%; min-width: 0; min-height: 100vh; padding: 30px; color: var(--ui-ink); background: var(--ui-canvas); box-sizing: border-box; }
.account-page-heading { margin-bottom: 24px; }
.account-page-heading h1 { margin: 0; font-size: 32px; font-weight: 650; letter-spacing: -1px; line-height: 1.3; }
.account-page-heading p { margin: 12px 0 0; color: var(--ui-secondary); font-size: 14px; line-height: 1.7; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; gap: 30px; }
.account-sidebar { display: grid; gap: 20px; min-width: 0; }
.account-surface { min-width: 0; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: 0 1px 3px #00000014; }
.account-summary { padding: 24px; }
.account-summary-status { margin-top: 20px; }
.account-summary .account-signout.ui-button { width: 100%; justify-content: flex-start; margin-top: 20px; padding: 12px 0 0; border-top: 1px solid var(--ui-line); border-radius: 0; color: var(--ui-danger-text, #b4475e); }
.account-settings-menu .catalog-panel { padding: 24px; border-radius: 12px; }
.account-main { display: grid; gap: 24px; min-width: 0; }
.account-details { padding: 24px; }
.account-panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.account-panel-heading > div { min-width: 0; }
.account-panel-heading h2 { margin: 0; color: var(--ui-ink); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.4px; }
.account-panel-heading p { margin: 8px 0 0; color: var(--ui-secondary); font-size: 13px; line-height: 1.7; }
.account-data-list { margin: 0; }
.account-data-list > div { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ui-line); font-size: 14px; line-height: 1.65; }
.account-data-list > div:first-child { padding-top: 0; }
.account-data-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.account-data-list dt { color: var(--ui-secondary); }
.account-data-list dd { margin: 0; color: var(--ui-ink); font-weight: 500; overflow-wrap: anywhere; }
.account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.account-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-form-actions .ui-button { flex: 0 0 auto; width: auto; }
.account-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.account-field--wide { grid-column: 1 / -1; }
.account-field label { color: var(--ui-ink); font-size: 13px; font-weight: 500; line-height: 1.5; }
.account-field input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-border-strong); border-radius: 8px; color: var(--ui-ink); background: var(--ui-surface); font: inherit; font-size: 14px; box-sizing: border-box; }
.account-field input:disabled { color: var(--ui-secondary); background: var(--ui-subtle); }
.account-field input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.account-field-hint { color: var(--ui-secondary); font-size: 12px; line-height: 1.5; }
.account-password-form { grid-template-columns: minmax(0, 1fr); }
.account-password-form .account-field { width: 100%; max-width: 520px; }
.account-security-note { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-subtle); }
.account-security-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: var(--ui-accent-text); background: var(--ui-accent-soft); }
.account-security-note h3 { margin: 0; color: var(--ui-ink); font-size: 14px; font-weight: 600; }
.account-security-note p { margin: 6px 0 0; color: var(--ui-secondary); font-size: 13px; line-height: 1.7; }
@media (max-width: 1200px) { body .profile-page.account-page { padding: 24px; } .account-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .account-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 768px) { body .profile-page.account-page { padding: 16px; } .account-sidebar, .account-form { grid-template-columns: minmax(0, 1fr); } .account-summary, .account-details, .account-settings-menu .catalog-panel { padding: 20px; } .account-panel-heading h2 { font-size: 18px; } .account-data-list > div { gap: 16px; grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); } }
@media (max-width: 480px) { body .profile-page.account-page { padding: 8px; } .account-page-heading h1 { font-size: 28px; } .account-data-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .account-form-actions { gap: 8px; } }
.complex-photos { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 0 0 20px; padding: 16px; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); scrollbar-width: thin; }
.complex-photos.complex-photos-bare { padding: 0; border: 0; border-radius: 0; background: transparent; }
.complex-photos img { display: block; flex: 1 1 0; width: 0; min-width: 0; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-canvas); }
/* src/pages/ProjectsPage/ProjectsPage.css */
.projects-page {
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--ui-subtle) 0%, var(--ui-subtle) 100%);
  min-height: 100vh;
  padding: 30px;
}

.projects-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: start;
}

/* Состояния загрузки и ошибки */
.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  background: var(--ui-surface);
  border-radius: 20px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--ui-border);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

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

.loading-state p {
  color: var(--ui-secondary);
  font-size: 1rem;
  margin: 0;
}

.error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  background: var(--ui-surface);
  border-radius: 20px;
  padding: 2rem;
}

.error-state p {
  color: var(--ui-danger-text);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.error-state button {
  padding: 0.5rem 1.5rem;
  background: var(--ui-action);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.error-state button:hover {
  background: #5a6fd6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
  background: var(--ui-surface);
  border-radius: 20px;
  color: var(--ui-muted);
  text-align: center;
  min-height: 400px;
}

.empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-state p {
  font-size: 1.1rem;
  margin: 0;
  color: var(--ui-secondary);
}

.empty-state .empty-hint {
  font-size: 0.85rem;
  color: var(--ui-muted);
  margin-top: 0.25rem;
}

/* Адаптив для страницы */
@media (max-width: 1200px) {
  .projects-layout {
    grid-template-columns: 280px 1fr;
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .projects-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .projects-page {
    padding: 1rem;
  }
}
/* frontend/src/pages/ProjectsPage/ProjectsPage.css */

/* ... существующие стили ... */

/* ============================================================
   🔥 ТАБЫ - ТОЛЬКО ДЛЯ АДМИНА
   ============================================================ */

.projects-tabs-wrapper {
  background: var(--ui-surface);
  border-radius: 16px;
  padding: 4px 16px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--ui-border);
}

.projects-tabs-wrapper .tabs {
  margin-bottom: 0;
  border-bottom: none;
  padding: 0;
}

/* ============================================================
   🔥 БЕЙДЖ КОМПАНИИ - ТОЛЬКО ДЛЯ НЕ-АДМИНА
   ============================================================ */

.projects-company-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ui-surface);
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--ui-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.badge-icon {
  font-size: 1.5rem;
}

.badge-text {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ui-ink);
}

.badge-count {
  font-size: 0.85rem;
  color: var(--ui-muted);
  background: var(--ui-subtle);
  padding: 2px 12px;
  border-radius: 12px;
}

/* ============================================================
   🔥 ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */

.projects-empty-wrapper {
  background: var(--ui-surface);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.projects-empty-wrapper .tabs {
  margin-bottom: 24px;
  border-bottom: 2px solid var(--ui-subtle);
}

.projects-empty-wrapper .empty-state {
  background: transparent;
  box-shadow: none;
  padding: 40px 20px;
  min-height: 300px;
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .projects-tabs-wrapper {
    padding: 4px 8px;
    border-radius: 12px;
    margin-bottom: 16px;
  }

  .projects-company-badge {
    padding: 10px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .badge-text {
    font-size: 0.9rem;
  }

  .badge-count {
    font-size: 0.75rem;
  }

  .projects-empty-wrapper {
    padding: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .projects-tabs-wrapper {
    padding: 2px 4px;
  }

  .projects-company-badge {
    padding: 8px 12px;
    gap: 8px;
  }

  .badge-icon {
    font-size: 1.2rem;
  }

  .badge-text {
    font-size: 0.8rem;
  }

  .badge-count {
    font-size: 0.7rem;
    padding: 1px 8px;
  }
}
body .projects-page.projects-catalog { width: 100%; max-width: 1680px; margin: 0 auto; padding: 32px; background: var(--ui-canvas); color: var(--ui-ink); }
.projects-catalog { --catalog-space: 24px; }
.projects-catalog .project-surface { min-width: 0; padding: 24px; border: 1px solid var(--ui-border); border-radius: 24px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.projects-catalog :is(h1, h2, h3, h4, h5) { margin: 0; padding: 0; border: 0; background: none; color: var(--ui-ink); line-height: 1.3; }
.projects-catalog h1 { font-size: 32px; font-weight: 650; letter-spacing: -1px; }
.projects-catalog h2 { font-size: 28px; font-weight: 600; letter-spacing: -.7px; overflow-wrap: anywhere; }
.projects-catalog h3 { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.projects-catalog h4 { font-size: 16px; font-weight: 600; }
.projects-catalog h5 { font-size: 14px; font-weight: 600; }
.projects-catalog p { margin: 12px 0 0; line-height: 1.7; }
.projects-catalog .project-muted { color: var(--ui-secondary); font-size: 13px; }
.project-eyebrow { display: block; margin-bottom: 8px; color: var(--ui-secondary); font-size: 13px; font-weight: 500; }
.projects-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.projects-page-heading p { color: var(--ui-secondary); font-size: 14px; }
.projects-catalog-toolbar { margin-bottom: 24px; }
.projects-catalog .tabs-label { font-weight: 500; }
.projects-search-row { display: flex; align-items: end; gap: 16px; }
.projects-search, .projects-company-filter { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ui-secondary); font-size: 13px; }
.projects-search { flex: 1; }
.projects-company-filter { flex: 0 1 280px; }
.projects-catalog .projects-search input { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.projects-catalog .projects-layout { display: grid; grid-template-columns: 296px minmax(0, 1fr); align-items: start; gap: 24px; }
.projects-catalog .projects-list-wrapper { position: sticky; top: 94px; }
.projects-catalog .projects-list-wrapper .catalog-panel-items { max-height: calc(100dvh - 250px); overflow-y: auto; scrollbar-width: thin; }
.project-workspace { min-width: 0; }
.project-overview-header { margin-bottom: 24px; }
.project-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.projects-catalog .project-chip { display: inline-flex; align-items: center; flex-shrink: 0; gap: 6px; padding: 5px 11px; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 500; }
.projects-catalog .project-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; }
.project-metrics > div { min-width: 0; padding-right: 16px; }
.project-metrics > div + div { padding-left: 20px; border-left: 1px solid var(--ui-line); }
.project-metrics dt { margin-bottom: 8px; color: var(--ui-secondary); font-size: 12px; }
.project-metrics dd { margin: 0; color: var(--ui-ink); font-size: 22px; font-weight: 600; letter-spacing: -.5px; overflow-wrap: anywhere; }
.projects-catalog a:not(.ui-button) { color: var(--ui-accent-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.project-material-link { display: inline-flex; margin-top: 24px; font-size: 14px; font-weight: 500; }
.project-overview-sections, .project-program-directory, .project-partner-banks, .projects-bank-directory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.project-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.project-long-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-secondary); font-size: 14px; }
.projects-catalog .project-text-list { display: grid; gap: 10px; padding-left: 20px; margin: 16px 0 0; color: var(--ui-secondary); font-size: 14px; }
.project-text-list li { padding-left: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-text-list li::marker { color: #a28af5; }
.project-table-scroll { margin-top: 20px; max-width: 100%; overflow-x: auto; }
.project-price-table { min-width: 680px; }
.project-price-table tbody th { white-space: nowrap; }
.project-price-table small { display: block; margin-top: 5px; color: var(--ui-secondary); font-size: 11px; font-weight: 400; }
.projects-catalog .project-state { padding: 48px 24px; text-align: center; color: var(--ui-secondary); }
.project-state .ui-button { margin-top: 16px; }
.bank-dossier-header, .project-offer > header { display: flex; align-items: center; gap: 14px; }
.bank-dossier-header > .project-chip { margin-left: auto; }
.bank-dossier-header .project-muted { display: block; margin-top: 6px; }
.bank-dossier-expanded { margin-top: 24px; border-top: 1px solid var(--ui-line); }
.bank-dossier-expanded > summary { padding: 18px 0 0; color: var(--ui-accent-text); cursor: pointer; font-size: 14px; font-weight: 500; }
.bank-dossier-sections { display: grid; gap: 24px; margin-top: 24px; }
.projects-catalog .project-definition-list { margin: 14px 0 0; }
.project-definition-list > div { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.5fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.project-definition-list > div:last-child { border-bottom: 0; }
.project-definition-list dt { color: var(--ui-secondary); }
.project-definition-list dd { margin: 0; color: var(--ui-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bank-program-dossiers { display: grid; gap: 16px; margin-top: 16px; }
.bank-program-dossiers > section { padding: 18px; border-radius: 16px; background: var(--ui-canvas); }
.project-offer-list { display: grid; gap: 20px; margin-top: 20px; }
.project-offer { min-width: 0; padding-top: 20px; border-top: 1px solid var(--ui-line); }
.project-offer h4 { margin-bottom: 4px; }
.project-program-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.project-program-toggle::-webkit-details-marker { display: none; }
.project-program-title { flex: 1; color: var(--ui-ink); font-size: 18px; font-weight: 600; }
.project-program-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; align-self: center; color: var(--ui-secondary); }
.project-program-chevron svg { display: block; width: 20px; height: 20px; }
.project-program-dossier[open] > .project-program-toggle .project-program-chevron { transform: rotate(180deg); }
.project-program-toggle:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 6px; border-radius: 8px; }
@media (max-width: 480px) {
  .project-program-toggle { flex-wrap: wrap; }
  .project-program-title { flex-basis: calc(100% - 36px); }
  .project-program-toggle .project-chip { order: 2; }
}
.project-workspace { container-type: inline-size; }
@container (max-width: 650px) {
  .project-title-row { flex-direction: column; gap: 12px; }
  .project-metrics dd { font-size: 18px; }
  .project-definition-list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 1100px) {
  .projects-catalog .projects-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
  .projects-catalog .projects-layout { grid-template-columns: minmax(0, 1fr); }
  .projects-catalog .projects-list-wrapper { position: static; }
  .projects-catalog .projects-list-wrapper .catalog-panel-items { max-height: 240px; }
}
@media (max-width: 600px) {
  body .projects-page.projects-catalog { padding: 20px 16px; }
  .projects-catalog .project-surface { padding: 18px; border-radius: 20px; }
  .projects-page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .projects-catalog h1 { font-size: 28px; }
  .projects-catalog h2 { font-size: 24px; }
  .projects-search-row { flex-direction: column; align-items: stretch; }
  .projects-company-filter { flex: auto; }
  .projects-catalog .project-metrics { gap: 12px; }
  .project-metrics > div { padding-right: 0; }
  .project-metrics > div + div { padding-left: 12px; }
  .project-metrics dd { font-size: 17px; }
  .project-section-heading { align-items: flex-start; flex-wrap: wrap; }
}
body .projects-page.projects-cards-page { max-width: 100%; padding: 30px; }
.projects-catalog .projects-cards-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 30px; }
.projects-choice-column { position: sticky; top: 94px; min-width: 0; max-height: calc(100dvh - 126px); overflow-x: hidden; overflow-y: auto; padding: 3px; scrollbar-width: thin; }
.projects-details-column { min-width: 0; }
.projects-cards-page .selection-panel-header p { margin: 0; }
.projects-cards-page .selection-panel-title { line-height: 28px; }
.projects-cards-page .selection-panel-label { line-height: 20px; }
.projects-card-empty { display: grid; justify-items: start; gap: 12px; color: var(--ui-secondary); font-size: 14px; }
.projects-cards-page .projects-card-empty p { margin: 0; }
.projects-cards-page .calculator-project-message { margin: 0; line-height: 1.6; }
.projects-cards-page .projects-choice-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; padding: 48px; text-align: center; }
.projects-choice-placeholder h2 { max-width: 540px; }
.projects-choice-placeholder p { max-width: 520px; color: var(--ui-secondary); font-size: 15px; }
.projects-choice-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 24px; border: 1px solid var(--ui-accent-border); border-radius: 24px; background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.projects-choice-icon svg { width: 42px; height: 42px; }
.projects-selected-panel .selection-panel-title { color: var(--ui-secondary); font-size: 13px; font-weight: 500; }
.projects-selected-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.projects-selected-title h2 { flex: 1; min-width: 0; font-size: 22px; }
.projects-selected-title .complexes-card-stage { flex-shrink: 0; }
.projects-selected-photo { display: block; width: 100%; aspect-ratio: 16 / 10; margin-top: 20px; border-radius: 16px; object-fit: cover; }
.projects-selected-summary { display: grid; gap: 16px; margin: 20px 0 0; }
.projects-selected-summary > div { display: grid; gap: 6px; }
.projects-selected-summary dt { color: var(--ui-secondary); font-size: 12px; }
.projects-selected-summary dd { margin: 0; color: var(--ui-ink); font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 1201px) {
  body .projects-page.projects-selection-page { display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; }
  .projects-selection-page .projects-page-heading { flex-shrink: 0; }
  .projects-selection-page .projects-cards-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .projects-selection-page .projects-choice-column { position: static; min-height: 0; max-height: 100%; }
  .projects-selection-page .projects-details-column { display: flex; min-height: 0; overflow-y: auto; }
  .projects-selection-page .projects-choice-placeholder { flex: 1; min-height: 440px; }
}
@media (max-width: 1200px) {
  body .projects-page.projects-cards-page { padding: 1.5rem; }
  .projects-catalog .projects-cards-layout { grid-template-columns: minmax(0, 1fr); }
  .projects-choice-column { position: static; max-height: none; overflow: visible; }
  .projects-cards-page .projects-choice-placeholder { min-height: 260px; padding: 24px; }
}
@media (max-width: 768px) { body .projects-page.projects-cards-page { padding: 1rem; } }
@media (max-width: 480px) { body .projects-page.projects-cards-page { padding: .5rem; } }
body .projects-page.banks-directory { display: flex; flex-direction: column; width: 100%; max-width: 100%; min-height: 100vh; padding: 30px; box-sizing: border-box; }
.banks-directory .projects-page-heading { flex-shrink: 0; }
.banks-directory .banks-development-notice { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 260px; text-align: center; }
.banks-development-content { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 6vw, 88px); width: min(100%, 1040px); padding: 32px 0; }
.banks-directory .banks-development-notice h2 { color: var(--ui-ink); font-size: clamp(28px, 3vw, 38px); font-weight: 650; line-height: 1.2; letter-spacing: -1px; text-align: left; text-wrap: balance; }
@media (max-width: 760px) {
  .banks-development-content { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 0; }
  .banks-directory .banks-development-notice h2 { text-align: center; }
}
@media (max-width: 1200px) { body .projects-page.banks-directory { padding: 1.5rem; } }
@media (max-width: 768px) { body .projects-page.banks-directory { padding: 1rem; } }
@media (max-width: 480px) { body .projects-page.banks-directory { padding: .5rem; } }
body .projects-page.faq-page { width: 100%; max-width: 100%; min-height: 100vh; padding: 30px; box-sizing: border-box; }
.faq-list { display: grid; gap: 14px; min-width: 0; }
.faq-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 30px; align-items: start; }
.faq-topics { position: sticky; top: 94px; min-width: 0; max-height: calc(100dvh - 126px); overflow-y: auto; border-radius: 12px; }
.faq-topics .catalog-panel { padding: 24px; border-radius: 12px; }
.faq-questions { min-width: 0; }
.faq-admin-toolbar { margin: 24px 0; justify-content: flex-end; }
.admin-page .admin-faq-directory > .admin-section-header > .admin-list-actions { margin-top: 24px; }
.admin-faq-topic { color: var(--ui-secondary); font-size: 12px; }
.faq-item { min-width: 0; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; color: var(--ui-ink); font-size: 16px; font-weight: 600; line-height: 1.5; list-style: none; cursor: pointer; overflow-wrap: anywhere; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
.faq-chevron { flex: 0 0 9px; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] .faq-chevron { transform: rotate(225deg); }
.faq-answer { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-secondary); font-size: 15px; line-height: 1.8; }
.faq-item > .faq-answer { padding: 0 24px 24px; }
.faq-answer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 24px 20px; }
.faq-empty { padding: 56px 0; text-align: center; color: var(--ui-secondary); }
.admin-faq-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.admin-faq-card > .admin-status-badge { align-self: flex-start; }
.admin-faq-question { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.admin-faq-excerpt { color: var(--ui-secondary); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.admin-faq-directory .admin-directory-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-faq-directory .is-reorderable .admin-faq-card { padding-bottom: 64px; }
@container (max-width: 650px) { .admin-faq-directory .admin-directory-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1200px) { body .projects-page.faq-page { padding: 24px; } .faq-content { grid-template-columns: minmax(0, 1fr); gap: 24px; } .faq-topics { position: static; max-height: none; } }
@media (max-width: 768px) { body .projects-page.faq-page { padding: 16px; } .faq-item summary { padding: 18px; } .faq-item > .faq-answer { padding: 0 18px 18px; } }
@media (max-width: 480px) { body .projects-page.faq-page { padding: 8px; } }
@media (max-width: 768px) { .faq-answer-actions { padding: 0 18px 18px; } }
@media (max-width: 480px) { .faq-answer-actions > .ui-button { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .faq-chevron { transition: none; } }
/* frontend/src/components/Auth/AuthPanel.css */

/* ============================================================
   ОВЕРЛЕЙ
   ============================================================ */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.auth-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   ПАНЕЛЬ (ВЫЕЗЖАЕТ СПРАВА)
   ============================================================ */
.auth-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--ui-surface);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.auth-panel.open {
  transform: translateX(0);
}

/* ============================================================
   ХЕДЕР
   ============================================================ */
.auth-panel-header {
  padding: 24px 30px 16px;
  border-bottom: 1px solid var(--ui-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.auth-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--ui-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.auth-close-btn:hover {
  background: var(--ui-subtle);
  color: var(--ui-ink);
}

/* ============================================================
   ТЕЛО
   ============================================================ */
.auth-panel-body {
  padding: 32px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.auth-panel-title {
  margin-bottom: 28px;
}

.auth-panel-title h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ui-ink);
  margin: 0 0 4px 0;
}

.auth-panel-title p {
  font-size: 14px;
  color: var(--ui-muted);
  margin: 0;
}

/* ============================================================
   ОШИБКА
   ============================================================ */
.auth-error {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ============================================================
   ФОРМА
   ============================================================ */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.auth-form .form-group {
  display: flex;
  flex-direction: column;
}

.auth-form .form-group input {
  padding: 12px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.2s;
  background: var(--ui-canvas);
}

.auth-form .form-group input:focus {
  outline: none;
  border-color: var(--ui-accent);
  background: var(--ui-surface);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.auth-form .form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-form .form-group input::placeholder {
  color: var(--ui-muted);
}

.auth-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   🔥 ЗАБЫЛИ ПАРОЛЬ?
   ============================================================ */
.auth-forgot-password {
  text-align: right;
  margin-top: -4px;
}

.auth-forgot-password a {
  color: var(--ui-accent);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-forgot-password a:hover {
  color: var(--ui-accent-text);
  text-decoration: underline;
}

/* ============================================================
   КНОПКА ОТПРАВКИ
   ============================================================ */
.auth-submit-btn {
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.auth-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   ПЕРЕКЛЮЧЕНИЕ
   ============================================================ */
.auth-switch {
  margin-top: 20px;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--ui-subtle);
}

.auth-switch p {
  font-size: 14px;
  color: var(--ui-muted);
  margin: 0;
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--ui-accent);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  transition: opacity 0.2s;
}

.auth-switch-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 480px) {
  .auth-panel {
    width: 100%;
    max-width: 100%;
  }

  .auth-panel-header {
    padding: 16px 20px;
  }

  .auth-panel-body {
    padding: 24px 20px;
  }

  .auth-panel-title h2 {
    font-size: 20px;
  }

  .auth-form-row {
    grid-template-columns: 1fr;
  }

  .auth-form .form-group input {
    padding: 10px 14px;
    font-size: 14px;
  }

  .auth-submit-btn {
    padding: 12px;
    font-size: 15px;
  }
}

/* frontend/src/components/Auth/AuthPanel.css */

/* ============================================================
   🔥 ДОБАВЛЯЕМ В КОНЕЦ ФАЙЛА
   ============================================================ */

/* ============================================================
   КНОПКА "ЗАБЫЛИ ПАРОЛЬ?" В ВИДЕ ССЫЛКИ
   ============================================================ */
.auth-forgot-link-btn {
  background: none;
  border: none;
  color: var(--ui-accent);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
  text-decoration: none;
}

.auth-forgot-link-btn:hover {
  color: var(--ui-accent-text);
  text-decoration: underline;
}

/* ============================================================
   УСПЕШНОЕ СОСТОЯНИЕ ДЛЯ ВОССТАНОВЛЕНИЯ
   ============================================================ */
.auth-forgot-success {
  text-align: center;
  padding: 8px 0;
}

.auth-forgot-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.auth-forgot-message {
  font-size: 1.1rem;
  color: var(--ui-success-text);
  font-weight: 500;
  margin: 8px 0 4px;
}

.auth-forgot-hint {
  color: var(--ui-secondary);
  font-size: 0.9rem;
  margin: 8px 0 20px;
}

.auth-forgot-error {
  padding: 12px 16px;
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
  border-radius: 8px;
  margin-top: 12px;
  font-size: 0.9rem;
  border: 1px solid var(--ui-danger-border);
}

/* ============================================================
   КНОПКА "ОТПРАВИТЬ ПОВТОРНО"
   ============================================================ */
.auth-forgot-resend-btn {
  width: 100%;
  padding: 10px;
  background: var(--ui-border);
  color: var(--ui-ink);
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 8px;
}

.auth-forgot-resend-btn:hover:not(:disabled) {
  background: var(--ui-border-strong);
}

.auth-forgot-resend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   КНОПКА "ВЕРНУТЬСЯ КО ВХОДУ"
   ============================================================ */
.auth-back-link {
  background: none;
  border: none;
  display: block;
  text-align: center;
  margin-top: 12px;
  color: var(--ui-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s;
  width: 100%;
}

.auth-back-link:hover {
  color: var(--ui-ink);
}
/* frontend/src/components/Navigation/AppNavigation.css */
.navigation {
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.nav-container {
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  width: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   МЕНЮ (СДВИНУТО ВПРАВО)
   ============================================================ */
.nav-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  padding-right: 32px;
}

.nav-menu li {
  display: flex;
  align-items: center;
  height: 70px;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;
  transition: opacity 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-menu li a:hover {
  opacity: 0.8;
}

.nav-menu li.active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ui-surface);
  border-radius: 2px 2px 0 0;
}

/* ============================================================
   🔥 АДМИН-ПУНКТ С ФОНОМ НА ВСЮ ВЫСОТУ ХЕДЕРА
   ============================================================ */
.admin-nav-item {
  height: 70px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.admin-nav-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.admin-nav-item.active {
  background: rgba(255, 255, 255, 0.18);
}

.admin-nav-item a {
  padding: 0 20px !important;
  height: 100% !important;
  display: flex;
  align-items: center;
}

.admin-nav-item.active a::after {
  display: none !important; /* Убираем стандартную полоску */
}

/* ============================================================
   ПРАВАЯ ЧАСТЬ (КНОПКИ)
   ============================================================ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ============================================================
   АВАТАР
   ============================================================ */
.nav-user {
  position: relative;
  display: flex;
  gap: 25px;
  align-items: center;
}

.navigation .avatar-circle {
  width: 100%;
  height: 100%;
  min-width: 0;
  flex-shrink: 0;
  border: 1px solid var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  border-radius: 50%;
}

.avatar-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
  outline: none;
}

.avatar-btn:hover {
  transform: scale(1.05);
}

.avatar-btn:active {
  transform: scale(0.95);
}

.avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
  user-select: none;
}

.avatar-circle:hover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ============================================================
   КНОПКА ВХОДА
   ============================================================ */
.login-btn-nav {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.login-btn-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   DROPDOWN КОНТЕЙНЕР
   ============================================================ */
.dropdown-container {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  min-width: 280px;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   КАРТОЧКА DROPDOWN
   ============================================================ */
.profile-dropdown {
  background: var(--ui-surface);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid var(--ui-subtle);
}

/* ============================================================
   ШАПКА С АВАТАРОМ
   ============================================================ */
.dropdown-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ui-canvas);
}

.dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dropdown-avatar-text {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dropdown-user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-email {
  font-size: 13px;
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-role {
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}

/* ============================================================
   РАЗДЕЛИТЕЛЬ
   ============================================================ */
.dropdown-divider {
  height: 1px;
  background: var(--ui-subtle);
  margin: 0 8px;
}

/* ============================================================
   ПУНКТЫ МЕНЮ
   ============================================================ */
.dropdown-menu {
  padding: 6px 8px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  width: 100%;
  font-size: 14px;
  color: var(--ui-ink);
}

.dropdown-item:hover {
  background: var(--ui-subtle);
}

.dropdown-item.logout:hover {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
}

.dropdown-item.logout .dropdown-item-icon {
  color: var(--ui-danger-text);
}

.dropdown-item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.dropdown-item-text {
  font-weight: 500;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    gap: 8px;
  }

  .nav-menu {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px 0;
    order: 3;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    padding-right: 0;
  }

  .nav-menu li {
    height: auto;
  }

  .nav-menu li a {
    height: auto;
    padding: 4px 8px;
    font-size: 13px;
  }

  /* 🔥 Адаптив для админ-пункта */
  .admin-nav-item {
    height: auto;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0 4px;
  }

  .admin-nav-item a {
    padding: 4px 12px !important;
    height: auto !important;
    font-size: 13px;
  }

  /* Логотип на мобильных — уменьшаем */
  .nav-brand .logo-text {
    font-size: 20px;
  }

  .nav-actions {
    gap: 6px;
  }

  .nav-user {
    gap: 10px;
  }

  .avatar-circle {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .login-btn-nav {
    padding: 6px 16px;
    font-size: 12px;
  }

  .dropdown-container {
    min-width: 240px;
    right: -10px;
  }

  .dropdown-header {
    padding: 12px 16px;
  }

  .dropdown-avatar {
    width: 40px;
    height: 40px;
  }

  .dropdown-avatar-text {
    font-size: 15px;
  }

  .dropdown-user-name {
    font-size: 14px;
  }

  .dropdown-user-email {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  /* Логотип на маленьких экранах — ещё меньше */
  .nav-brand .logo-text {
    font-size: 18px;
  }

  .nav-menu {
    gap: 8px;
  }

  .nav-menu li a {
    font-size: 12px;
    padding: 4px 6px;
  }

  /* 🔥 Адаптив для админ-пункта на маленьких экранах */
  .admin-nav-item {
    border-radius: 6px;
    padding: 0 2px;
  }

  .admin-nav-item a {
    padding: 4px 8px !important;
    font-size: 12px;
  }

  .avatar-circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .login-btn-nav {
    padding: 4px 12px;
    font-size: 11px;
  }

  .dropdown-container {
    min-width: 200px;
    right: -6px;
  }

  .dropdown-user-name {
    font-size: 13px;
  }

  .dropdown-user-email {
    font-size: 11px;
  }

  .dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .dropdown-item-icon {
    font-size: 16px;
    width: 20px;
  }
}
body .navigation .dropdown-container { width: 330px; min-width: 0; max-width: calc(100vw - 32px); top: calc(100% + 12px); right: 0; animation: account-menu-appear .15s ease-out; }
body .profile-dropdown.account-menu { overflow: hidden; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 12px 36px #00000018; }
.account-menu-heading { padding: 20px; border-bottom: 1px solid var(--ui-line); }
.account-menu-actions { display: grid; gap: 4px; padding: 8px; }
body .account-menu .account-menu-action.ui-button { justify-content: flex-start; width: 100%; min-height: 44px; padding: 10px 12px; gap: 12px; border: 0; border-radius: 8px; color: var(--ui-ink); background: transparent; font-size: 14px; text-align: left; }
body .account-menu .account-menu-action.ui-button:hover:not(:disabled) { color: var(--ui-accent-text); background: var(--ui-accent-soft); }
.account-menu-action > svg { flex-shrink: 0; }
.account-menu-arrow { margin-left: auto; color: var(--ui-secondary); }
body .account-menu .account-menu-logout.ui-button { color: var(--ui-danger-text, #b4475e); }
body .account-menu .account-menu-logout.ui-button:hover:not(:disabled) { color: var(--ui-danger-text, #b4475e); background: var(--ui-danger-soft, #b4475e0d); }
.account-menu-error { padding: 0 20px 16px; margin: 0; color: var(--ui-danger-text, #b4475e); font-size: 12px; line-height: 1.6; }
@keyframes account-menu-appear { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body .navigation .dropdown-container { animation: none; } }
.nav-brand-partnership {
  --nav-brand-gap: 14px;
  gap: var(--nav-brand-gap);
  min-width: 0;
  max-width: 100%;
}

.nav-brand-ampersand {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 48px;
  margin-inline-start: calc(-1 * var(--nav-brand-gap) - 8px);
  margin-inline-end: -2px;
  fill: #000;
  transform: rotate(-12deg) skewX(6deg);
  pointer-events: none;
}

.nav-brand-company-logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 160px;
  object-fit: contain;
}

.nav-brand-company-name {
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .navigation:has(.nav-brand-partnership) .nav-container {
    flex-wrap: wrap;
    height: auto;
    min-height: 70px;
    gap: 8px;
    padding-block: 8px;
  }

  .navigation:has(.nav-brand-partnership) .nav-menu {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding: 8px 0 0;
    border-top: 1px solid var(--ui-line);
  }

  .navigation:has(.nav-brand-partnership) .nav-menu li,
  .navigation:has(.nav-brand-partnership) .nav-menu li a {
    height: auto;
  }
}

@media (max-width: 768px) {
  .navigation:has(.nav-brand-partnership) .nav-brand {
    min-width: 0;
    max-width: calc(100% - 88px);
    flex-shrink: 1;
  }

  .nav-brand-partnership { --nav-brand-gap: 8px; }
  .nav-brand-ampersand { width: 30px; height: 40px; }
  .nav-brand-company-logo { height: 40px; max-width: 112px; }
  .nav-brand-company-name { font-size: 15px; }
}

@media (max-width: 480px) {
  .nav-brand-partnership { --nav-brand-gap: 6px; }
  .navigation .nav-brand-partnership .logo-text { font-size: 15px; }
  .nav-brand-ampersand { width: 25px; height: 34px; }
  .nav-brand-company-logo { height: 34px; max-width: 76px; }
  .nav-brand-company-name { font-size: 13px; }
}
/* frontend/src/pages/VerifyEmail/VerifyEmail.css */

.verify-email-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ui-canvas) 0%, var(--ui-accent-soft) 100%);
  padding: 20px;
}

.verify-email-container {
  background: var(--ui-surface);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  max-width: 450px;
  width: 100%;
  text-align: center;
}

.verify-email-container h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-ink);
  margin: 16px 0 8px;
}

.verify-email-container p {
  color: var(--ui-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--ui-border);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

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

.success-icon,
.error-icon {
  font-size: 4rem;
  margin-bottom: 8px;
}

.success-message,
.error-message {
  margin: 8px 0 4px;
}

.success-message {
  color: var(--ui-success-text);
}

.error-message {
  color: var(--ui-danger-text);
}

.email-info {
  margin: 8px 0;
  font-size: 0.9rem;
}

.redirect-text {
  font-size: 0.85rem;
  color: var(--ui-muted);
  margin: 8px 0 16px;
}

.btn-primary {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-secondary {
  display: inline-block;
  padding: 10px 24px;
  background: var(--ui-border);
  color: var(--ui-ink);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--ui-border-strong);
}

.btn-outline {
  display: inline-block;
  padding: 10px 24px;
  background: transparent;
  color: var(--ui-accent);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  border: 2px solid var(--ui-accent);
  transition: all 0.3s;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--ui-action);
  color: white;
}

.error-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 480px) {
  .verify-email-container {
    padding: 24px;
  }
}
/* frontend/src/pages/ResetPassword/ResetPassword.css */

.reset-password-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ui-canvas) 0%, var(--ui-accent-soft) 100%);
  padding: 20px;
}

.reset-password-container {
  background: var(--ui-surface);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  max-width: 420px;
  width: 100%;
}

.reset-password-header {
  text-align: center;
  margin-bottom: 32px;
}

.reset-password-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-ink);
  margin: 0 0 8px;
}

.reset-password-header p {
  color: var(--ui-secondary);
  font-size: 0.95rem;
  margin: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-ink);
}

.form-group input {
  padding: 10px 14px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-group input.error {
  border-color: #ef4444;
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input {
  padding-right: 74px; /* увеличено для текстовой кнопки */
}

/* 🔥 Стили для кнопки показа/скрытия пароля - маленькая и незаметная */
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--ui-muted);
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: lowercase;
}

.toggle-password:hover {
  color: var(--ui-secondary);
  background: var(--ui-subtle);
}

.toggle-password:focus {
  outline: none;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--ui-action) 0%, var(--ui-action) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 0.9rem;
}

.message.error {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
  border: 1px solid var(--ui-danger-border);
}

.message.success {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
  border: 1px solid var(--ui-success-border);
}

.success-content {
  text-align: center;
}

.success-content .success-icon {
  font-size: 4rem;
  margin-bottom: 8px;
}

.success-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ui-ink);
  margin: 0 0 8px;
}

.success-content .success-message {
  font-size: 1.1rem;
  color: var(--ui-success-text);
  font-weight: 500;
}

.success-content .success-hint {
  color: var(--ui-secondary);
  font-size: 0.9rem;
  margin: 8px 0 20px;
}

@media (max-width: 480px) {
  .reset-password-container {
    padding: 24px;
  }
}

/* Добавьте в конец файла */
.redirect-text {
  font-size: 0.85rem;
  color: var(--ui-muted);
  margin: 8px 0 16px;
}

.admin-sidebar { width: 320px; min-width: 320px; padding: 24px 0 24px 24px; display: flex; flex-direction: column; gap: 20px; align-self: flex-start; position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; scrollbar-width: thin; }
.admin-sidebar-header { display: none; }
body .admin-sidebar .sidebar-toggle-btn.ui-button { display: none; }
.sidebar-toggle-btn .toggle-line { width: 20px; height: 2px; border-radius: 2px; background: var(--ui-secondary); }
.admin-sidebar-nav { min-width: 0; }
.admin-sidebar-nav .selection-menu-icon { width: 20px; font-size: 18px; }
@media (max-width: 1024px) { .admin-sidebar { width: 280px; min-width: 280px; padding-left: 16px; } }
@media (max-width: 768px) {
  .admin-sidebar { width: 100%; min-width: 0; padding: 12px 16px; max-height: none; position: static; gap: 12px; }
  .admin-sidebar-header { display: flex; justify-content: flex-end; }
  body .admin-sidebar .sidebar-toggle-btn.ui-button { display: inline-flex; flex-direction: column; gap: 4px; }
  .admin-sidebar:not(.open) .admin-sidebar-nav { display: none; }
}
.admin-heading.admin-heading {
  margin: 0;
  color: var(--gray-900, var(--ui-ink));
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.admin-heading.admin-detail-heading {
  margin: 24px 0 16px;
}

.admin-heading.admin-heading::before,
.admin-heading.admin-heading::after {
  content: none;
}
.admin-page { --bg-white: var(--ui-surface); }
.admin-breadcrumbs { margin-bottom: 20px; }
.admin-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; font-size: 14px; }
.admin-breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.admin-breadcrumbs li + li::before { content: "/"; color: var(--gray-400); }
.admin-breadcrumbs a, .admin-text-link { color: var(--primary); text-decoration: none; }
.admin-breadcrumbs a:hover, .admin-text-link:hover { text-decoration: underline; }
.admin-text-link { background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.admin-editor { width: 100%; background: var(--ui-surface); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.admin-editor .modal-body { overflow: visible; }
.admin-editor .modal-footer { position: static; }
.admin-editor .modal-header { gap: 16px; }
.admin-editor .modal-header .modal-close { display: none; }
.admin-editor .modal-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-editor .form-input, .admin-editor .form-textarea, .admin-editor .form-select { min-width: 0; width: 100%; }
.admin-action-page { padding: 24px; }
.admin-confirm-dialog { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 24px 80px #0004; overflow: auto; }
.admin-confirm-dialog::backdrop { background: rgb(15 23 42 / 50%); }
.admin-confirm-dialog .admin-section-header { margin: 0; }
.admin-confirm-dialog h2 { font-size: 22px; overflow-wrap: anywhere; }
.admin-confirm-dialog .admin-header-actions { margin-top: 24px; }
.admin-confirm-dialog .admin-action-page p { overflow-wrap: anywhere; }
.admin-action-page p { margin: 16px 0; white-space: pre-wrap; }
.admin-page-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-detail-grid > section { padding: 20px; border: 1px solid var(--gray-200); border-radius: 8px; }
.admin-detail-grid dt { color: var(--gray-500); font-size: 13px; margin-top: 12px; }
.admin-detail-grid dd { margin: 4px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-detail-heading { margin: 24px 0 16px; }
.admin-workspace { min-width: 0; }
.admin-header-actions { margin-left: auto; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-editor .modal-header, .admin-editor .admin-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-header-actions .admin-page-actions { margin: 0; }
.entity-tabs { margin-bottom: 24px; }
.entity-panel > .admin-section { padding: 0; border: 0; box-shadow: none; }
.entity-panel > .admin-section:hover { box-shadow: none; }
.entity-panel .admin-section { padding: 0; border: 0; box-shadow: none; margin-bottom: 0; }
.admin-entity-description { white-space: pre-wrap; }
.admin-workspace .config-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.admin-workspace .admin-toolbar-left { order: 3; margin-left: auto; justify-content: flex-end; }
.admin-workspace .admin-toolbar-right { order: 1; }
.admin-workspace .admin-toolbar-spacer { display: none; }
.admin-workspace button.stat-card { cursor: pointer; text-align: left; font: inherit; }
.admin-editor .admin-modal-body { overflow: visible; }
.admin-workspace .bank-form, .admin-workspace .program-form { max-width: none; }
@media (max-width: 700px) {
  .admin-detail-grid, .admin-editor .modal-form-grid { grid-template-columns: 1fr; }
  .admin-editor .modal-body { padding: 16px; }
}
@media (max-width: 768px) {
  .admin-page { flex-direction: column; }
  .admin-page .admin-content { width: 100%; }
}
.admin-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dashboard-section .admin-overview-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 230px; padding: 24px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 1px 3px #00000014; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.dashboard-section .admin-overview-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-hover); }
.admin-overview-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-bottom: 24px; }
.admin-overview-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ui-accent-border); border-radius: 14px; background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.admin-overview-icon svg { width: 24px; height: 24px; }
.admin-overview-arrow { flex-shrink: 0; color: var(--ui-secondary); }
.admin-overview-value { margin-bottom: 8px; color: var(--ui-accent-text); font-size: 36px; font-weight: 650; line-height: 1.15; letter-spacing: -1px; }
.admin-overview-label { color: var(--ui-ink); font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.admin-overview-description { margin-top: 8px; color: var(--ui-secondary); font-size: 13px; line-height: 1.5; }
@container (max-width: 700px) { .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@container (max-width: 400px) { .admin-overview-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .dashboard-section .admin-overview-card { min-height: 210px; padding: 20px; } }
.entity-card,
.admin-editor.entity-editor {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: 0;
  background: var(--ui-surface);
  border: 1px solid var(--gray-200, var(--ui-border));
  border-radius: 12px;
  overflow: hidden;
}

.entity-card-header {
  padding: 24px;
  border-bottom: 1px solid var(--gray-200, var(--ui-border));
}

.entity-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.entity-card-heading > div:first-child { min-width: 0; }
.entity-card-heading .admin-heading { overflow-wrap: anywhere; }
.entity-card-heading p { margin: 8px 0 0; color: var(--gray-500); font-size: 14px; }
.entity-card:is(.offer-detail, .offer-editor) > .entity-card-header .entity-card-heading p {
  color: var(--ui-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.entity-card-status { flex-shrink: 0; }
.entity-card-actions { margin-top: 16px; flex-wrap: wrap; }
.entity-card-body { padding: 24px; }
.entity-editor-tabs { grid-column: 1 / -1; min-width: 0; }
.entity-card-body > .entity-content-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.entity-card-body > .entity-tabs + .entity-content-actions { margin-top: 0; }
.entity-card-body > .offer-card-body { margin-bottom: 24px; }
.entity-editor .entity-card-body > :first-child { margin-top: 0; }
.entity-editor :is(input, textarea, select) { font: inherit; }
.entity-editor fieldset { min-width: 0; }

.entity-editor.entity-editor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--gray-300, var(--ui-border-strong));
  border-radius: 6px;
  background-color: var(--ui-surface);
  color: var(--gray-900, var(--ui-ink));
  font-size: 14px;
}

.entity-editor.entity-editor :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--primary, #6c5ce7);
  outline-offset: 1px;
}

.entity-editor.entity-editor :is(input, textarea, select):disabled {
  background-color: var(--gray-100, #f3f4f6);
  color: var(--gray-500, var(--ui-secondary));
  cursor: not-allowed;
}

.entity-editor :is(.form-label, .admin-modal-label) {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700, #374151);
}

@media (max-width: 768px) {
  .entity-card-header, .entity-card-body { padding: 16px; }
}

/* Entity detail pages: a flat workspace with aligned property rows. */
.entity-card {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: none;
}
.entity-card > .entity-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--ui-border);
}
.entity-card > .entity-card-header .entity-card-heading {
  flex: 1 1 260px;
  justify-content: space-between;
  align-items: flex-start;
}
.entity-card-kind {
  display: block;
  margin-bottom: 6px;
  color: var(--ui-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.entity-card > .entity-card-header .admin-heading {
  margin: 0;
  color: var(--ui-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.3px;
}
.entity-card > .entity-card-header .entity-card-actions {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.entity-card > .entity-card-body { padding: 0 28px 28px; }
.entity-card > .entity-card-body > .entity-tabs { margin-top: 24px; }
.entity-card > .entity-card-header .entity-card-status { padding-top: 4px; }
.entity-card > .entity-card-body > .admin-detail-grid { padding-top: 28px; }
.entity-card.entity-row-layout .admin-detail-grid { grid-template-columns: minmax(0, 1fr); }
.entity-card .admin-detail-grid {
  gap: 28px 40px;
  align-items: start;
}
.entity-card .admin-detail-grid > section {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.entity-card .admin-detail-grid > section > :is(.admin-heading, .entity-detail-title) {
  margin: 0 0 8px;
  padding: 0 0 12px;
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.entity-card .admin-detail-grid dl {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  margin: 0;
}
.entity-card .admin-detail-grid dl > div { display: contents; }
.entity-card .admin-detail-grid dl + dl { margin-top: 20px; }
.entity-card .admin-detail-grid dt,
.entity-card .admin-detail-grid dd {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.entity-card .admin-detail-grid dt { padding-right: 20px; color: var(--ui-secondary); }
.entity-card .admin-detail-grid dd { color: var(--ui-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.entity-card .admin-detail-grid section > p { margin: 0; padding: 13px 0; color: var(--ui-muted); font-size: 13px; line-height: 1.7; }
.entity-card .admin-detail-heading { color: var(--ui-ink); font-size: 15px; font-weight: 600; }
.entity-card .admin-table-wrapper { border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); }
@media (max-width: 1100px) {
  .entity-card > .entity-card-header .entity-card-actions { flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 768px) {
  .entity-card > .entity-card-header { padding: 20px; gap: 16px; }
  .entity-card > .entity-card-body { padding: 0 20px 20px; }
  .entity-card > .entity-card-header .admin-heading { font-size: 20px; }
  .entity-card .entity-card-heading { flex-wrap: nowrap; }
  .entity-card .admin-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 420px) {
  .entity-card .admin-detail-grid dl { grid-template-columns: minmax(0, 1fr); }
  .entity-card .admin-detail-grid dt { padding: 12px 0 0; border: 0; }
  .entity-card .admin-detail-grid dd { padding: 4px 0 12px; }
}
/* frontend/src/pages/Admin/AdminLayout.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   🔥 ОСНОВНОЙ КОНТЕЙНЕР
   ============================================================ */

.admin-section {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.admin-section:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   🔥 ЗАГОЛОВОК СЕКЦИИ
   ============================================================ */

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-section-count { margin-left: auto; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--gray-500); }

.admin-section-header > .admin-list-actions { flex-basis: 100%; margin-top: 8px; }

.admin-section-header h2,
.admin-section-header h3,
.admin-section-header h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-section-header .section-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
}

/* ============================================================
   🔥 ТЕЛО СЕКЦИИ - ОТСТУП СВЕРХУ
   ============================================================ */

.admin-section-body {
  padding-top: 0.25rem;
}

/* 🔥 Дополнительный отступ для первого дочернего элемента,
   чтобы был отступ между заголовком и контентом */

.admin-section-body > *:first-child {
  margin-top: 0.5rem;
}

/* ============================================================
   🔥 ACTION BUTTONS - ОТСТУПЫ
   ============================================================ */

.admin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Отступы между кнопками */

.admin-actions-gap-xs {
  gap: 0.15rem;
}

.admin-actions-gap-sm {
  gap: 0.25rem;
}

.admin-actions-gap-md {
  gap: 0.4rem;
}

.admin-actions-gap-lg {
  gap: 0.6rem;
}

/* По умолчанию (если gap не указан) */

.admin-actions {
  gap: 0.25rem;
}

/* ============================================================
   🔥 ЕДИНЫЕ КНОПКИ
   ============================================================ */

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
  min-width: 36px;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* 🔥 Размеры */

.admin-btn-sm {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  min-height: 28px;
  min-width: 28px;
  border-radius: var(--radius-sm);
}

.admin-btn-xs {
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  min-height: 24px;
  min-width: 24px;
  border-radius: var(--radius-sm);
}

.admin-btn-md {
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
  border-radius: var(--radius-sm);
}

/* 🔥 Primary */

.admin-btn-primary {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-primary);
}

.admin-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

/* 🔥 Danger */

.admin-btn-danger {
  background: var(--danger);
  color: #ffffff;
}

.admin-btn-danger:hover:not(:disabled) {
  background: #b3435b;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}

/* 🔥 Warning */

.admin-btn-warning {
  background: var(--warning);
  color: #ffffff;
}

.admin-btn-warning:hover:not(:disabled) {
  background: #d97706;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transform: translateY(-2px);
}

/* 🔥 Success */

.admin-btn-success {
  background: var(--success);
  color: #ffffff;
}

.admin-btn-success:hover:not(:disabled) {
  background: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
}

/* 🔥 Secondary */

.admin-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.admin-btn-secondary:hover:not(:disabled) {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

/* 🔥 Info */

.admin-btn-info {
  background: var(--info);
  color: #ffffff;
}

.admin-btn-info:hover:not(:disabled) {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}

/* ============================================================
   🔥 ЕДИНЫЕ БЕЙДЖИ СТАТУСОВ
   ============================================================ */

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.4;
}

.admin-badge-success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.admin-badge-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.admin-badge-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.admin-badge-info {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

.admin-badge-gray {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-200);
}

/* ============================================================
   🔥 ЕДИНЫЕ ИНПУТЫ
   ============================================================ */

.admin-input {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-white, #ffffff);
  color: var(--gray-800);
  transition: var(--transition);
  width: 100%;
  min-height: 36px;
}

.admin-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.admin-input::placeholder {
  color: var(--gray-400);
}

.admin-input-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  min-height: 28px;
}

.admin-input-xs {
  padding: 0.1rem 0.3rem;
  font-size: 0.65rem;
  min-height: 24px;
}

.admin-input-number {
  text-align: center;
  -moz-appearance: textfield;
}

.admin-input-number::-webkit-outer-spin-button,
.admin-input-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   🔥 ЕДИНЫЕ SELECT
   ============================================================ */

.admin-select {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-white, #ffffff);
  color: var(--gray-800);
  transition: var(--transition);
  width: 100%;
  min-height: 36px;
  cursor: pointer;
}

.admin-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.admin-select-sm {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  min-height: 28px;
}

/* ============================================================
   🔥 ЕДИНЫЕ ТАБЛИЦЫ
   ============================================================ */

.admin-table-wrapper {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ui-surface);
}

.admin-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table thead {
  background: var(--gray-50);
}

.admin-table th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.admin-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  color: var(--gray-800);
}

.admin-table th,
.admin-table td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table td {
  height: 56px;
}

.admin-table tbody tr {
  transition: var(--transition);
}

.admin-table tbody tr:hover {
  background: var(--gray-50);
}

.admin-table .admin-clickable-row {
  cursor: pointer;
}

.admin-table .admin-clickable-row:focus-visible {
  outline: 2px solid var(--admin-primary, var(--ui-info-text));
  outline-offset: -2px;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .admin-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    min-height: 32px;
  }

  .admin-btn-sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    min-height: 24px;
  }

  .admin-table {
    font-size: 0.75rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 0.35rem 0.5rem;
  }

  .admin-input {
    min-height: 32px;
    font-size: 0.75rem;
  }

  .admin-select {
    min-height: 32px;
    font-size: 0.75rem;
  }
}
.admin-editor.entity-editor.entity-card { padding: 0; border-radius: 12px; box-shadow: none; }
.entity-editor.entity-card > .entity-card-body { padding-top: 24px; }
.entity-editor.entity-card .entity-editor-tabs { margin: 0; }
.entity-editor .entity-card-body > .entity-content-actions { grid-column: 1 / -1; margin: 0 0 24px; justify-content: flex-end; }
.entity-editor .entity-content-actions .ui-button { flex: 0 0 auto; width: auto; }
.entity-editor.entity-card .entity-editor-tabs .entity-tabs { margin: 0 0 24px; }
.entity-editor.entity-card :is(.admin-modal-fields, .modal-form-grid) { gap: 20px 32px; }
.entity-editor.entity-card :is(.admin-modal-field, .form-group) { min-width: 0; }
.entity-editor.entity-card :is(.admin-modal-label, .form-label) { color: var(--ui-secondary); font-size: 13px; font-weight: 400; line-height: 1.6; }
.entity-editor.entity-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  min-height: 40px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-ink);
  background-color: var(--ui-surface);
  font-size: 14px;
}
.entity-editor.entity-card :is(input, textarea, select):disabled { background-color: var(--ui-canvas); color: var(--ui-secondary); }
.entity-editor.entity-card :is(input, textarea, select):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.entity-editor.entity-card :is(.admin-editor-group, .bank-form-section) {
  padding: 0;
  margin: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.entity-editor.entity-card :is(.admin-editor-group-header h3, .bank-form-section > legend) {
  margin: 0 0 16px;
  padding: 0;
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.entity-editor.entity-card .admin-editor-group-header p { color: var(--ui-secondary); font-size: 13px; line-height: 1.7; }
.entity-editor.entity-card .bank-form-section + .bank-form-section { border-top: 1px solid var(--ui-line); padding-top: 24px; }
.entity-editor.entity-card .admin-modal-hint { color: var(--ui-muted); font-size: 12px; font-style: normal; line-height: 1.6; }
@media (max-width: 768px) {
  .entity-editor.entity-card > .entity-card-body { padding-top: 20px; }
  .entity-editor.entity-card :is(.admin-modal-fields, .modal-form-grid) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.entity-editor.entity-card :is(input, textarea, select):is(.error, [aria-invalid="true"]) { border-color: var(--danger); }

.offer-editor-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.offer-editor .entity-card-heading > div:first-child { flex: 1; }
.offer-editor-name > span:first-child { overflow-wrap: anywhere; }
.offer-editor-name-field { display: flex; align-items: center; gap: 8px; width: min(900px, 100%); min-width: 0; }
.entity-editor.entity-card .offer-editor-name input { flex: 1; width: 0; min-width: 0; min-height: 48px; font-size: 18px; padding: 10px 14px; }
.offer-editor-name .form-error { flex-basis: 100%; font-size: 12px; font-weight: 400; }

.entity-editor.entity-card .entity-card-status { padding-top: 0; }
.entity-editor.entity-card.entity-row-layout > .entity-card-body {
  display: block;
}
.entity-editor.entity-card.entity-row-layout .admin-editor-group {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}
.entity-editor.entity-card.entity-row-layout .admin-editor-group-header { margin: 0 0 8px; }
.entity-editor.entity-card.entity-row-layout .admin-editor-group-header h3 {
  margin: 0;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.entity-editor.entity-card.entity-row-layout .admin-modal-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.entity-editor.entity-card.entity-row-layout .admin-modal-field {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
}
.entity-editor.entity-card.entity-row-layout .admin-modal-field > .admin-modal-label {
  padding: 8px 20px 0 0;
  color: var(--ui-secondary);
  font-size: 13px;
  font-weight: 400;
}
.entity-editor.entity-card.entity-row-layout .admin-modal-field > .admin-modal-input {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
}
.entity-editor.entity-card.entity-row-layout textarea.admin-modal-input { min-height: 68px; resize: vertical; }
.entity-editor.entity-card.entity-row-layout .admin-modal-hint { grid-column: 2; margin-top: 6px; }
.entity-editor.entity-card.entity-row-layout .complex-tab-panel:not([hidden]) { display: block; }
.entity-editor.entity-card.entity-row-layout .complex-tab-panel > :is(.payment-terms-in-modal, .promotions-in-modal, .special-offers-in-modal) {
  margin-bottom: 28px;
  padding-top: 0;
  border: 0;
}
.entity-editor.entity-card.entity-row-layout :is(.apartment-types-header, .payment-terms-header, .promotions-header, .special-offers-header) h4 { font-size: 14px; }
.entity-editor.entity-card.entity-row-layout .apartment-type-row { grid-template-columns: minmax(0, 1fr); }
.entity-editor.entity-card.entity-row-layout .apartment-type-row > .type-field:not(.type-actions) {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
}
.entity-editor.entity-card.entity-row-layout .type-field > span { padding: 8px 20px 0 0; }
@media (max-width: 480px) {
  .entity-editor.entity-card.entity-row-layout :is(.admin-modal-field, .apartment-type-row > .type-field:not(.type-actions)) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .entity-editor.entity-card.entity-row-layout .admin-modal-field > :is(.admin-modal-input, .admin-modal-hint) { grid-column: 1; }
  .entity-editor.entity-card.entity-row-layout :is(.admin-modal-field > .admin-modal-label, .type-field > span) { padding: 0; }
}
.entity-editor.entity-card .entity-card-status select { width: auto; min-width: 150px; margin: 0; font-size: 13px; }
@media (max-width: 420px) { .entity-editor.entity-card .entity-card-heading { flex-wrap: wrap; } }

.offer-editor-zones { display: grid; gap: 28px; }
.entity-editor.entity-card .offer-editor-zone { min-width: 0; padding: 0 0 24px; border-bottom: 1px solid var(--ui-line, var(--ui-border)); }
.entity-editor.entity-card .offer-editor-zone:last-child { padding-bottom: 0; border-bottom: 0; }
.entity-editor.entity-card .offer-editor-zone > .entity-detail-title { margin: 0 0 18px; color: var(--ui-ink); font-size: 15px; font-weight: 600; }
.entity-editor.entity-card .offer-editor-zone-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.offer-editor-zone-fields:disabled .checkbox-label { color: var(--ui-secondary); cursor: not-allowed; }

.offer-editor-zones {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 40px;
}
.offer-editor-zones > .offer-editor-zone { grid-column: 1 / -1; }
.offer-editor-zones > .offer-editor-identity { grid-column: 1; align-self: stretch; }
.offer-editor-zones > .offer-editor-limits { grid-column: 2; align-self: stretch; }
.entity-editor.entity-card .offer-editor-identity > .offer-editor-zone-fields { grid-template-columns: minmax(0, 1fr); }
.offer-editor-identity .checkbox-group { flex-direction: column; align-items: flex-start; }
.entity-editor.entity-card .bank-locked { background: var(--ui-canvas); color: var(--ui-secondary); }
.entity-editor.entity-card .bank-locked-name { color: inherit; }
.entity-editor.entity-card .offer-editor-limits > .offer-editor-zone-fields { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 768px) {
  .offer-editor-zones { grid-template-columns: minmax(0, 1fr); }
  .offer-editor-zones > .offer-editor-limits { grid-column: 1; }
}

.offer-editor-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--ui-warning-border);
  border-radius: 8px;
  background: var(--ui-warning-soft);
  color: var(--ui-warning-text);
  font-size: 13px;
  line-height: 1.6;
}
.entity-editor.entity-card .offer-editor-zone-fields :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select),
.entity-editor.entity-card .bank-locked {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 22px;
}
.entity-editor.entity-card .bank-locked-icon { flex-shrink: 0; font-size: 16px; line-height: 22px; }
.entity-editor.entity-card .bank-locked-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.entity-editor.entity-card .bank-locked-badge { flex-shrink: 0; }
/* frontend/src/pages/Admin/sections/offers/components/OfferModal.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   МОДАЛЬНОЕ ОКНО
   ============================================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   ХЕДЕР
   ============================================================ */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* ============================================================
   ФОРМА
   ============================================================ */

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-label.required::after {
  content: " *";
  color: var(--danger);
}

.form-label-sm {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* ============================================================
   ПОЛЯ ВВОДА
   ============================================================ */

.form-input,
.form-select,
.form-textarea {
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: var(--transition);
  font-family: inherit;
  background: var(--bg-white);
  color: var(--gray-800);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-input:disabled {
  background: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-input.error,
.form-select.error {
  border-color: var(--danger);
}

.form-input.error:focus,
.form-select.error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.form-error {
  font-size: 0.75rem;
  color: var(--danger);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-style: italic;
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

/* ============================================================
   ПОЛЯ С КНОПКОЙ ДЕЙСТВИЯ
   ============================================================ */

.field-with-action {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.field-with-action-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-with-action-right {
  flex-shrink: 0;
  padding-bottom: 2px;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: var(--transition);
  white-space: nowrap;
  min-height: 40px;
}

.action-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.action-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.action-btn.active:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ============================================================
   ЗАБЛОКИРОВАННОЕ ПОЛЕ БАНКА
   ============================================================ */

.bank-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: not-allowed;
  min-height: 40px;
}

.bank-locked-icon {
  font-size: 1.2rem;
}

.bank-locked-name {
  flex: 1;
  font-weight: 500;
  color: var(--gray-800);
}

.bank-locked-badge {
  font-size: 0.8rem;
  color: var(--gray-500);
  opacity: 0.6;
}

/* ============================================================
   ЧЕКБОКСЫ
   ============================================================ */

.form-checkboxes {
  grid-column: 1 / -1;
}

.checkbox-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ============================================================
   ЖИЛЫЕ КОМПЛЕКСЫ
   ============================================================ */

.complexes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  align-items: center;
}

.complexes-grid .checkbox-label {
  padding: 4px 12px;
  background: var(--gray-100);
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.complexes-grid .checkbox-label:hover {
  background: var(--gray-200);
}

.complexes-grid .checkbox-label.checked {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.complexes-selected-count {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8rem;
}

.complexes-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 1rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.complexes-empty p {
  margin: 0;
}

/* Кнопка "Выбрать все" */

.complexes-grid .checkbox-label-all {
  background: var(--primary-bg);
  border: 1px dashed var(--primary);
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  font-family: inherit;
}

.complexes-grid .checkbox-label-all:hover {
  background: var(--ui-info-soft);
  border-style: solid;
  border-color: var(--primary);
}

.complexes-grid .checkbox-label-all.checked {
  background: var(--primary);
  color: white;
  border-style: solid;
  border-color: var(--primary);
}

.complexes-grid .checkbox-label-all.checked:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.select-all-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.select-all-text {
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ============================================================
   🔥 БЕЙДЖИ ОФФЕРА (с drag-and-drop)
   ============================================================ */

.badges-in-modal {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.badges-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.badges-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.badges-input .form-input {
  flex: 1;
}

.badges-input .admin-btn {
  min-width: 100px;
  height: 38px;
}

.badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
  padding: 0.25rem;
  margin-bottom: 0.75rem;
}

.badges-list::-webkit-scrollbar {
  width: 6px;
}

.badges-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.badges-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.badges-list::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* 🔥 Элемент бейджа — теперь draggable */

.badge-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: var(--primary-bg);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--primary);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s,
    opacity 0.15s;
  cursor: grab;
  user-select: none;
}

.badge-item:hover {
  background: var(--ui-info-soft);
}

.badge-item:active {
  cursor: grabbing;
}

/* 🔥 Drag handle */

.badge-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  opacity: 0.55;
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  transition: var(--transition);
  user-select: none;
}

.badge-item:hover .badge-drag-handle {
  opacity: 1;
}

.badge-item:active .badge-drag-handle {
  cursor: grabbing;
}

/* 🔥 Порядковый номер */

.badge-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--primary);
  color: white;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.badge-text {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
}

.badge-item:active .badge-text {
  cursor: grabbing;
}

/* 🔥 Состояние: перетаскиваем */

.badge-item.dragging {
  opacity: 0.4;
  transform: scale(0.95);
  cursor: grabbing;
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.3);
}

/* 🔥 Состояние: цель перетаскивания */

.badge-item.drag-over {
  border-color: var(--primary-dark, var(--ui-info-text));
  background: var(--ui-info-border);
  box-shadow: 0 0 0 3px var(--primary-bg);
  transform: scale(1.03);
}

.badge-remove {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: var(--transition);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.badge-remove:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-bg);
}

.badge-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.badges-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 0.75rem;
  font-size: 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
  margin-bottom: 0.75rem;
}

.badges-empty p {
  margin: 0;
}

.badges-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gray-200);
}

.presets-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-right: 0.25rem;
}

.badge-preset-btn {
  padding: 0.25rem 0.6rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 9999px;
  font-size: 0.75rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.badge-preset-btn:hover:not(:disabled) {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.badge-preset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ============================================================
   🔥 ПАРАМЕТРЫ КРЕДИТА
   ============================================================ */

.loan-params-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

/* ============================================================
   РАЗДЕЛИТЕЛЬ
   ============================================================ */

.modal-divider {
  border-top: 1px solid var(--gray-200);
  margin: 20px 0;
}

/* ============================================================
   ФУТЕР
   ============================================================ */

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}

/* ============================================================
   МЕТОД РАСЧЕТА СУБСИДИИ
   ============================================================ */

.subsidy-method-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.radio-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--gray-50);
}

.radio-label:hover {
  border-color: var(--gray-300);
  background: var(--gray-100);
}

.radio-label input[type="radio"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.radio-label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-800);
}

.radio-description {
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.4;
}

/* ============================================================
   FULLSCREEN MODAL
   ============================================================ */

.modal-overlay.modal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 0;
  animation: fadeIn 0.25s ease-out;
}

.modal-content.modal-fullscreen-content {
  background: var(--gray-50);
  border-radius: 0;
  width: 100%;
  height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}

.modal-content.modal-fullscreen-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.modal-content.modal-fullscreen-content .modal-header h2:not(.admin-heading) {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
}

.modal-content.modal-fullscreen-content .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.modal-content.modal-fullscreen-content .modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.modal-content.modal-fullscreen-content .modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--gray-50);
}

.modal-content.modal-fullscreen-content .modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--bg-white);
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.modal-content.modal-fullscreen-content .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 32px;
  background: var(--bg-white);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .modal-content {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-md);
  }

  .modal-form-grid {
    grid-template-columns: 1fr;
  }

  .modal-header {
    padding: 16px;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    padding: 12px 16px;
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }

  .field-with-action {
    flex-direction: column;
    align-items: stretch;
  }

  .field-with-action-right {
    padding-bottom: 0;
  }

  .action-btn {
    width: 100%;
    text-align: center;
  }

  .checkbox-group {
    flex-direction: column;
    gap: 8px;
  }

  .complexes-grid .checkbox-label {
    padding: 2px 10px;
    font-size: 0.8rem;
  }

  .bank-locked {
    padding: 6px 10px;
    min-height: 36px;
  }

  .modal-content.modal-fullscreen-content .modal-header {
    padding: 12px 16px;
  }

  .modal-content.modal-fullscreen-content .modal-header h2 {
    font-size: 1rem;
  }

  .modal-content.modal-fullscreen-content .modal-body {
    padding: 16px;
  }

  .modal-content.modal-fullscreen-content .modal-form-grid {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }

  .modal-content.modal-fullscreen-content .modal-footer {
    padding: 12px 16px;
    flex-direction: column;
  }

  .modal-content.modal-fullscreen-content .modal-footer button {
    width: 100%;
  }

  .radio-label {
    padding: 10px 12px;
  }

  .radio-title {
    font-size: 0.85rem;
  }

  .radio-description {
    font-size: 0.75rem;
  }

  .loan-params-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .badges-input {
    flex-direction: column;
    align-items: stretch;
  }

  .badges-input .admin-btn {
    width: 100%;
    min-width: unset;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 10px;
  }

  .modal-content.modal-fullscreen-content .modal-body {
    padding: 8px;
  }

  .modal-content.modal-fullscreen-content .modal-form-grid {
    padding: 12px;
  }

  .loan-params-grid {
    grid-template-columns: 1fr;
  }
}

.offer-complexes-editor:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-complexes-editor > p { margin: 0; line-height: 1.5; }

.offer-complexes-editor > .form-group { margin: 0; gap: 16px; }

.offer-complexes-editor .form-group > .admin-heading { margin-top: 8px; }

.offer-complexes-editor .complexes-empty { margin: 0; }

.offer-complexes-selection-count { display: flex; gap: 12px; align-items: center; }

.offer-complexes-selection-count > span { font-variant-numeric: tabular-nums; }

.offer-complexes-selection-table .offer-complexes-checkbox-column { width: 48px; }

.offer-complexes-selection-table :is(th, td):first-child { text-align: center; }

.offer-complexes-selection-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; }

.offer-complexes-selection-table td > label { display: block; margin: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }

.offer-complexes-selection-table tr.is-selected { background: var(--gray-50); }
.bank-form {
  --bg-white: var(--ui-surface);
  background: var(--ui-surface);
}

.bank-form .bank-fields,
.bank-form .bank-fields-container {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.bank-form .bank-form-section {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin: 0 0 24px;
  padding: 16px;
  min-width: 0;
  background-color: var(--ui-surface);
}
.bank-form legend {
  color: var(--gray-800);
  font-weight: 600;
  padding: 0 8px;
}
.bank-program-options { display: grid; }
.bank-program-option { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ui-line, var(--ui-border)); color: var(--ui-ink); font-size: 14px; cursor: pointer; }
.bank-program-option input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--ui-accent); }
.bank-program-option small { color: var(--ui-muted); font-size: 12px; }
.bank-program-option:has(input:disabled) { cursor: default; opacity: .65; }
.bank-form .modal-header,
.bank-form .modal-footer {
  flex-shrink: 0;
}
.bank-form textarea {
  resize: vertical;
}
@media (max-width: 640px) {
  .bank-form .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .bank-form .modal-body {
    padding: 12px;
  }
}
.bank-logo-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-canvas);
}
.bank-logo-preview { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bank-logo-preview .bank-icon { width: 72px; height: 72px; font-size: 32px; }
.bank-logo-preview > span:last-child { max-width: 240px; overflow-wrap: anywhere; color: var(--ui-ink); font-weight: 600; }
.bank-logo-controls { flex: 1 1 280px; min-width: 0; }
.bank-logo-title { margin: 0 0 6px; color: var(--ui-ink); font-size: 14px; font-weight: 600; }
.bank-logo-hint { margin: 0 0 16px; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
.bank-logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bank-logo-controls .loader-inline { margin-top: 12px; }
.bank-logo-controls .form-error { margin: 12px 0 0; }

.bank-form.entity-editor.entity-card .bank-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 40px;
  align-items: start;
}
.bank-form.entity-editor.entity-card .bank-fields > .bank-form-section {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}
.bank-form.entity-editor.entity-card .modal-form-grid > .form-group > small { grid-column: 1; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.bank-form.entity-editor.entity-card .modal-form-grid > .form-group:has(> small) > input { grid-column: 2; grid-row: 1 / 3; }
.bank-form.entity-editor.entity-card .bank-form-section > legend {
  margin-bottom: 8px;
  padding-bottom: 12px;
}
.bank-form.entity-editor.entity-card .bank-form-section .modal-form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.bank-form.entity-editor.entity-card .modal-form-grid > .form-group {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
}
.bank-form.entity-editor.entity-card .modal-form-grid > .form-group > .form-label {
  padding: 8px 20px 0 0;
}
.bank-form.entity-editor.entity-card .modal-form-grid > .form-group > :is(input, textarea, select, .form-select) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.bank-form.entity-editor.entity-card .bank-fields.bank-fields-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 768px) {
  .bank-form.entity-editor.entity-card .bank-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .bank-form.entity-editor.entity-card .modal-form-grid > .form-group:has(> small) > input { grid-column: 1; grid-row: auto; }
  .bank-logo-upload { padding: 16px; gap: 20px; }
  .bank-form.entity-editor.entity-card .modal-form-grid > .form-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .bank-form.entity-editor.entity-card .modal-form-grid > .form-group > .form-label {
    padding: 0;
  }
}
.directory-view-switch { display: inline-flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-canvas); }
.admin-drag-handle.admin-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--gray-400, var(--ui-muted));
  font: inherit;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.admin-drag-handle.admin-drag-handle:hover:not(:disabled) { color: var(--primary); background: var(--gray-100); }
.admin-drag-handle.admin-drag-handle:active { cursor: grabbing; }
.admin-drag-handle.admin-drag-handle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.admin-drag-handle.admin-drag-handle:disabled { opacity: .5; cursor: wait; }
.admin-drag-handle > span { pointer-events: none; }
.reorder-hint { color: var(--gray-500); font-size: 13px; margin-bottom: 8px; }
.reorder-status { min-height: 20px; margin: 0 0 8px; color: var(--gray-600); font-size: 13px; }
.reorder-status:empty { min-height: 0; height: 0; margin: 0; }
.reorder-position { white-space: nowrap; }
.reorder-handle { margin-right: 8px; }
.reorder-table tr.is-dragging { opacity: .5; }
.reorder-table tr.is-drop-target td { background: var(--primary-bg); box-shadow: inset 0 2px var(--primary); }
body .ui-button.admin-icon-button[data-size="icon"] {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  flex-shrink: 0;
}
.field-lock { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--ui-accent-border); border-radius: 6px; background: var(--ui-accent-soft); color: var(--ui-accent-text); vertical-align: middle; }
.field-lock svg { display: block; flex-shrink: 0; }
/* frontend/src/pages/Admin/sections/offers/components/DynamicRatesForm.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

.dynamic-form {
  min-width: 0;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: 0;
}

.dynamic-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dynamic-form-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dynamic-form-header h4::before {
  content: "📊";
  font-size: 1.1rem;
}

.dynamic-form .admin-table-wrapper {
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  overflow: auto;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.dynamic-form .admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 1000px;
}

.dynamic-form .admin-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  background: var(--gray-50);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dynamic-form .admin-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

/* 🔥 Стили для drag-and-drop */

.dynamic-form .admin-table tbody tr {
  transition:
    background-color 0.2s,
    transform 0.2s;
  user-select: none;
  cursor: default !important;
}

.dynamic-form .admin-table tbody tr:hover {
  background-color: var(--gray-50);
}

.dynamic-form .admin-table tbody tr:active {
  cursor: default !important;
}

.dynamic-form .admin-table tbody tr.dragging {
  opacity: 0.5;
  background-color: var(--gray-200);
}

.dynamic-form .admin-table tbody tr.drag-over {
  border-bottom: 2px solid var(--primary);
  background-color: var(--primary-bg);
}

.dynamic-form .admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* 🔥 Drag handle */

.drag-handle {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--gray-400);
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  background: transparent;
}

.drag-handle:hover {
  color: var(--gray-600);
  background: var(--gray-100);
}

.drag-handle:active {
  cursor: grabbing;
  background: var(--gray-200);
  color: var(--gray-800);
}

/* 🔥 Поля ввода */

.dynamic-form .admin-table input,
.dynamic-form .admin-table select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-white);
  width: 100%;
  transition: var(--transition);
  color: var(--gray-800);
  min-height: 36px;
}

.dynamic-form .admin-table input:focus,
.dynamic-form .admin-table select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.dynamic-form .admin-table input::placeholder {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.dynamic-form .admin-table input[type="number"] {
  -moz-appearance: textfield;
}

.dynamic-form .admin-table input[type="number"]::-webkit-outer-spin-button,
.dynamic-form .admin-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 🔥 Стили для номера строки */

.dynamic-form .admin-table .row-number {
  text-align: center;
  font-weight: 600;
  color: var(--gray-500);
  font-size: 0.8rem;
  min-width: 30px;
}

/* ❌ УДАЛЯЕМ ВСЕ ПЕРЕОПРЕДЕЛЕНИЯ КНОПОК */

/* Они будут использоваться из AdminLayout.css */

/* 🔥 Кнопка дублирования - оставляем только кастомные стили */

.admin-btn-duplicate {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.admin-btn-duplicate:hover {
  background: var(--ui-info-soft);
  border-color: var(--ui-info-border);
}

.admin-btn-duplicate.admin-btn-xs {
  padding: 0.15rem 0.35rem;
  font-size: 0.65rem;
  min-width: 28px;
  min-height: 28px;
}

/* 🔥 Пустое состояние */

.dynamic-form .empty-state {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.dynamic-form .empty-state p {
  margin: 0;
}

.dynamic-form .empty-state .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================
   🔥 РЕЖИМ ПРОСМОТРА
   ============================================================ */

.admin-table.view-mode tbody tr {
  cursor: default !important;
}

.admin-table.view-mode tbody tr:hover {
  background-color: var(--gray-50);
}

.admin-table.view-mode td {
  padding: 0.6rem 0.8rem;
}

/* Значения в режиме просмотра */

.view-value {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid var(--gray-100);
  min-width: 40px;
}

.view-empty {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  color: var(--gray-400);
  font-style: italic;
  font-size: 0.8rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-200);
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {


  .dynamic-form-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dynamic-form .admin-table {
    font-size: 0.75rem;
    min-width: 750px;
  }

  .dynamic-form .admin-table th {
    padding: 0.4rem 0.5rem;
    font-size: 0.6rem;
  }

  .dynamic-form .admin-table td {
    padding: 0.3rem 0.4rem;
  }

  .dynamic-form .admin-table input,
  .dynamic-form .admin-table select {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    min-height: 32px;
  }

  .drag-handle {
    font-size: 1rem;
    padding: 3px 6px;
  }

  .view-value,
  .view-empty {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
}

@media (max-width: 480px) {


  .dynamic-form .admin-table {
    font-size: 0.65rem;
    min-width: 650px;
  }

  .dynamic-form .admin-table th {
    padding: 0.3rem 0.35rem;
    font-size: 0.55rem;
  }

  .dynamic-form .admin-table td {
    padding: 0.2rem 0.25rem;
  }

  .dynamic-form .admin-table input,
  .dynamic-form .admin-table select {
    padding: 0.2rem 0.3rem;
    font-size: 0.65rem;
    min-height: 28px;
  }

  .drag-handle {
    font-size: 0.9rem;
    padding: 2px 4px;
  }

  .view-value,
  .view-empty {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
}
/* frontend/src/pages/Admin/sections/offers/components/DynamicSubsidiesForm.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

.dynamic-form {
  min-width: 0;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: 0;
}

.dynamic-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dynamic-form-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dynamic-form-header h4::before {
  content: "💰";
  font-size: 1.1rem;
}

.dynamic-form .admin-table-wrapper {
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  overflow: auto;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.dynamic-form .admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 1000px;
}

.dynamic-form .admin-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  background: var(--gray-50);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dynamic-form .admin-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

/* 🔥 Стили для drag-and-drop */

.dynamic-form .admin-table tbody tr {
  transition:
    background-color 0.2s,
    transform 0.2s;
  user-select: none;
  cursor: default !important;
}

.dynamic-form .admin-table tbody tr:hover {
  background-color: var(--gray-50);
}

.dynamic-form .admin-table tbody tr:active {
  cursor: default !important;
}

.dynamic-form .admin-table tbody tr.dragging {
  opacity: 0.5;
  background-color: var(--gray-200);
}

.dynamic-form .admin-table tbody tr.drag-over {
  border-bottom: 2px solid var(--primary);
  background-color: var(--primary-bg);
}

.dynamic-form .admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* 🔥 Drag handle */

.drag-handle {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--gray-400);
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  background: transparent;
}

.drag-handle:hover {
  color: var(--gray-600);
  background: var(--gray-100);
}

.drag-handle:active {
  cursor: grabbing;
  background: var(--gray-200);
  color: var(--gray-800);
}

/* 🔥 Поля ввода */

.dynamic-form .admin-table input,
.dynamic-form .admin-table select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-white);
  width: 100%;
  transition: var(--transition);
  color: var(--gray-800);
  min-height: 36px;
}

.dynamic-form .admin-table input:focus,
.dynamic-form .admin-table select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.dynamic-form .admin-table input::placeholder {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.dynamic-form .admin-table input[type="number"] {
  -moz-appearance: textfield;
}

.dynamic-form .admin-table input[type="number"]::-webkit-outer-spin-button,
.dynamic-form .admin-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 🔥 Стили для номера строки */

.dynamic-form .admin-table .row-number {
  text-align: center;
  font-weight: 600;
  color: var(--gray-500);
  font-size: 0.8rem;
  min-width: 30px;
}

/* ❌ УДАЛЯЕМ ВСЕ ПЕРЕОПРЕДЕЛЕНИЯ КНОПОК */

/* Они будут использоваться из AdminLayout.css */

/* 🔥 Кнопка дублирования - оставляем только кастомные стили */

.admin-btn-duplicate {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.admin-btn-duplicate:hover {
  background: var(--ui-info-soft);
  border-color: var(--ui-info-border);
}

.admin-btn-duplicate.admin-btn-xs {
  padding: 0.15rem 0.35rem;
  font-size: 0.65rem;
  min-width: 28px;
  min-height: 28px;
}

/* 🔥 Пустое состояние */

.dynamic-form .empty-state {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.dynamic-form .empty-state p {
  margin: 0;
}

.dynamic-form .empty-state .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================
   🔥 РЕЖИМ ПРОСМОТРА
   ============================================================ */

.admin-table.view-mode tbody tr {
  cursor: default !important;
}

.admin-table.view-mode tbody tr:hover {
  background-color: var(--gray-50);
}

.admin-table.view-mode td {
  padding: 0.6rem 0.8rem;
}

/* Значения в режиме просмотра */

.view-value {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid var(--gray-100);
  min-width: 40px;
}

.view-empty {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  color: var(--gray-400);
  font-style: italic;
  font-size: 0.8rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-200);
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {


  .dynamic-form-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dynamic-form .admin-table {
    font-size: 0.75rem;
    min-width: 750px;
  }

  .dynamic-form .admin-table th {
    padding: 0.4rem 0.5rem;
    font-size: 0.6rem;
  }

  .dynamic-form .admin-table td {
    padding: 0.3rem 0.4rem;
  }

  .dynamic-form .admin-table input,
  .dynamic-form .admin-table select {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    min-height: 32px;
  }

  .drag-handle {
    font-size: 1rem;
    padding: 3px 6px;
  }

  .view-value,
  .view-empty {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
}

@media (max-width: 480px) {


  .dynamic-form .admin-table {
    font-size: 0.65rem;
    min-width: 650px;
  }

  .dynamic-form .admin-table th {
    padding: 0.3rem 0.35rem;
    font-size: 0.55rem;
  }

  .dynamic-form .admin-table td {
    padding: 0.2rem 0.25rem;
  }

  .dynamic-form .admin-table input,
  .dynamic-form .admin-table select {
    padding: 0.2rem 0.3rem;
    font-size: 0.65rem;
    min-height: 28px;
  }

  .drag-handle {
    font-size: 0.9rem;
    padding: 2px 4px;
  }

  .view-value,
  .view-empty {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
}
.condition-mode-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.condition-mode-switch > span { color: var(--ui-secondary); font-size: 13px; }
.condition-mode-switch > .is-selected { color: var(--ui-ink); font-weight: 600; }
.condition-mode-track { position: relative; flex-shrink: 0; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 999px; background: var(--ui-border-strong); cursor: pointer; transition: background .2s ease; }
.condition-mode-track[aria-checked="true"] { background: var(--ui-action); }
.condition-mode-thumb { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--ui-surface); box-shadow: 0 1px 4px #0003; transition: transform .2s ease; }
.condition-mode-track[aria-checked="true"] .condition-mode-thumb { transform: translateX(20px); }
.condition-mode-track:disabled { opacity: .5; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .condition-mode-track, .condition-mode-thumb { transition: none; } }
.complexes-table .complexes-table-empty {
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
}

/* frontend/src/pages/Admin/sections/offers/components/OfferCard.css */
/* frontend/src/pages/Admin/admin-variables.css */
:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */
.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}
.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}
.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}
/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */
.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}
/* One spacing value for action groups; navigation tabs keep their own layout. */
.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}
.offer-linked-complexes:not([hidden]) {
  display: grid;
  gap: 24px;
}
.offer-linked-complexes > p { margin: 0; }
.offer-linked-complexes .admin-heading.admin-detail-heading {
  margin: 0 0 12px;
}
.admin-detail-grid.offer-conditions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.offer-conditions-grid > section {
  grid-column: 1 / -1;
}
.offer-conditions-grid > .offer-conditions-identity {
  grid-column: 1;
}
.offer-conditions-grid > .offer-conditions-limits {
  grid-column: 2;
}
.offer-badges-row.offer-detail-badges {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.offer-empty-badges {
  color: var(--ui-secondary);
  font-size: 13px;
}
@media (max-width: 768px) {
  .admin-detail-grid.offer-conditions-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-conditions-grid > .offer-conditions-limits {
    grid-column: 1;
  }
}
.offer-card {
  background: var(--ui-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--ui-subtle);
  transition: all 0.2s;
  padding: 0.75rem 1rem;
}
.offer-card:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.offer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.offer-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.offer-card-title .offer-program-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ui-ink);
}
.offer-card-actions {
  display: flex;
  gap: 0.25rem;
}
.offer-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* 🔥 Верхняя часть с деталями */
.offer-details-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.25rem 1rem;
}
/* 🔥 Строка с ЖК внизу */
.offer-complexes-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--ui-border);
  flex-wrap: wrap;
}
.offer-complexes-row .detail-label {
  color: var(--ui-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  min-width: 40px;
}
.offer-complexes-row .complexes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--ui-ink);
}
/* 🔥 Описание */
.offer-description {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.25rem;
  font-size: 0.85rem;
}
.offer-description .detail-label {
  color: var(--ui-secondary);
  font-weight: 500;
  min-width: 70px;
}
.offer-description .detail-value {
  color: var(--ui-ink);
}
.offer-detail-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.offer-detail-item .detail-label {
  color: var(--ui-secondary);
  font-weight: 500;
  min-width: 70px;
}
.offer-detail-item .detail-value {
  color: var(--ui-ink);
  font-weight: 500;
}
.offer-card-footer {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ui-subtle);
}
.dynamic-info {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.dynamic-info .dynamic-label {
  color: var(--ui-secondary);
}
.dynamic-info .dynamic-value {
  color: var(--ui-ink);
  font-weight: 500;
}
/* Статусы */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 500;
}
.status-badge.active {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
}
.status-badge.inactive {
  background: var(--ui-danger-soft);
  color: var(--ui-danger-text);
}
/* Субсидии */
.subsidy-cell {
  min-width: 80px;
}
.subsidy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.subsidy-fixed {
  background: var(--ui-success-soft);
  color: var(--ui-success-text);
}
.subsidy-dynamic {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
}
.subsidy-none {
  background: var(--ui-subtle);
  color: var(--ui-muted);
}
.subsidy-dynamic-icon {
  font-size: 0.6rem;
}
/* Ставки */
.rate-cell {
  font-size: 0.85rem;
}
.rate-static-container {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.rate-main {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ui-ink);
}
.rate-short {
  font-size: 0.75rem;
  color: var(--ui-success-text);
  font-weight: 600;
}
.rate-two {
  font-size: 0.75rem;
  color: var(--ui-accent-hover);
  font-weight: 600;
}
.rate-dynamic-container {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.rate-dynamic-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
}
.rate-dynamic-value {
  font-weight: 700;
  color: var(--ui-ink);
}
.rate-dynamic-condition {
  color: var(--ui-secondary);
  font-size: 0.65rem;
}
@media (max-width: 768px) {
  .offer-details-top {
    grid-template-columns: 1fr 1fr;
  }

  .offer-detail-item {
    font-size: 0.75rem;
  }

  .offer-detail-item .detail-label {
    min-width: 60px;
  }

  .offer-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .offer-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .offer-complexes-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}
@media (max-width: 480px) {
  .offer-details-top {
    grid-template-columns: 1fr;
  }

  .offer-complexes-row .complexes-list {
    font-size: 0.7rem;
  }
}
/* ============================================================
   🔥 БЕЙДЖИ ОФФЕРА
   ============================================================ */
.offer-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--ui-border);
}
.offer-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--ui-accent-border);
  white-space: nowrap;
}
/* frontend/src/pages/Admin/sections/offers/OffersSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

.offers-directory-group-heading { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }

.offers-directory-group-heading .admin-detail-heading { margin: 0; }

.offers-directory-group-heading > span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 8px; border-radius: 8px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 12px; font-weight: 600; }

.offers-children-group + .offers-children-group { margin-top: 20px; }

.offers-children-group-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }

.offers-children-group-heading .offers-children-heading { font-size: 14px; color: var(--ui-secondary); }

.offers-children-group-heading > span { color: var(--ui-muted); font-size: 12px; }

.offers-directory-table .admin-table-wrapper { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 14px; }

.offers-directory-table .admin-table { min-width: 1080px; table-layout: fixed; }

.offers-directory-table .admin-table th { padding: 13px 16px; background: var(--ui-canvas); color: var(--ui-secondary); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.offers-directory-table .admin-table th:first-child { width: 70px; }

.offers-directory-table .admin-table th:nth-child(2) { width: 250px; }

.offers-directory-table .admin-table th:nth-child(3) { width: 155px; }

.offers-directory-table .admin-table th:nth-child(4) { width: 155px; }

.offers-directory-table .admin-table th:nth-child(5) { width: 105px; }

.offers-directory-table .admin-table th:nth-child(6) { width: 195px; }

.offers-directory-table .admin-table th:nth-child(7) { width: 150px; }

.offers-directory-table .admin-table td { height: auto; padding: 16px; vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.5; }

.offers-directory-table .admin-table td.reorder-position { vertical-align: middle; white-space: nowrap; }

.offer-table-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; overflow-wrap: anywhere; }

.offer-table-title { color: var(--ui-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }

.offer-table-secondary { color: var(--ui-secondary); font-size: 12px; line-height: 1.6; }

.offer-table-secondary b { color: var(--ui-ink); font-weight: 500; }

.offer-table-date, .offer-table-caption { color: var(--ui-muted); font-size: 11px; }

.offer-table-number { color: var(--ui-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.offer-table-value-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; }

.offer-table-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.offer-table-tags > span { padding: 2px 7px; border: 1px solid var(--ui-accent-hover-soft); border-radius: 6px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 10px; line-height: 1.5; }

.offer-table-limits > div { display: flex; flex-direction: column; gap: 3px; color: var(--ui-ink); font-variant-numeric: tabular-nums; }

.offer-table-limits > div + div { margin-top: 3px; }

.offers-program-group > .admin-heading.admin-detail-heading {
  margin: 16px 0 8px;
}

/* ============================================================
   📄 OFFERS SECTION - СТИЛЬ ЛЕНДИНГА
   ============================================================ */

.offers-section .offer-program {
  font-weight: 500;
  color: var(--gray-800);
}

.offers-section .offer-rate {
  font-weight: 600;
  color: var(--primary);
}

.offers-section .offer-complexes {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* ============================================================
   🏷️ ТЕГИ ЖК
   ============================================================ */

.offers-section .complex-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  color: var(--gray-600);
  margin: 0.1rem;
  border: 1px solid var(--border-light);
}

.offers-section .complex-tag.selected {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary);
}

/* ============================================================
   🚫 НЕТ АКТИВНЫХ БАНКОВ
   ============================================================ */

.offers-section .no-active-banks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 2px dashed var(--gray-300);
  margin: 20px 0;
}

.offers-section .no-active-banks-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.offers-section .no-active-banks h3 {
  font-size: 20px;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.offers-section .no-active-banks p {
  font-size: 14px;
  color: var(--gray-500);
  text-align: center;
}

.offers-section .no-active-banks strong {
  color: var(--primary);
}

/* ============================================================
   📱 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .offers-section .admin-table {
    min-width: 500px;
  }
}
/* frontend/src/pages/Admin/sections/BanksSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

.entity-card .admin-detail-grid.bank-detail-grid-single { grid-template-columns: minmax(0, 1fr); }

.entity-card .admin-detail-grid > .bank-detail-full-width { grid-column: 1 / -1; }

.entity-card .admin-detail-grid section > .bank-program-name { color: var(--ui-ink); border-bottom: 1px solid var(--ui-line, var(--ui-border)); }

/* ============================================================
   🏦 BANKS SECTION - СТИЛЬ ЛЕНДИНГА
   ============================================================ */

.banks-section .bank-name {
  font-weight: 600;
  color: var(--gray-800);
}

.banks-section .bank-rate-highlight {
  font-weight: 600;
  color: var(--primary);
}

/* ============================================================
   📊 СЧЕТЧИК В ТУЛБАРЕ
   ============================================================ */

.banks-section .total-count {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-left: auto;
}

/* ============================================================
   🏷️ СТАТУС БАНКА В ТАБЛИЦЕ
   ============================================================ */

.banks-section .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
}

.banks-section .status-badge.active {
  background: var(--success-bg);
  color: var(--ui-success-text);
  border: 1px solid var(--ui-success-border);
}

.banks-section .status-badge.inactive {
  background: var(--danger-bg);
  color: var(--ui-danger-text);
  border: 1px solid var(--ui-danger-border);
}
/* frontend/src/components/admin/AdminModal.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   🔥 ОВЕРЛЕЙ
   ============================================================ */

@keyframes adminModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   🔥 КОНТЕНТ - БЕЛЫЙ ФОН СО СКРУГЛЕНИЯМИ
   ============================================================ */

.admin-modal-content {
  background: var(--bg-white, #ffffff);
  border-radius: var(--radius-lg, 20px); /* ← СКРУГЛЕНИЯ */
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: adminModalSlideUp 0.3s ease-out;
  max-height: 90vh;
  overflow: hidden; /* ← чтобы содержимое не вылезало за скругления */
}

@keyframes adminModalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Размеры */

.admin-modal-sm {
  max-width: 400px;
}

.admin-modal-md {
  max-width: 600px;
}

.admin-modal-lg {
  max-width: 800px;
}

.admin-modal-xl {
  max-width: 1000px;
}

/* ============================================================
   🔥 ХЕДЕР
   ============================================================ */

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  background: var(--bg-white, #ffffff);
}

.admin-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.admin-modal-close:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--gray-800);
}

.admin-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   🔥 ТЕЛО
   ============================================================ */

.admin-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-white, #ffffff);
}

.admin-modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-modal-field.full-width {
  grid-column: 1 / -1;
}

/* ============================================================
   🔥 ПОЛЯ
   ============================================================ */

.admin-modal-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-700);
}

.admin-modal-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.admin-modal-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: var(--transition);
  font-family: inherit;
  background: var(--bg-white, #ffffff);
  color: var(--gray-800);
  width: 100%;
  min-height: 40px;
}

.admin-modal-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.admin-modal-input:disabled {
  background: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

.admin-modal-input::placeholder {
  color: var(--gray-400);
}

.admin-modal-input.full-width {
  width: 100%;
}

.admin-modal-color {
  padding: 2px;
  width: 50px;
  height: 40px;
  cursor: pointer;
}

.admin-modal-hint {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-style: italic;
}

/* ============================================================
   🔥 ФУТЕР
   ============================================================ */

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
  background: var(--bg-white, #ffffff);
}

.admin-modal-footer .admin-action-button {
  min-width: 100px;
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .admin-modal-content {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-md, 12px); /* ← адаптивные скругления */
  }

  .admin-modal-fields {
    grid-template-columns: 1fr;
  }

  .admin-modal-header {
    padding: 16px;
  }

  .admin-modal-body {
    padding: 16px;
  }

  .admin-modal-footer {
    padding: 12px 16px;
    flex-direction: column;
  }

  .admin-modal-footer .admin-action-button {
    width: 100%;
    min-width: unset;
  }

  .admin-modal-sm,
  .admin-modal-md,
  .admin-modal-lg,
  .admin-modal-xl {
    max-width: 100%;
  }
}
/* frontend/src/pages/Admin/sections/UsersSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   👥 USERS SECTION - СТИЛЬ ЛЕНДИНГА
   ============================================================ */

.users-section .role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
}

.users-section .role-badge.admin {
  background: var(--ui-info-soft);
  color: var(--ui-info-text);
}

.users-section .role-badge.developer_admin {
  background: var(--ui-warning-soft);
  color: var(--ui-warning-text);
}

.users-section .role-badge.developer_manager {
  background: var(--success-bg);
  color: var(--ui-success-text);
}

.users-section .role-badge.agent {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
}

/* ============================================================
   📱 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .users-section .role-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
  }
}
/* frontend/src/pages/Admin/sections/ComplexesSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   📊 BANK SELECTOR
   ============================================================ */

.complexes-section .bank-selector {
  position: relative;
  min-width: 200px;
}

.complexes-section .bank-selector-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-white);
  min-height: 38px;
  transition: var(--transition);
}

.complexes-section .bank-selector-trigger:hover {
  border-color: var(--gray-300);
}

.complexes-section .bank-selector-trigger:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.complexes-section .bank-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  padding: 0.25rem;
}

.complexes-section .bank-selector-dropdown::-webkit-scrollbar {
  width: 6px;
}

.complexes-section .bank-selector-dropdown::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.complexes-section .bank-selector-dropdown::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.complexes-section .bank-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.complexes-section .bank-selector-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.complexes-section .bank-selector-option:hover {
  background: var(--gray-100);
}

.complexes-section .bank-selector-option input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.complexes-section .bank-selector-option .bank-name {
  font-size: 0.85rem;
  color: var(--gray-700);
}

.complexes-section .bank-selector-option .bank-rate {
  font-size: 0.65rem;
  color: var(--gray-400);
}

/* ============================================================
   🏦 БАНКИ В МОДАЛЬНОМ ОКНЕ
   ============================================================ */

.bank-selector-in-modal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.bank-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.bank-selector-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

/* Адаптив для BankSelector в модалке */

.bank-selector-in-modal .bank-selector {
  min-width: 100%;
}

/* ============================================================
   🏠 ТИПЫ КВАРТИР В МОДАЛЬНОМ ОКНЕ
   ============================================================ */

.apartment-types-in-modal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.apartment-types-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.apartment-types-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.apartment-types-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.apartment-types-list::-webkit-scrollbar {
  width: 6px;
}

.apartment-types-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.apartment-types-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.apartment-types-list::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.apartment-type-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.7fr 0.7fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.apartment-type-row:hover {
  border-color: var(--gray-300);
  background: var(--gray-100);
}

.apartment-type-row .type-field {
  min-width: 0;
}

.apartment-type-row .type-field input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-white);
  transition: var(--transition);
}

.apartment-type-row .type-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.apartment-type-row .type-field input::placeholder {
  color: var(--gray-400);
  font-size: 0.8rem;
}

.apartment-type-row .type-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.apartment-type-row .type-actions .admin-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  font-size: 0.75rem;
}

.apartment-types-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 1rem;
  font-size: 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
}

/* ============================================================
   📱 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .complexes-section .bank-selector {
    min-width: 150px;
  }

  .complexes-section .bank-selector-dropdown {
    max-height: 150px;
  }

  .bank-selector-in-modal .bank-selector {
    min-width: 100%;
  }

  .apartment-type-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
  }

  .apartment-type-row .type-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .apartment-type-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .apartment-type-row .type-actions {
    grid-column: 1;
    justify-content: flex-end;
  }

  .bank-selector-in-modal .bank-selector {
    min-width: 100%;
  }
}

/* frontend/src/pages/Admin/sections/ComplexesSection.css */

/* ... существующие стили ... */

/* ============================================================
   🔥 УСЛОВИЯ ОПЛАТЫ В МОДАЛЬНОМ ОКНЕ
   ============================================================ */

.payment-terms-in-modal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.payment-terms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.payment-terms-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.payment-terms-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.payment-terms-input .admin-modal-input {
  flex: 1;
  min-height: 38px;
}

.payment-terms-input .admin-btn {
  min-width: 100px;
  height: 38px;
}

.payment-terms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.25rem;
}

.payment-terms-list::-webkit-scrollbar {
  width: 6px;
}

.payment-terms-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.payment-terms-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.payment-terms-list::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.payment-term-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-700);
  transition: var(--transition);
}

.payment-term-item:hover {
  border-color: var(--gray-300);
  background: var(--gray-100);
}

.payment-term-text {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-term-remove {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: var(--transition);
  font-size: 0.8rem;
}

.payment-term-remove:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-bg);
}

.payment-term-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.payment-terms-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 0.75rem;
  font-size: 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
}

.text-muted {
  color: var(--gray-400);
}

/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .payment-terms-input {
    flex-direction: column;
  }

  .payment-terms-input .admin-btn {
    width: 100%;
    min-width: unset;
  }

  .payment-term-item {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .payment-term-text {
    max-width: 150px;
  }

}

@media (max-width: 480px) {
  .payment-term-item {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .payment-term-text {
    max-width: 100px;
  }

}

/* frontend/src/pages/Admin/sections/ComplexesSection.css */

/* ============================================================
   🔥 АКЦИИ В МОДАЛЬНОМ ОКНЕ
   ============================================================ */

.promotions-in-modal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.promotions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.promotions-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.promotions-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.promotions-input .admin-modal-input {
  flex: 1;
  min-height: 38px;
}

.promotions-input .admin-btn {
  min-width: 100px;
  height: 38px;
}

.promotions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
  padding: 0.25rem;
}

.promotions-list::-webkit-scrollbar {
  width: 6px;
}

.promotions-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.promotions-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.promotion-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--ui-warning-soft);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--ui-warning-text);
  transition: var(--transition);
}

.promotion-item:hover {
  background: var(--ui-warning-soft);
}

.promotion-text {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promotion-remove {
  background: none;
  border: none;
  color: var(--ui-warning-text);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: var(--transition);
  font-size: 0.8rem;
}

.promotion-remove:hover:not(:disabled) {
  color: var(--ui-danger-text);
  background: rgba(220, 38, 38, 0.1);
}

.promotions-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 0.75rem;
  font-size: 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
}

/* ============================================================
   🔥 СПЕЦПРЕДЛОЖЕНИЯ В МОДАЛЬНОМ ОКНЕ
   ============================================================ */

.special-offers-in-modal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.special-offers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.special-offers-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.special-offers-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.special-offers-input .admin-modal-input {
  flex: 1;
  min-height: 38px;
}

.special-offers-input .admin-btn {
  min-width: 100px;
  height: 38px;
}

.special-offers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
  padding: 0.25rem;
}

.special-offers-list::-webkit-scrollbar {
  width: 6px;
}

.special-offers-list::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

.special-offers-list::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.special-offer-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--ui-warning-soft);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--ui-warning-text);
  transition: var(--transition);
}

.special-offer-item:hover {
  background: var(--ui-warning-soft);
}

.special-offer-text {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.special-offer-remove {
  background: none;
  border: none;
  color: var(--ui-warning-text);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: var(--transition);
  font-size: 0.8rem;
}

.special-offer-remove:hover:not(:disabled) {
  color: var(--ui-danger-text);
  background: rgba(220, 38, 38, 0.1);
}

.special-offers-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 0.75rem;
  font-size: 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--gray-300);
}
.complex-editor { container-type: inline-size; padding: 24px; border: 1px solid var(--ui-border); border-radius: 24px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.complex-editor .admin-modal-header { gap: 20px; padding: 0 0 24px; border: 0; background: transparent; align-items: flex-start; }
.complex-editor .admin-modal-header h2 { font-size: 24px; color: var(--ui-ink); letter-spacing: -.5px; }
.complex-editor .admin-editor-description { margin: 8px 0 0; max-width: 540px; color: var(--ui-secondary); font-size: 14px; line-height: 1.6; }
.complex-editor .admin-header-actions { flex-shrink: 0; }
.complex-editor .entity-card-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; gap: 20px; overflow: visible; background: transparent; }
.complex-editor .complex-tab-panel { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: start; gap: 20px; }
.complex-editor .complex-tab-panel[hidden] { display: none; }
.complex-editor .entity-editor-tabs .entity-tabs { margin-bottom: 0; }
.complex-editor .complex-tab-panel[data-complex-tab="apartments"] .apartment-types-in-modal { border-top: 0; padding-top: 0; }
.complex-editor .complex-tab-panel[data-complex-tab="commercial"] .payment-terms-in-modal { border-top: 0; padding-top: 0; }
.complex-editor .admin-editor-group,
.complex-editor :is(.apartment-types-in-modal, .payment-terms-in-modal, .promotions-in-modal, .special-offers-in-modal) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.complex-editor .admin-editor-group-header { margin-bottom: 20px; }
.complex-editor .admin-editor-group-header h3 { margin: 0; color: var(--ui-ink); font-size: 17px; font-weight: 600; }
.complex-editor .admin-editor-group-header p,
.complex-editor .complex-section-hint { margin: 8px 0 20px; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
.complex-editor .admin-editor-group:nth-child(2) .admin-modal-fields { grid-template-columns: 1fr; }
.complex-editor .admin-modal-fields { gap: 18px; }
.complex-editor .admin-modal-field { gap: 8px; min-width: 0; }
.complex-editor .admin-modal-input { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.complex-editor textarea.admin-modal-input { resize: vertical; min-height: 140px; }
.complex-editor .admin-modal-label { color: var(--ui-secondary); }
.complex-editor :is(.admin-editor-group.full-width, .apartment-types-in-modal, .payment-terms-in-modal, .promotions-in-modal, .special-offers-in-modal, .complex-editor-footer) { grid-column: 1 / -1; }
.complex-editor :is(.admin-editor-group.full-width, .apartment-types-in-modal, .payment-terms-in-modal, .promotions-in-modal, .special-offers-in-modal) { padding-top: 24px; border-top: 1px solid var(--ui-line); }
.complex-editor .admin-editor-group.full-width .admin-modal-label { color: var(--ui-ink); font-size: 17px; font-weight: 600; }
.complex-editor :is(.apartment-types-header, .payment-terms-header, .promotions-header, .special-offers-header) { margin-bottom: 0; gap: 12px; flex-wrap: wrap; }
.complex-editor :is(.apartment-types-header, .payment-terms-header, .promotions-header, .special-offers-header) h4 { margin: 0; color: var(--ui-ink); font-size: 17px; font-weight: 600; }
.complex-editor .apartment-types-list { display: flex; flex-direction: column; gap: 16px; height: auto; max-height: none; overflow: visible; }
.complex-editor .apartment-type-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
.complex-editor .apartment-type-row:last-child { padding-bottom: 0; border-bottom: 0; }
.complex-editor .apartment-type-number { grid-column: 1 / -1; min-height: 32px; padding-right: 44px; color: var(--ui-ink); font-size: 14px; font-weight: 600; }
.complex-editor .type-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.complex-editor .type-field > span { color: var(--ui-secondary); font-size: 13px; line-height: 1.5; }
.complex-editor .apartment-type-row .type-actions { position: absolute; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: flex-end; }
.complex-editor .apartment-type-row .type-field:not(.type-actions) { grid-column: auto; }
.complex-editor :is(.payment-terms-input, .promotions-input, .special-offers-input) { align-items: center; gap: 10px; }
.complex-editor :is(.payment-terms-list, .promotions-list, .special-offers-list) { max-height: none; overflow: visible; }
.complex-editor :is(.payment-term-item, .promotion-item, .special-offer-item) { max-width: 100%; padding: 6px 8px 6px 12px; gap: 10px; border: 1px solid var(--ui-accent-hover-soft); background: var(--ui-accent-soft); color: var(--ui-accent-text); border-radius: 13px; }
.complex-editor :is(.payment-term-text, .promotion-text, .special-offer-text) { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.complex-editor :is(.apartment-types-empty, .payment-terms-empty, .promotions-empty, .special-offers-empty) { margin: 0; padding: 20px; border: 1px dashed var(--ui-border); border-radius: 14px; background: var(--ui-canvas); color: var(--ui-muted); font-size: 14px; text-align: center; }
.complex-editor :is(.apartment-types-empty, .payment-terms-empty, .promotions-empty, .special-offers-empty) p { margin: 0; }
.complex-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.complex-editor-footer > span { color: var(--ui-muted); font-size: 13px; }
.complex-editor .complex-photo-editor { grid-column: 1 / -1; min-width: 0; padding: 20px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-canvas); }
.complex-photo-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.complex-photo-preview { min-width: 0; padding: 12px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); }
.complex-photo-preview img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--ui-canvas); }
.complex-photo-preview > span { display: block; margin: 12px 0; color: var(--ui-secondary); font-size: 13px; }
.complex-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.complex-photo-editor .loader-inline { margin-top: 16px; }
.complex-photo-error { color: var(--ui-danger-text); font-size: 13px; line-height: 1.6; }
@media (max-width: 600px) { .complex-photo-previews { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 900px) {
  .complex-editor .entity-card-body { grid-template-columns: minmax(0, 1fr); }
  .complex-editor .admin-modal-header { flex-direction: column; }
}
@container (max-width: 540px) {
  .complex-editor .admin-modal-fields { grid-template-columns: minmax(0, 1fr); }
  .complex-editor .apartment-type-row { grid-template-columns: minmax(0, 1fr); }
  .complex-editor .apartment-type-row .type-field:not(.type-actions) { grid-column: 1 / -1; }
  .complex-editor :is(.payment-terms-input, .promotions-input, .special-offers-input) { flex-direction: column; align-items: stretch; }
  .complex-editor-footer { flex-direction: column; align-items: stretch; }
  .complex-editor .admin-header-actions { display: flex; width: 100%; flex-wrap: wrap; }
  .complex-editor .admin-header-actions > button { flex: 1; }
}
@media (max-width: 768px) { .complex-editor { padding: 18px; border-radius: 20px; } }
/* frontend/src/pages/Admin/sections/CompaniesSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

/* ============================================================
   🏢 COMPANIES SECTION - СТИЛЬ ЛЕНДИНГА
   ============================================================ */

.companies-section .company-name {
  font-weight: 600;
  color: var(--gray-800);
}

.companies-section .admin-email {
  color: var(--gray-500);
  font-size: 0.8rem;
}

/* ============================================================
   📋 СПИСОК ЖК ВНУТРИ КОМПАНИИ
   ============================================================ */

.companies-section .company-complexes-list {
  padding: 0.5rem 0;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}

.companies-section .company-complexes-list .complex-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
  font-size: 0.85rem;
}

.companies-section .company-complexes-list .complex-row:last-child {
  border-bottom: none;
}

.companies-section .company-complexes-list .complex-row .complex-actions {
  display: flex;
  gap: 0.25rem;
}

/* ============================================================
   🔘 МАЛЕНЬКИЕ КНОПКИ
   ============================================================ */

.companies-section .admin-btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  border-radius: var(--radius-sm);
  min-width: 28px;
  min-height: 28px;
}

.company-logos { display: flex; flex-direction: column; gap: 16px; }

.company-logo-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 24px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-canvas); }

.company-logo-preview { display: flex; align-items: center; gap: 16px; min-width: 0; }

.company-logo-preview .company-logo { width: 72px; height: 72px; font-size: 32px; }

.company-logo-preview > span:last-child { max-width: 240px; color: var(--ui-ink); font-weight: 600; overflow-wrap: anywhere; }

.company-logo-controls { flex: 1 1 280px; min-width: 0; }

.company-logo-controls h3 { margin: 0 0 8px; color: var(--ui-ink); font-size: 16px; font-weight: 600; }

.company-logo-controls p { margin: 0 0 16px; color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }

.company-logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.company-logo-controls .loader-inline { margin-top: 12px; }

.company-logo-controls .company-logo-error { margin: 12px 0 0; color: var(--ui-danger-text); }

/* ============================================================
   📱 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .companies-section .company-complexes-list .complex-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.5rem 0;
  }
}
.program-form {
  --bg-white: var(--ui-surface);
  background: var(--ui-surface);
}

.program-form .program-form-fields {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.program-form textarea { resize: vertical; }
.program-form.entity-editor.entity-card .program-form-fields > legend {
  margin: 0 0 8px;
  padding: 0 0 12px;
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.program-form.entity-editor.entity-card .modal-form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.program-form.entity-editor.entity-card .modal-form-grid > .form-group {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
}
.program-form.entity-editor.entity-card .form-group > .form-label { padding: 8px 20px 0 0; }
.program-form.entity-editor.entity-card .form-group > :is(input, textarea) { width: 100%; min-width: 0; box-sizing: border-box; }
.program-form .modal-header,
.program-form .modal-footer { flex-shrink: 0; }

@media (max-width: 640px) {
  .program-form .modal-form-grid { grid-template-columns: 1fr; }
  .program-form .modal-body { padding: 12px; }
}
@media (max-width: 480px) {
  .program-form.entity-editor.entity-card .modal-form-grid > .form-group { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .program-form.entity-editor.entity-card .form-group > .form-label { padding: 0; }
}
/* frontend/src/pages/Admin/sections/ProgramsSection.css */

/* frontend/src/pages/Admin/admin-variables.css */

:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */

.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}

/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */

.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}

/* One spacing value for action groups; navigation tabs keep their own layout. */

.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}

.programs-section textarea.admin-input {
  min-width: 180px;
  resize: vertical;
}

/* ============================================================
   📋 PROGRAMS SECTION - СТИЛЬ ЛЕНДИНГА
   ============================================================ */

/* ❌ УДАЛЯЕМ ЭТУ ОБЕРТКУ - она лишняя!
.programs-section .admin-section {
  ...
}
*/

/* Тип программы */

.programs-section .program-type-code {
  font-size: 0.8rem;
  background: var(--gray-100);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-family: monospace;
}

/* Иконка программы */

.programs-section .program-icon {
  font-size: 1.5rem;
  display: inline-block;
  text-align: center;
  min-width: 32px;
}

/* Цвет программы */

.programs-section .program-color-preview {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
}

/* Описание */

.programs-section .program-description {
  font-size: 0.8rem;
  color: var(--gray-500);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Порядок */

.programs-section .program-order {
  text-align: center;
}

/* ============================================================
   🎯 ИНПУТЫ
   ============================================================ */

.programs-section .admin-input-icon {
  text-align: center;
  font-size: 1.2rem;
  width: 60px;
}

.programs-section .admin-input-color {
  padding: 2px;
  width: 40px;
  height: 30px;
  cursor: pointer;
}

.programs-section .admin-input-order {
  width: 60px;
  text-align: center;
}

/* ============================================================
   🏷️ СТАТУСЫ
   ============================================================ */

.programs-section .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.programs-section .status-badge.active {
  background: var(--success-bg);
  color: var(--ui-success-text);
  border-color: var(--ui-success-border);
}

.programs-section .status-badge.inactive {
  background: var(--danger-bg);
  color: var(--ui-danger-text);
  border-color: var(--ui-danger-border);
}

/* ============================================================
   📭 ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */

.programs-section .empty-state {
  text-align: center;
  color: var(--gray-500);
  padding: 2rem;
}

/* ============================================================
   🎯 АДАПТИВ
   ============================================================ */

@media (max-width: 768px) {
  .programs-section .program-description {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .programs-section .program-description {
    max-width: 80px;
  }

  .programs-section .program-icon {
    font-size: 1.1rem;
  }

  .programs-section .program-color-preview {
    width: 18px;
    height: 18px;
  }

  .programs-section .admin-input-icon {
    width: 40px;
    font-size: 1rem;
  }

  .programs-section .admin-input-order {
    width: 40px;
  }

  .programs-section .admin-input-color {
    width: 30px;
    height: 24px;
  }
}

.entity-card.program-detail .admin-detail-grid { grid-template-columns: minmax(0, 1fr); }
.config-editor.entity-card .config-form {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.config-editor .config-form h3 {
  margin: 28px 0 8px;
  padding: 0 0 12px;
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.config-editor .config-form h3:first-of-type { margin-top: 0; }
.config-editor .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.config-editor .config-form .form-group,
.config-editor .family-limits-row {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
}
.config-editor .form-group > label,
.config-editor .family-limits-label {
  padding: 8px 20px 0 0;
  color: var(--ui-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}
.config-editor .config-form input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  font-family: inherit;
}
.config-editor .form-group small {
  grid-column: 2;
  margin-top: 6px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.6;
}
.config-editor .family-limits-header {
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line, var(--ui-border));
  color: var(--ui-secondary);
  font-size: 12px;
}
.config-editor .family-limits-hint { display: block; margin-top: 12px; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
.config-editor .config-warning { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-canvas); color: var(--ui-secondary); font-size: 13px; line-height: 1.6; }
@media (max-width: 480px) {
  .config-editor .config-form .form-group,
  .config-editor .family-limits-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .config-editor .form-group > label,
  .config-editor .family-limits-label { padding: 0; }
  .config-editor .form-group small { grid-column: 1; }
  .config-editor .family-limits-header { display: none; }
}
/* frontend/src/pages/Admin/AdminPage.css */
/* frontend/src/pages/Admin/admin-variables.css */
:root {
  --admin-action-gap: 10px;
  /* 🔥 Основные цвета */
  --primary: var(--ui-action);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-action-hover);
  --primary-gradient: linear-gradient(135deg, var(--ui-action), var(--ui-action));
  --primary-bg: rgba(139, 92, 246, 0.08);
  --primary-hover: rgba(139, 92, 246, 0.15);

  /* 🔥 Статусы */
  --success: #10b981;
  --success-bg: var(--ui-success-soft);
  --success-border: var(--ui-success-border);
  --success-text: var(--ui-success-text);

  --warning: #f59e0b;
  --warning-bg: var(--ui-warning-soft);
  --warning-border: var(--ui-warning-border);
  --warning-text: var(--ui-warning-text);

  --danger: #ef4444;
  --danger-bg: var(--ui-danger-soft);
  --danger-border: var(--ui-danger-border);
  --danger-text: var(--ui-danger-text);

  --info: #3b82f6;
  --info-bg: var(--ui-info-soft);
  --info-border: var(--ui-info-border);
  --info-text: var(--ui-info-text);

  /* 🔥 Оттенки серого */
  --gray-50: var(--ui-canvas);
  --gray-100: var(--ui-subtle);
  --gray-200: var(--ui-border);
  --gray-300: var(--ui-border-strong);
  --gray-400: var(--ui-muted);
  --gray-500: var(--ui-secondary);
  --gray-600: var(--ui-secondary);
  --gray-700: var(--ui-ink);
  --gray-800: var(--ui-ink);
  --gray-900: var(--ui-ink);

  /* 🔥 Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);

  /* 🔥 Скругления */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 🔥 Анимации */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ БЕЙДЖЕЙ
   ============================================================ */
.admin-badge-sm {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}
.admin-badge-md {
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}
.admin-badge-lg {
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
}
/* ============================================================
   🔥 ДОБАВЛЯЕМ РАЗМЕРЫ ДЛЯ КНОПОК В ACTIONS
   ============================================================ */
.admin-btn-md {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  min-height: 32px;
  min-width: 32px;
}
/* One spacing value for action groups; navigation tabs keep their own layout. */
.admin-page :is(.admin-header-actions, .admin-actions, .admin-toolbar-left, .admin-page-actions, .config-actions, .offer-card-actions, .offers-toolbar),
.admin-confirm-dialog :is(.admin-header-actions, .admin-actions, .admin-page-actions) {
  gap: var(--admin-action-gap);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.admin-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  color: var(--gray-500);
  font-size: 1rem;
}
/* ============================================================
   🔥 LOGIN - СВЕТЛЫЙ, КАК ЛЕНДИНГ
   ============================================================ */
.admin-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(135deg, var(--ui-canvas) 0%, var(--ui-accent-soft) 100%);
  position: relative;
  overflow: hidden;
}
.admin-login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(139, 92, 246, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(168, 85, 247, 0.05) 0%,
      transparent 70%
    );
  pointer-events: none;
}
.admin-login-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(139, 92, 246, 0.03) 0%,
    transparent 70%
  );
  animation: loginGlow 20s ease-in-out infinite alternate;
}
@keyframes loginGlow {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(10%, 10%);
  }
}
.admin-login-card {
  position: relative;
  background: var(--ui-surface-translucent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  z-index: 1;
}
.admin-login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.admin-login-logo {
  display: inline-block;
  font-size: 2.5rem;
  background: var(--primary-gradient);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  line-height: 64px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-primary);
}
.admin-login-header h1 {
  color: var(--gray-900);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}
.admin-login-header p {
  color: var(--gray-400);
  font-size: 0.875rem;
}
.admin-login-input-group {
  margin-bottom: 1.5rem;
}
.admin-login-input-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.3rem;
}
.admin-login-input-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ui-surface);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  font-size: 0.95rem;
  transition: var(--transition);
  outline: none;
}
.admin-login-input-group input::placeholder {
  color: var(--gray-400);
}
.admin-login-input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
.admin-login-input-group input.error {
  border-color: var(--danger);
}
.admin-login-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.admin-login-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary-gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition);
  box-shadow: var(--shadow-primary);
}
.admin-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}
.admin-login-btn:active {
  transform: translateY(0);
}
/* ============================================================
   🔥 LOADER
   ============================================================ */
.admin-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--gray-50);
  color: var(--gray-700);
  gap: 1rem;
}
.admin-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   🔥 ADMIN PAGE - ОБЩИЙ КОНТЕЙНЕР
   ============================================================ */
.admin-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--gray-50);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.admin-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}
/* ============================================================
   🔥 HEADER
   ============================================================ */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  background: var(--ui-surface-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
}
.admin-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-400);
}
.breadcrumb-item {
  color: var(--gray-500);
}
.breadcrumb-item.active {
  color: var(--gray-900);
  font-weight: 600;
}
.breadcrumb-separator {
  color: var(--gray-300);
}
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.admin-logout-btn:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.admin-body {
  flex: 1;
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
}
/* ============================================================
   🔥 АДАПТИВ
   ============================================================ */
@media (max-width: 1024px) {
  .admin-header {
    padding: 0.5rem 1.5rem;
  }
  .admin-body {
    padding: 1rem 1.5rem 1.5rem;
  }
}
@media (max-width: 768px) {
  .admin-header {
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .admin-header-right {
    flex-wrap: wrap;
  }
  .admin-body {
    padding: 0.75rem 1rem 1rem;
  }
  .admin-login-card {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }
}
@media (max-width: 480px) {
  .admin-header {
    padding: 0.5rem 0.75rem;
  }
  .admin-body {
    padding: 0.5rem 0.75rem 1rem;
  }
  .admin-breadcrumb {
    font-size: 0.75rem;
  }
}
body .admin-page { --admin-column-width: calc((100vw - 90px) / 4); display: block; width: 100%; min-width: 0; padding: 30px; background: var(--ui-canvas); color: var(--ui-ink); font-family: inherit; }
.admin-page-heading { margin-bottom: 24px; }
.admin-page-heading h1 { margin: 0; color: var(--ui-ink); font-size: 32px; font-weight: 650; line-height: 1.3; letter-spacing: -1px; }
.admin-page-heading p { margin: 12px 0 0; color: var(--ui-secondary); font-size: 14px; line-height: 1.7; }
.admin-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; gap: 30px; }
body .admin-page.admin-page-company { --admin-column-width: 100%; min-height: calc(100dvh - 64px); }
.admin-page-company > .admin-content, .admin-page-company .admin-body { width: 100%; }
.admin-page-company .admin-workspace > .entity-card { min-height: calc(100dvh - 124px); margin-bottom: 0; }
.admin-page .admin-sidebar { width: 100%; min-width: 0; padding: 0; top: 94px; max-height: calc(100dvh - 126px); }
.admin-page .admin-sidebar .catalog-panel { padding: 24px; border-radius: 12px; box-shadow: 0 1px 3px #00000014; }
.admin-page .admin-content { min-width: 0; background: transparent; }
.admin-page .admin-body { padding: 0; margin: 0; }
.admin-page .admin-workspace { min-width: 0; container-type: inline-size; }
.admin-page .admin-section { padding: 24px; border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: 0 1px 3px #00000014; background: var(--ui-surface); }
.admin-page .admin-section:hover { box-shadow: 0 1px 3px #00000014; }
.admin-page .entity-panel .admin-section { padding: 0; border: 0; box-shadow: none; }
.admin-page .admin-breadcrumbs { margin-bottom: 20px; }
.admin-page .admin-workspace .admin-editor.entity-editor { width: 100%; min-width: 0; max-width: none; border-radius: 12px; box-shadow: 0 1px 3px #00000014; }
.admin-page .admin-editor.entity-editor > .entity-card-header { padding: 24px; gap: 16px; }
.admin-page .admin-editor.entity-editor > .entity-card-body { padding: 24px; min-width: 0; }
.admin-page .admin-editor.entity-editor .entity-card-heading { flex-basis: 100%; flex-wrap: wrap; }
.admin-page .admin-editor.entity-editor .entity-card-actions { justify-content: flex-end; }
.admin-page .admin-editor.entity-editor .entity-card-actions .ui-button { flex: 0 0 auto; width: auto; }
.admin-page .admin-editor.entity-editor :is(.modal-form-grid, .admin-modal-fields, .entity-editor-fields, .entity-form-groups, .admin-form-grid, .form-grid, .offer-editor-zone-fields, .admin-modal-section-fields) { display: grid; grid-template-columns: minmax(0, 1fr); }
.admin-page .admin-editor.entity-editor.entity-row-layout :is(.admin-modal-field, .apartment-type-row > .type-field:not(.type-actions)) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.admin-page .admin-editor.entity-editor.entity-row-layout .admin-modal-field > :is(label, .admin-modal-label), .admin-page .admin-editor.entity-editor.entity-row-layout .type-field > span { padding: 0; }
.admin-page .admin-editor.entity-editor.entity-row-layout .admin-modal-hint { grid-column: 1; }
.admin-page .admin-editor.entity-editor.entity-row-layout .admin-modal-field > .admin-modal-input { grid-column: 1; }
.admin-page .admin-editor.entity-editor :is(.entity-tabs, .admin-tabs, .company-logo-actions, .company-logo-upload, .company-logos) { min-width: 0; max-width: 100%; }
.admin-page .admin-editor.entity-editor .company-logo-upload { display: flex; flex-direction: column; }
.admin-page .admin-editor.entity-editor .entity-tabs { flex-wrap: wrap; overflow: visible; }
.admin-page .admin-editor.entity-editor :is(input, select, textarea) { min-width: 0; }
.admin-page .admin-editor.entity-editor .admin-table-wrapper { overflow-x: auto; }
.admin-page .admin-editor.entity-editor .loan-params-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.admin-page .admin-editor.entity-editor .admin-modal-field.full-width { grid-column: 1; }
.admin-page .admin-editor.entity-editor .tabs.entity-tabs .tabs-item { max-width: 100%; white-space: normal; text-align: left; }
.admin-page .admin-editor.entity-editor .entity-card-status select { min-width: 0; max-width: 100%; }
.admin-page .admin-editor.entity-editor .modal-form-grid > .form-group,
.admin-page .admin-editor.entity-editor .config-form .form-group,
.admin-page .admin-editor.entity-editor .family-limits-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.admin-page .admin-editor.entity-editor .modal-form-grid > .form-group > .form-label,
.admin-page .admin-editor.entity-editor .config-form .form-group > label,
.admin-page .admin-editor.entity-editor .family-limits-label { padding: 0; }
.admin-page .admin-editor.entity-editor .config-form .form-group small { grid-column: 1; }
.admin-page .admin-editor.entity-editor .family-limits-header { display: none; }
.admin-page .admin-editor.entity-editor .modal-form-grid > .form-group:has(> small) > input { grid-column: 1; grid-row: auto; }
.admin-page .admin-editor.entity-editor .complex-photo-previews { grid-template-columns: minmax(0, 1fr); }
.admin-page .admin-editor.entity-editor .company-logo-upload { align-items: stretch; padding: 16px; }
.admin-page .admin-editor.entity-editor :is(.company-logo-controls, .bank-logo-controls) { flex: initial; width: 100%; }
.admin-page .admin-section-header > .admin-list-actions { flex-basis: 100%; margin-top: 8px; }
.admin-page .admin-workspace .admin-header-actions { gap: 8px; }
.admin-directory-cards .complexes-card { height: 100%; }
.admin-directory-cards.is-reorderable .complexes-card-body { padding: 18px 18px 56px; }
.admin-directory-cards.is-reorderable .complexes-card-body.admin-company-card-body { padding: 18px; }
.admin-company-card-body .complexes-card-name { display: flex; align-items: center; min-height: 36px; }
.admin-directory-cards.is-reorderable .admin-company-card-body .complexes-card-name { padding-right: 70px; }
.admin-directory-cards > li:has(.admin-company-card-body) .complexes-card-order { bottom: 18px; }
.admin-company-card-media { position: relative; display: grid; place-items: center; width: 100%; min-height: 180px; padding: 44px 24px 24px; border-bottom: 1px solid var(--ui-line); background: var(--ui-canvas); }
.admin-company-card-media .company-logo { width: 100%; max-width: 220px; height: 96px; border: 0; border-radius: 0; background: transparent; }
.admin-company-card-media .company-logo img { width: 100%; height: 100%; object-fit: contain; }
.admin-page .entity-card .company-identity { flex-direction: column; align-items: flex-start; gap: 16px; }
.admin-page .entity-card .company-identity .company-logo { width: 160px; height: 160px; max-width: 100%; border: 0; border-radius: 0; background: transparent; font-size: 64px; }
.admin-card-counts { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--ui-secondary); font-size: 12px; }
.admin-card-counts b { margin-left: 6px; color: var(--ui-ink); }
.admin-offer-card-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.admin-card-eyebrow { color: var(--ui-secondary); font-size: 12px; }
.admin-card-metrics { display: grid; gap: 12px; }
.admin-card-metrics > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.admin-card-metrics > span > span { color: var(--ui-secondary); font-size: 12px; }
.admin-card-metrics b { color: var(--ui-accent-text); font-size: 18px; font-weight: 600; }
.admin-offer-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-offer-card-badges > span { padding: 4px 8px; border: 1px solid var(--ui-accent-border); border-radius: 10px; background: var(--ui-accent-soft); color: var(--ui-accent-text); font-size: 11px; }
@media (max-width: 1200px) {
  body .admin-page { --admin-column-width: 100%; padding: 1.5rem; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .admin-page .admin-sidebar { position: static; max-height: none; }
  .admin-page .admin-editor.entity-editor > .entity-card-body { padding: 24px; }
}
@media (max-width: 768px) {
  body .admin-page { padding: 1rem; }
  .admin-page .admin-section, .admin-page .admin-sidebar .catalog-panel, .admin-page .admin-editor.entity-editor > :is(.entity-card-header, .entity-card-body) { padding: 16px; }
}
@media (max-width: 600px) { .admin-page-heading h1 { font-size: 28px; } }
@media (max-width: 480px) { body .admin-page { padding: .5rem; } }
:root {
  --floating-panel-size: 56px;
  --floating-panel-gap: 12px;
  --floating-panel-right: max(24px, env(safe-area-inset-right));
  --floating-panel-bottom: max(24px, env(safe-area-inset-bottom));
  --side-panel-width: min(100vw, calc(75vw + 16px));
  --floating-tools-height: calc(var(--floating-panel-size) * 2);
}

.floating-tools {
  position: fixed;
  z-index: 1100;
  right: var(--floating-panel-right);
  bottom: var(--floating-panel-bottom);
  display: flex;
  flex-direction: column;
  width: var(--floating-panel-size);
  border-radius: 13px;
  background: var(--ui-action);
  box-shadow: -4px 4px 16px #8b5cf659;
}
body .floating-tools .floating-panel-toggle.ui-button {
  position: relative;
  width: var(--floating-panel-size);
  min-width: var(--floating-panel-size);
  height: var(--floating-panel-size);
  min-height: var(--floating-panel-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body .floating-tools .notifications-toggle-btn.ui-button { border-radius: 13px 13px 0 0; border-bottom: 1px solid #ffffff40; }
body .floating-tools .chat-toggle-btn.ui-button { border-radius: 0 0 13px 13px; }
.floating-panel-close { font-size: 24px; line-height: 1; }
.floating-panel-count {
  position: absolute;
  top: -5px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--ui-action-hover);
  color: white;
  font-size: 12px;
  font-weight: 700;
}
.side-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: #00000040;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.side-drawer-overlay.is-visible { opacity: 1; pointer-events: auto; }
.side-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: var(--side-panel-width);
  height: 100dvh;
  min-height: 0;
  /* Keep a rail for the floating controls, including their close buttons. */
  padding: 16px calc(var(--floating-panel-right) + var(--floating-panel-size) + 16px) calc(16px + env(safe-area-inset-bottom)) 16px;
  background: var(--ui-subtle);
  border-left: 1px solid var(--ui-border);
  box-shadow: -8px 0 24px #00000014;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
}
.side-drawer.is-open { transform: translateX(0); visibility: visible; }
.side-drawer-card { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 24px; box-shadow: var(--ui-shadow); }
.side-drawer-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 8px; padding: 12px 16px; background: var(--ui-action); color: #fff; }
.side-drawer-header h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 16px; font-weight: 700; }
.side-drawer-count { padding: 2px 9px; border-radius: 999px; background: #ffffff38; font-size: 12px; font-weight: 600; }

@media (max-width: 1200px) {
  :root { --side-panel-width: 100vw; }
}

@media (max-width: 768px) {
  :root {
    --floating-panel-right: max(16px, env(safe-area-inset-right));
    --floating-panel-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .side-drawer { padding-left: 12px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.chat-panel-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.chat-layout { display: grid; flex: 1; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; overflow: hidden; background: var(--ui-surface); }
.chat-sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ui-border); }
.chat-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 12px; }
.chat-sidebar-heading h2 { margin: 0; font-size: 16px; }
.chat-sidebar-heading > span { color: var(--ui-muted); font-size: 13px; }
.chat-search { padding: 0 16px 16px; }
.chat-search input { box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid var(--ui-border); border-radius: 12px; color: var(--ui-ink); background: var(--ui-canvas); font-size: 13px; }
.chat-contact-list { overflow-y: auto; flex: 1; padding: 0 16px 16px; scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
.chat-company-group + .chat-company-group { margin-top: 8px; }
.chat-company-heading { margin: 0 0 8px; font-size: 12px; }
.chat-company-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-canvas); color: var(--ui-secondary); text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.chat-company-toggle:hover, .chat-company-toggle[aria-expanded="true"] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.chat-company-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-company-chevron { flex-shrink: 0; }
.chat-company-toggle[aria-expanded="true"] .chat-company-chevron { transform: rotate(90deg); }
.chat-company-count { flex-shrink: 0; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--ui-accent-soft); color: var(--ui-accent); text-align: center; font-variant-numeric: tabular-nums; }
.chat-contact { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 14px 12px; border: 1px solid var(--ui-border); border-radius: 12px; text-align: left; cursor: pointer; background: var(--ui-surface); color: var(--ui-ink); }
.chat-contact:hover { background: var(--ui-canvas); }
.chat-contact-active, .chat-contact-active:hover { background: var(--ui-accent-soft); }
.chat-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; background: var(--ui-accent-hover-soft); color: var(--ui-accent); font-weight: 600; font-size: 17px; }
.chat-contact-content { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.chat-contact-name, .chat-contact-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-name { font-size: 14px; font-weight: 600; }
.chat-contact-role { color: var(--ui-secondary); font-size: 11px; }
.chat-contact-preview { color: var(--ui-muted); font-size: 12px; }
.chat-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 12px; padding: 32px 16px; border: 2px dashed var(--ui-border); border-radius: 12px; color: var(--ui-muted); }
.chat-placeholder > span { font-size: 36px; opacity: .6; }
.chat-placeholder h2 { font-size: 20px; margin-bottom: 4px; }
.chat-placeholder p { max-width: 350px; color: var(--ui-secondary); font-size: 14px; }
.chat-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-conversation-header { display: flex; gap: 12px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ui-line); }
.chat-conversation-header > div { min-width: 0; }
.chat-conversation-header h2 { overflow-wrap: anywhere; margin: 0; font-size: 16px; }
.chat-conversation-header p { margin: 3px 0 0; color: var(--ui-secondary); font-size: 12px; }
.chat-conversation-header .chat-company { color: var(--ui-accent); overflow-wrap: anywhere; }
.chat-mobile-picker { display: none; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; background: var(--ui-canvas); padding: 20px 24px; }
.chat-older { text-align: center; margin-bottom: 12px; }
.chat-date { text-align: center; margin: 12px 0 18px; font-size: 11px; color: var(--ui-muted); }
.chat-message { width: fit-content; max-width: 80%; margin: 0 0 12px; padding: 12px 16px 7px; border: 1px solid var(--ui-border); border-radius: 16px 16px 16px 4px; background: var(--ui-surface); }
.chat-message-own { margin-left: auto; background: var(--ui-accent-soft); border-color: var(--ui-accent-border); border-radius: 16px 16px 4px 16px; }
.chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.chat-message time { display: block; margin-top: 4px; text-align: right; color: var(--ui-secondary); font-size: 10px; }
.chat-composer { padding: 12px 16px; border-top: 1px solid var(--ui-border); background: var(--ui-canvas); }
.chat-composer textarea { display: block; width: 100%; box-sizing: border-box; min-height: 72px; max-height: 160px; resize: vertical; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-canvas); color: var(--ui-ink); font-size: 14px; }
.chat-composer-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 10px; }
.chat-composer-actions > span { font-size: 11px; color: var(--ui-muted); }
.chat-state { padding: 24px 16px; text-align: center; color: var(--ui-secondary); font-size: 13px; }
.chat-error { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ui-danger-soft); color: var(--ui-danger-text); font-size: 13px; }
.chat-panel-content > .chat-error { border-bottom: 1px solid var(--ui-danger-border); }
.chat-send-error { margin: 0 0 10px; color: var(--ui-danger-text); font-size: 12px; }
.chat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .chat-layout { display: flex; }
  .chat-sidebar { width: 100%; border: 0; }
  .chat-placeholder { display: none; }
  .chat-layout-selected .chat-sidebar { display: none; }
  .chat-conversation { width: 100%; }
  .chat-mobile-picker { display: block; padding: 12px; border-bottom: 1px solid var(--ui-border); }
  .chat-mobile-picker select { width: 100%; min-width: 0; padding: 8px; font-size: 13px; }
  .chat-conversation-header { padding: 12px; }
  .chat-messages { padding: 12px; }
  .chat-message { max-width: 90%; }
  .chat-composer { padding: 12px; }
  .chat-composer-actions > span { max-width: 140px; }
}
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 12px;
  background: var(--ui-action);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.notifications-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; background: var(--ui-surface); }
.notifications-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-border); background: var(--ui-canvas); }
.notifications-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notifications-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; color: var(--ui-danger-text); background: var(--ui-danger-soft); font-size: 13px; }
.notifications-panel .notifications-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
.notification-card { position: relative; display: flex; flex-shrink: 0; align-items: flex-start; margin-bottom: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.notification-card.is-unread { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); }
.notification-card.is-important { border-left: 3px solid #f59e0b; }
.notification-open { display: flex; flex: 1; min-width: 0; align-items: flex-start; gap: 12px; padding: 16px 4px 16px 16px; border: 0; border-radius: 16px; background: transparent; color: var(--ui-ink); text-align: left; cursor: pointer; }
.notification-open:hover { background: #8b5cf608; }
.notification-open:disabled { cursor: wait; }
.notification-symbol { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-surface); font-size: 22px; }
.notification-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.notification-body strong { font-size: 14px; line-height: 1.4; }
.notification-body > span { color: var(--ui-secondary); font-size: 13px; white-space: pre-wrap; line-height: 1.5; }
.notification-body .notification-details { color: var(--ui-muted); font-size: 11px; }
.notification-unread-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ui-action); }
.notification-card .notification-remove.ui-button { flex-shrink: 0; margin: 5px; }
.notifications-state { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; min-height: 180px; margin: 0; padding: 32px 16px; border: 2px dashed var(--ui-border); border-radius: 12px; text-align: center; color: var(--ui-muted); font-size: 13px; }
.notifications-empty-icon { font-size: 36px; opacity: .6; }
.notifications-state h3 { font-size: 16px; }
.notifications-load-more { padding: 16px; text-align: center; }
@media (max-width: 640px) {
  .notifications-toolbar { padding: 12px; }
  .notifications-panel .notifications-list { padding: 12px; }
  .notification-open { gap: 8px; padding: 12px 0 12px 10px; }
  .notification-symbol { display: none; }
  .notification-card .notification-remove.ui-button { width: 32px; min-height: 32px; padding: 4px; }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Shared visual language, taken from the calculator offer card. */
:root {
  --ui-accent: #8b5cf6;
  --ui-accent-hover: #7c4de5;
  --ui-accent-soft: #f3efff;
  --ui-action: #8b5cf6;
  --ui-action-hover: #7c4de5;
  --ui-surface: #fff;
  --ui-surface-translucent: #ffffffed;
  --ui-accent-hover-soft: #ece5ff;
  --ui-accent-border: #e0d4fd;
  --ui-accent-text: #7546cb;
  --ui-danger-soft: #fff2f4;
  --ui-danger-border: #f0d8de;
  --ui-danger-text: #b3435b;
  --ui-success-soft: #ecfdf5;
  --ui-success-border: #a7f3d0;
  --ui-success-text: #065f46;
  --ui-warning-soft: #fffbeb;
  --ui-warning-border: #fcd34d;
  --ui-warning-text: #92400e;
  --ui-info-soft: #eff6ff;
  --ui-info-border: #bfdbfe;
  --ui-info-text: #1e40af;
  --ui-ink: #26324a;
  --ui-secondary: #667998;
  --ui-muted: #8397b7;
  --ui-canvas: #f8f9fd;
  --ui-subtle: #f5f6fb;
  --ui-border: #dfe6f2;
  --ui-border-strong: #c9d5ea;
  --ui-line: #edf1f8;
  --ui-shadow: 0 12px 36px -14px #34476d26;
  --ui-shadow-hover: 0 16px 40px -14px #34476d36;
  --primary: var(--ui-action);
  --primary-dark: var(--ui-action-hover);
  --primary-light: #a28af5;
  --primary-gradient: linear-gradient(var(--ui-action), var(--ui-action));
  --primary-bg: var(--ui-accent-soft);
  --primary-hover: var(--ui-accent-hover-soft);
  --bg-white: var(--ui-surface);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 12px #34476d0a;
  --shadow-md: var(--ui-shadow);
  --shadow-lg: var(--ui-shadow-hover);
  --shadow-primary: 0 4px 12px #8b5cf620;
}

html { color-scheme: light; background: var(--ui-canvas); }
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-accent: #b499ff;
  --ui-accent-hover: #c7b2ff;
  --ui-action: #7c3aed;
  --ui-action-hover: #6d28d9;
  --ui-accent-soft: #362e4d;
  --ui-accent-hover-soft: #42355f;
  --ui-accent-border: #604784;
  --ui-accent-text: #c4adff;
  --ui-ink: #e8edf5;
  --ui-secondary: #b3bfd2;
  --ui-muted: #9aaac1;
  --ui-canvas: #1a2333;
  --ui-surface: #263145;
  --ui-surface-translucent: #263145ed;
  --ui-subtle: #2d3a50;
  --ui-border: #43536c;
  --ui-border-strong: #60728f;
  --ui-line: #3c4a61;
  --ui-shadow: 0 12px 36px -14px #00000066;
  --ui-shadow-hover: 0 16px 40px -14px #00000080;
  --ui-danger-soft: #402432;
  --ui-danger-border: #7d4256;
  --ui-danger-text: #ffadbc;
  --ui-success-soft: #173c34;
  --ui-success-border: #31695b;
  --ui-success-text: #8ce3bd;
  --ui-warning-soft: #3a3022;
  --ui-warning-border: #806638;
  --ui-warning-text: #f5d48b;
  --ui-info-soft: #20334e;
  --ui-info-border: #41638c;
  --ui-info-text: #a3caff;
}
body {
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ui-accent); }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #c4b5fd;
  outline-offset: 3px;
}
::selection { background: var(--ui-accent-hover-soft); color: var(--ui-ink); }

body :is(.landing-page, .projects-page, .profile-page, .mortgage-calculator-page, .developer-dashboard, .admin-page) {
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: inherit;
}
body :is(.form-section, .results-white-card, .admin-section, .admin-card, .bank-info-card,
  .project-details, .projects-list, .program-card, .profile-card, .profile-section,
  .feature-card, .stat-card, .dashboard-card, .offer-basket, .empty-results,
  .empty-state, .loading-state, .error-state) {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  box-shadow: var(--ui-shadow);
}
body :is(.program-card, .feature-card, .bank-info-card, .admin-card):hover {
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-hover);
  transform: none;
}
body :is(.auth-panel, .dynamic-modal, .offer-bank-modal, .bank-modal,
  .modal-content, .profile-dropdown, .notifications-dropdown) {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  box-shadow: 0 24px 64px -20px #34476d40;
}
body :is(.navigation, .landing-nav) {
  background: var(--ui-surface-translucent);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 4px 20px #34476d08;
  backdrop-filter: blur(16px);
}
body .nav-menu li a { color: var(--ui-secondary); }
body .nav-menu li.active a, body .nav-menu li a:hover { color: var(--ui-accent); opacity: 1; }
body .nav-menu li.active a::after { background: var(--ui-action); }
body .admin-nav-item { background: transparent; }
body .admin-nav-item:is(.active, :hover) { background: var(--ui-accent-soft); }
body .logo-text { color: var(--ui-ink); }
body .logo-text .logo-highlight { color: var(--ui-accent); }
body :is(.login-btn-nav, .btn-primary, .nav-cta, .auth-submit-btn, .admin-btn-primary) {
  background: var(--ui-action);
  color: #fff;
  border: 1px solid var(--ui-accent);
  border-radius: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px #8b5cf620;
}
body :is(.login-btn-nav, .btn-primary, .nav-cta, .auth-submit-btn, .admin-btn-primary):hover:not(:disabled) {
  background: var(--ui-action-hover);
  border-color: var(--ui-accent-hover);
  color: #fff;
  transform: none;
}
body :is(.btn-secondary, .admin-btn-secondary) {
  background: var(--ui-subtle);
  border: 1px solid var(--ui-border);
  color: var(--ui-secondary);
  border-radius: 13px;
  box-shadow: none;
}
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  background-color: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
}
body :is(input, select, textarea):focus {
  border-color: #a28af5;
  box-shadow: 0 0 0 3px #8b5cf61a;
}
body :is(input, textarea)::placeholder { color: var(--ui-muted); }
body :is(input, select, textarea):disabled { background-color: var(--ui-subtle); color: var(--ui-muted); }
body :is(input, select, textarea):is(.error, [aria-invalid="true"]) {
  border-color: #dc6b7c;
  background-color: var(--ui-danger-soft);
}
body :is(input, select, textarea):is(.error, [aria-invalid="true"]):focus { box-shadow: 0 0 0 3px #dc6b7c1a; }
body :is(.form-block h2, .admin-section-header, .offer-basket-header, .notifications-header) {
  border-bottom-color: var(--ui-line);
}
body :is(.auth-panel-header, .dynamic-modal-header, .dropdown-header) {
  background: var(--ui-subtle);
  color: var(--ui-ink);
  border-bottom: 1px solid var(--ui-line);
}
body :is(.profile-hero, .project-header) {
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  box-shadow: var(--ui-shadow);
}
body .profile-hero :is(h1, h2, p, .profile-name, .profile-email) { color: var(--ui-ink); }
body .profile-hero :is(.profile-company-badge, .profile-logout-btn) {
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-hover-soft);
  color: var(--ui-accent-text);
}
body .profile-hero .profile-logout-btn:hover { background: var(--ui-accent-hover-soft); border-color: var(--ui-accent-border); }
body .details-header-bg { background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
body .details-title h1 { color: var(--ui-ink); }
body .details-title .project-subtitle { color: var(--ui-secondary); }
body .details-header :is(.status-badge, .project-link-button) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-hover-soft);
  color: var(--ui-accent-text);
}
body :is(.verify-email-page, .reset-password-page, .forgot-password-page, .admin-login-page) { background: var(--ui-canvas); }
body :is(.verify-email-container, .reset-password-container, .forgot-password-container, .admin-login-card) {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  box-shadow: var(--ui-shadow);
}
body .hero-gradient { background: none; -webkit-text-fill-color: var(--ui-accent); color: var(--ui-accent); }
body :is(.landing-footer, .footer) { background: var(--ui-surface); color: var(--ui-secondary); border-top: 1px solid var(--ui-border); }
body .landing-footer :is(a, p, .footer-desc, .footer-bottom) { color: var(--ui-secondary); }
body table { border-color: var(--ui-line); }
body th { background: var(--ui-subtle); color: var(--ui-secondary); font-weight: 500; }
body :is(td, th) { border-bottom-color: var(--ui-line); }
body tbody tr:hover { background: var(--ui-accent-hover-soft); }

@media (max-width: 768px) {
  body :is(.form-section, .results-white-card, .admin-section, .admin-card, .bank-info-card,
    .project-details, .projects-list, .program-card, .profile-card, .profile-section,
    .auth-panel, .dynamic-modal, .offer-bank-modal, .profile-hero) { border-radius: 20px; }
  body .nav-menu { border-top-color: var(--ui-line); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* One source for buttons in offer cards, public pages and the admin area.
   The repeated class deliberately outranks legacy page-specific button rules. */
body .ui-button.ui-button {
  --button-bg: var(--ui-subtle);
  --button-border: var(--ui-border);
  --button-color: var(--ui-secondary);
  --button-hover-bg: var(--ui-accent-hover-soft);
  --button-hover-border: var(--ui-border-strong);
  --button-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--button-border);
  border-radius: 13px;
  background: var(--button-bg);
  color: var(--button-color);
  box-shadow: var(--button-shadow);
  font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body .ui-button.ui-button[data-variant="primary"] {
  --button-bg: var(--ui-action);
  --button-border: var(--ui-action);
  --button-color: #fff;
  --button-hover-bg: var(--ui-action-hover);
  --button-hover-border: var(--ui-action-hover);
  --button-shadow: 0 4px 12px #8b5cf620;
}
body .ui-button.ui-button[data-variant="danger"] {
  --button-bg: var(--ui-danger-soft);
  --button-border: var(--ui-danger-border);
  --button-color: var(--ui-danger-text);
  --button-hover-bg: var(--ui-danger-soft);
  --button-hover-border: var(--ui-danger-border);
}
body .ui-button.ui-button[data-variant="ghost"] {
  --button-bg: transparent;
  --button-border: transparent;
  --button-hover-bg: var(--ui-accent-soft);
  --button-hover-border: transparent;
  --button-shadow: none;
}
body .ui-button.ui-button:is(.in-basket, .active, [aria-pressed="true"], [aria-selected="true"]) {
  --button-bg: var(--ui-accent-soft);
  --button-border: var(--ui-accent-border);
  --button-color: var(--ui-accent-text);
  --button-hover-bg: var(--ui-accent-hover-soft);
  --button-hover-border: var(--ui-accent-border);
  --button-shadow: none;
}
body .ui-button.ui-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  color: var(--button-color);
  box-shadow: var(--button-shadow);
  opacity: 1;
  transform: none;
  text-decoration: none;
}
body .ui-button.ui-button:active:not(:disabled) { box-shadow: none; }
body .ui-button.ui-button:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
body .ui-button.ui-button:is(:disabled, [aria-disabled="true"]) {
  background: var(--ui-subtle);
  border-color: var(--ui-border);
  color: var(--ui-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
body .ui-button.ui-button[data-size="compact"] { min-height: 32px; padding: 6px 10px; font-size: 13px; }
body .panel-clear-all.ui-button[data-size="compact"] { flex-shrink: 0; min-height: 28px; padding: 4px 8px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
body .ui-button.ui-button[data-size="icon"] { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 6px; flex-shrink: 0; }
body .bank-card-actions > .ui-button.ui-button { min-height: 48px; }
body .ui-button.ui-button[data-align="start"] { justify-content: flex-start; text-align: left; }
body .ui-button.ui-button[data-shape="circle"] { border-radius: 50%; aspect-ratio: 1; padding: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  body .ui-button.ui-button { transition: none; }
}
body select.ui-select,
body .bank-selector-trigger {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background-color: var(--ui-surface);
  color: var(--ui-ink);
  font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body select.ui-select:hover:not(:disabled),
body .bank-selector-trigger:hover:not(:disabled) { border-color: var(--ui-border-strong); }
body select.ui-select:focus,
body .bank-selector-trigger[aria-expanded="true"] { outline: none; border-color: #a28af5; box-shadow: 0 0 0 3px #8b5cf61a; }
body select.ui-select:focus-visible,
body .bank-selector-trigger:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
body select.ui-select:disabled,
body .bank-selector-trigger:disabled { background: var(--ui-subtle); border-color: var(--ui-border); color: var(--ui-muted); opacity: 1; cursor: not-allowed; box-shadow: none; }
body select.ui-select:is(.error, [aria-invalid="true"]) { border-color: #dc6b7c; background-color: var(--ui-danger-soft); }

/* Customizable native pickers retain browser focus, form and touch behavior.
   Browsers without base-select retain their platform's accessible picker. */
@supports (appearance: base-select) {
  body select.ui-select:not([multiple]):not([size]),
  body select.ui-select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  body select.ui-select::picker(select),
  .bank-selector-dropdown {
    box-sizing: border-box;
    margin-block: 8px;
    padding: 8px;
    border: 1px solid var(--ui-border);
    border-radius: 20px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 12px 36px -14px #34476d40;
  }
  body select.ui-select::picker(select) {
    max-height: min(360px, 60dvh);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border-strong) transparent;
  }
  body select.ui-select::picker-icon { color: var(--ui-muted); transition: rotate .2s ease; }
  body select.ui-select:open::picker-icon { rotate: 180deg; color: var(--ui-accent); }
  body select.ui-select hr {
    height: 0;
    margin: 6px 16px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--ui-line);
    opacity: .65;
  }
  body select.ui-select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body select.ui-select option:hover,
  body select.ui-select option:focus { background: var(--ui-accent-hover-soft); outline: none; }
  body select.ui-select option:checked { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-accent-text); }
  body select.ui-select option:disabled { background: var(--ui-surface); border-color: transparent; color: var(--ui-muted); cursor: not-allowed; }
  body select.ui-select option::checkmark { order: 1; margin-left: auto; color: var(--ui-accent); }
}

.bank-selector { position: relative; min-width: 0; }
.bank-selector-label { display: block; margin-bottom: 6px; color: var(--ui-secondary); font-size: 14px; font-weight: 500; }
body .bank-selector-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; }
.bank-selector-trigger .is-placeholder { color: var(--ui-muted); }
.bank-selector-chevron { color: var(--ui-muted); font-size: 12px; }
.bank-selector-trigger[aria-expanded="true"] .bank-selector-chevron { transform: rotate(180deg); }
.bank-selector-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; margin-top: 8px; padding: 8px; max-height: min(360px, 60dvh); overflow-y: auto; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 12px 36px -14px #34476d40; scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }
.bank-selector-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--ui-line); }
.bank-selector-total { margin-left: auto; color: var(--ui-muted); font-size: 12px; }
.bank-selector-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; cursor: pointer; }
.bank-selector-option:hover { background: var(--ui-accent-hover-soft); }
.bank-selector-option:has(input:checked) { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-accent-text); }
.bank-selector-option:focus-within { outline: 2px solid #c4b5fd; outline-offset: -2px; }
.bank-selector-option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ui-accent); }
.bank-selector-name { flex: 1; overflow-wrap: anywhere; }
.bank-selector-rate { padding: 2px 7px; border-radius: 8px; background: var(--ui-subtle); color: var(--ui-secondary); font-size: 12px; }
.bank-selector-inactive { color: var(--ui-danger-text); font-size: 11px; }
.bank-selector-empty { padding: 16px; color: var(--ui-muted); font-size: 14px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  body select.ui-select, body .bank-selector-trigger, body select.ui-select::picker-icon { transition: none; }
}
.floating-notice {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 12px 12px 12px 16px;
  border: 1px solid;
  border-radius: 12px;
  box-shadow: 0 8px 28px #0f172a26;
  font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
}
.floating-notice--success { background: var(--ui-success-soft); border-color: var(--ui-success-border); color: var(--ui-success-text); }
.floating-notice--warning { background: var(--ui-warning-soft); border-color: var(--ui-warning-border); color: var(--ui-warning-text); }
.floating-notice--error { background: var(--ui-danger-soft); border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
.floating-notice-message { min-width: 0; padding-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
body .floating-notice .floating-notice-close.ui-button {
  --button-color: currentColor;
  --button-hover-bg: #0000000d;
  margin-left: auto;
  font-size: 24px;
  line-height: 1;
}