:root {
  --dopapp: transparent;
  --brd: rgb(226, 232, 240);
  --ch: #2563eb;
  --fm: #374151;
  --bd: #f0fdf4;
  --cl: #15803d;
  --tr: transparent;
  --dc: #dcfce7;
  --bk: #bbf7d0;
  --lc: #15803d;
  --inp: #f8fafc;
  --bghd: transparent;
  --clh: #0f172a;
  --pl: #eff6ff;
  --lp: transparent;
  --pll: #2563eb;
  --bdtop: #e2e8f0;
  --olp: white;
  --mdt: white;
  --bdgt: #eceff4;
  --or: #f8fafc;
  --orbd: #e2e8f0;

  /* новые цветовые переменные */
  --orange: #ea580c;
  --orange-dark: #fb923c;
  --red: #dc2626;
  --red-dark: #f87171;
  --brand: #2563eb;
  --brand-dark: #60a5fa;
  --desc: #94a3b8;

  --orange-desc: rgba(234, 88, 12, 0.7);
  --orange-desc-dark: rgba(251, 146, 60, 0.7);

  --red-desc: rgba(220, 38, 38, 0.7);
  --red-desc-dark: rgba(248, 113, 113, 0.7);

  --brand-desc: rgba(37, 99, 235, 1);
  --brand-desc-dark: rgba(96, 165, 250, 1);
  --org:rgb(194, 65, 12);
  --bgvse:linear-gradient(to bottom right, #eff6ff, #ffffff);
  --crvse:linear-gradient(to bottom right, #eff6ff, #ffffff);
  --brgrg:#1d4ed8;
  --crcr:#f1f5f9;
   --tgtg:#f1f5f9;
   --tgcl:#475569;
}

[data-theme="dark"] {
  --dopapp: #1e293b;
  --brd: rgb(51, 65, 85);
  --ch: #60a5fa;
  --fm: #cbd5e1;
  --bd: rgba(21, 128, 61, 0.2);
  --cl: #4ade80;
  --tr: #166534;
  --dc: rgba(21, 128, 61, 0.3);
  --bk: #166534;
  --lc: #4ade80;
  --inp: #1e293b;
  --bghd: #334155;
  --clh: #f1f5f9;
  --pl: rgba(30, 58, 138, 0.3);
  --lp: #1e40af;
  --pll: #60a5fa;
  --bdtop: #334155;
  --olp: transparent;
  --mdt: rgba(30, 41, 59, 0.5);
  --bdgt: #334155;
  --or: rgba(30, 41, 59, 0.5);
  --orbd: #475569;

  /* тёмные значения новых переменных */
  --orange: var(--orange-dark);
  --red: var(--red-dark);
  --brand: var(--brand-dark);
  --orange-desc: var(--orange-desc-dark);
  --red-desc: var(--red-desc-dark);
  --brand-desc: var(--brand-desc-dark);
  --org:rgb(251, 146, 60);
  --bgvse:linear-gradient(to bottom right, rgba(30, 58, 138, 0.3), #1e293b);
  --crvse:linear-gradient(to bottom right, rgba(30, 58, 138, 0.3), #1e293b);
  --brgrg:#93c5fd;
   --crcr:#1e293b;
   --tgtg:#334155;
   --tgcl:#cbd5e1;
}














/* Основные утилиты */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* Контейнеры */
.main-container-sec {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

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

/* Сетка */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.lg\\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.lg\\:col-span-4 {
  grid-column: span 4 / span 4;
}

.lg\\:col-span-8 {
  grid-column: span 8 / span 8;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-5 > * + * {
  margin-top: 1.25rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

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

.justify-end {
  justify-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

/* Отступы и размеры */
.w-full {
  width: 100%;
}

.w-4 {
  width: 1rem;
}

.w-64 {
  width: 16rem;
}

.w-80 {
  width: 20rem;
}

.h-2 {
  height: 0.5rem;
}

.h-4 {
  height: 1rem;
}

.h-12 {
  height: 3rem;
}

.h-64 {
  height: 16rem;
}

.h-80 {
  height: 20rem;
}

.h-96 {
  height: 24rem;
}

.h-\\[420px\\] {
  height: 420px;
}

.h-\\[450px\\] {
  height: 450px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.min-h-\\[380px\\] {
  min-height: 380px;
}

.min-w-0 {
  min-width: 0;
}

/* Позиционирование */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-3 {
  left: 0.75rem;
}

.top-2 {
  top: 0.5rem;
}

.top-2\\.5 {
  top: 0.625rem;
}

.-top-32 {
  top: -8rem;
}

.-right-32 {
  right: -8rem;
}

.-z-10 {
  z-index: -10;
}

.z-10 {
  z-index: 10;
}

/* Переполнение */
.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Текст */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-\\[9px\\] {
  font-size: 9px;
}

.text-\\[10px\\] {
  font-size: 10px;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

/* Цвета */
.text-slate-900 {
  color: #0f172a;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-400 {
  color: #94a3b8;
}

.text-slate-300 {
  color: #cbd5e1;
}

.text-slate-200 {
  color: #e2e8f0;
}

.text-brand-500 {
  color: #3b82f6;
}

.text-brand-600 {
  color: #2563eb;
}

.text-brand-700 {
  color: #1d4ed8;
}

.text-green-400 {
  color: #4ade80;
}

.text-green-500 {
  color: #22c55e;
}

.text-green-700 {
  color: #15803d;
}

.text-green-800 {
  color: #166534;
}

.text-orange-500 {
  color: #f97316;
}

.text-orange-600 {
  color: #ea580c;
}

.text-orange-700 {
  color: #c2410c;
}

.text-orange-400 {
  color: #fb923c;
}

.text-red-500 {
  color: #ef4444;
}

.text-red-600 {
  color: #dc2626;
}

.text-red-700 {
  color: #b91c1c;
}

.text-red-400 {
  color: #f87171;
}

.text-indigo-600 {
  color: #4f46e5;
}

.text-purple-700 {
  color: #7c3aed;
}

.text-white {
  color: #ffffff;
}

.text-transparent {
  color: transparent;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-brand-500 {
  --tw-gradient-from: #3b82f6;
  --tw-gradient-to: rgb(59 130 246 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5;
}

/* Фоны */
.bg-white {
  background-color: #ffffff;
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.bg-slate-800 {
  background-color: #1e293b;
}

.bg-slate-800\\/50 {
  background-color: rgb(30 41 59 / 0.5);
}

.bg-slate-100 {
  background-color: #f1f5f9;
}

.bg-slate-700 {
  background-color: #334155;
}

.bg-brand-50 {
  background-color: #eff6ff;
}

.bg-brand-500 {
  background-color: #3b82f6;
}

.bg-brand-600 {
  background-color: #2563eb;
}

.bg-brand-900 {
  background-color: #1e3a8a;
}

.bg-brand-900\\/30 {
  background-color: rgb(30 58 138 / 0.3);
}

.bg-brand-900\\/40 {
  background-color: rgb(30 58 138 / 0.4);
}

.bg-green-50 {
  background-color: #f0fdf4;
}

.bg-green-900\\/20 {
  background-color: rgb(21 128 61 / 0.2);
}

.bg-green-900\\/30 {
  background-color: rgb(21 128 61 / 0.3);
}

.bg-green-100 {
  background-color: #dcfce7;
}

.bg-orange-50 {
  background-color: #fff7ed;
}

.bg-orange-900\\/10 {
  background-color: rgb(154 52 18 / 0.1);
}

.bg-orange-900\\/20 {
  background-color: rgb(154 52 18 / 0.2);
}

.bg-red-50 {
  background-color: #fef2f2;
}

.bg-red-900\\/10 {
  background-color: rgb(127 29 29 / 0.1);
}

.bg-red-900\\/20 {
  background-color: rgb(127 29 29 / 0.2);
}

.bg-purple-100 {
  background-color: #f3e8ff;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-brand-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-to: rgb(239 246 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-white {
  --tw-gradient-to: #ffffff;
}

.dark\\:from-brand-900\\/30 {
  --tw-gradient-from: rgb(30 58 138 / 0.3);
  --tw-gradient-to: rgb(30 58 138 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\\:to-dark-surface {
  --tw-gradient-to: #1e293b;
}

/* Границы */
.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-slate-100 {
  border-color: #f1f5f9;
}

.border-slate-200 {
  border-color: #e2e8f0;
}

.border-slate-700 {
  border-color: #334155;
}

.border-slate-800 {
  border-color: #1e293b;
}

.border-brand-100 {
  border-color: #dbeafe;
}

.border-brand-500 {
  border-color: #3b82f6;
}

.border-brand-800 {
  border-color: #1e40af;
}

.border-green-200 {
  border-color: #bbf7d0;
}

.border-green-800 {
  border-color: #166534;
}

.border-orange-200 {
  border-color: #fed7aa;
}

.border-orange-800\\/50 {
  border-color: rgb(154 52 18 / 0.5);
}

.border-red-200 {
  border-color: #fecaca;
}

.border-red-800\\/50 {
  border-color: rgb(127 29 29 / 0.5);
}

.dark\\:border-dark-border {
  border-color: #334155;
}

.dark\\:border-dark-surface {
  border-color: #1e293b;
}

/* Радиусы */
.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-bl {
  border-bottom-left-radius: 0.25rem;
}

/* Тени */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-brand-900\\/20 {
  box-shadow: 0 25px 50px -12px rgb(30 58 138 / 0.2);
}

.blur-3xl {
  filter: blur(64px);
}

/* Padding */
.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-1\\/2 {
  padding-right: 0.125rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-28 {
  padding-top: 7rem;
}

/* Margin */
.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Курсор и указатели */
.cursor-pointer {
  cursor: pointer;
}

.pointer-events-none {
  pointer-events: none;
}

/* Прозрачность */
.opacity-70 {
  opacity: 0.7;
}

.opacity-100 {
  opacity: 1;
}

/* Видимость */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

/* Transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-200 {
  transition-duration: 200ms;
}

/* Hover эффекты */
.hover\\:border-brand-300:hover {
  border-color: #93c5fd;
}

.hover\\:border-brand-700:hover {
  border-color: #1d4ed8;
}

.hover\\:bg-slate-100:hover {
  background-color: #f1f5f9;
}

.hover\\:bg-slate-800:hover {
  background-color: #1e293b;
}

.hover\\:bg-orange-100:hover {
  background-color: #fed7aa;
}

.hover\\:bg-orange-900\\/20:hover {
  background-color: rgb(154 52 18 / 0.2);
}

.hover\\:bg-red-100:hover {
  background-color: #fecaca;
}

.hover\\:bg-red-900\\/20:hover {
  background-color: rgb(127 29 29 / 0.2);
}

.hover\\:bg-brand-500:hover {
  background-color: #3b82f6;
}

.hover\\:scale-105:hover {
  transform: scale(1.05);
}

.group:hover .group-hover\\:text-brand-600 {
  color: #2563eb;
}

.dark .group:hover .group-hover\\:text-brand-400 {
  color: #60a5fa;
}

/* Focus состояния */
.focus\\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\\:ring-brand-500:focus {
  --tw-ring-color: #3b82f6;
}

.focus\\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dark .focus\\:ring-offset-dark-bg:focus {
  --tw-ring-offset-color: #0f172a;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-brand-500 {
  --tw-ring-color: #3b82f6;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.dark .ring-offset-dark-bg {
  --tw-ring-offset-color: #0f172a;
}

/* Кастомные скроллбары */
.custom-scroll {
  scrollbar-width: thin;
}

.custom-scroll::-webkit-scrollbar {
  width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}

.dark .custom-scroll::-webkit-scrollbar-thumb {
  background-color: #475569;
}

/* Слайдеры */
.slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}

.slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #3b82f6;
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  transition: transform 0.1s;
}

.slider-thumb::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider-track::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
}

.dark .slider-track::-webkit-slider-runnable-track {
  background: #334155;
}

/* Стеклянный эффект */
.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.8);
}

.dark .glass {
  background-color: rgba(15, 23, 42, 0.8);
}

/* Анимации */
.fade-text {
  animation: fadeInText 0.4s ease-in-out;
}

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

/* Адаптивность */
@media (min-width: 768px) {
  .md\\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\\:flex-row {
    flex-direction: row;
  }
  
  .md\\:w-auto {
    width: auto;
  }
  
  .text-left {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .lg\\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .lg\\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  
  .lg\\:col-span-8 {
    grid-column: span 8 / span 8;
  }
}

/* Темная тема */
.dark {
  color-scheme: dark;
}

#model-list .model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #f1f5f9;
  background: var(--mdt);
  border-color:var(--bdgt);
}


#model-title {

  color: var(--ch);
}



#model-list .model-item:hover {
  border-color: #93c5fd;
}

.dark #model-list .model-item:hover {
  border-color: #1d4ed8;
}

#model-list .model-item.active {
  background-color: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.dark #model-list .model-item.active {
  background-color: rgba(30, 58, 138, 0.4);
}

#model-list .model-name {
  font-weight: bold;
  font-size: 0.875rem;
  color: var(--pll);
  transition: color 0.2s ease;
}



#model-list .model-item:hover .model-name {
  color: #2563eb;
}



#model-list .model-provider {
  font-size: 0.625rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#model-list .model-price {
  text-align: right;
}

#model-list .model-price-main {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--pll);
}


#model-list .model-price-label {
  font-size: 0.5625rem;
  color: #94a3b8;
}

#model-list .tag {
  padding: 0.1875rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.5625rem;
}

#model-list .tag-elo {
  background-color: var(--tgtg);
  color: var(--tgcl);
}

#model-list .tag-image {
  background-color: #f3e8ff;
  color: #7c3aed;
}

.comparator-card {
  padding: 1rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comparator-card:hover {
  transform: translateY(-1px);
}


#card-or {
  background-color: var(--or);
  border: 1px solid var(--orbd);
}



#card-or:hover {
  background-color: var(--crcr);
}



#card-real {
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
}

.dark #card-real {
  background-color: rgba(154, 52, 18, 0.1);
  border-color: rgba(154, 52, 18, 0.5);
}

#card-real:hover {
  background-color: #fed7aa;
}

.dark #card-real:hover {
  background-color: rgba(154, 52, 18, 0.2);
}

#card-reseller {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.dark #card-reseller {
  background-color: rgba(127, 29, 29, 0.1);
  border-color: rgba(127, 29, 29, 0.5);
}

#card-reseller:hover {
  background-color: #fecaca;
}

.dark #card-reseller:hover {
  background-color: rgba(127, 29, 29, 0.2);
}

#card-vsellm {
  background: var(--crvse);
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  position: relative;
  overflow: hidden;
}




#card-vsellm .pro-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #3b82f6;
  color: white;
  font-size: 0.5625rem;
  font-weight: bold;
  padding: 0.125rem 0.5rem;
  border-bottom-left-radius: 0.25rem;
}

/* Утилиты для градиентов */
.bg-\\[\\#0d1117\\] {
  background-color: #0d1117;
}

.bg-\\[\\#161b22\\] {
  background-color: #161b22;
}

.text-\\[\\#3b82f6\\] {
  color: #3b82f6;
}

.text-brand-400 {
  color: #60a5fa;
}

.text-slate-200 {
  color: #e2e8f0;
}

.text-slate-500 {
  color: #64748b;
}

/* Утилиты для кода */
.whitespace-pre {
  white-space: pre;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .main-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .text-4xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .text-5xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
/* Специфичные стили для калькулятора - семантические классы */

/* Hero секция */
.hero-section-sec {
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  animation: fadeIn 0.5s ease-in-out;
}

.hero-title-sec {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color:  #2563eb ;
  margin-bottom: 1rem;

}



.hero-title-highlight {
  background: linear-gradient(to right, #3b82f6, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-description-sec {
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.75rem;
  margin: 0 auto;
}

.dark .hero-description {
  color: #94a3b8;
}

/* Сетка калькулятора */
.calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .calculator-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* Панель управления */
.controls-panel {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .controls-panel {
    grid-column: span 4;
  }
}

.control-card {
  background: var(--dopapp);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid var(--brd);
  margin-bottom: 1.5rem;
}


.control-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-icon {
  width: 1rem;
  height: 1rem;
}

/* Формы */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fm);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}


.input-wrapper {
  position: relative;
}

.input-prefix {
  position: absolute;
  left: 0.75rem;
  top: 0.625rem;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
}


.form-input {
  width: 100%;
  padding-left: 2rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: var(--inp);
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-family: ui-monospace, monospace;
  color: var(--clh);
  transition: all 0.15s ease;
  border-color: var(--bghd);
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
  border-color: #3b82f6;
}



.form-help {
  font-size: 0.625rem;
  color: #94a3b8;
  margin-top: 0.375rem;
  line-height: 1.375;
}

/* Слайдеры */
.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.volume-badge {
  background: var(--pl);
  color: var(--pll);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #dbeafe;
  border-color:var(--lp);
}

.range-slider {
  width: 100%;
  height: 0.5rem;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

/* Линия (Chrome, Edge, Safari) */
.range-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #d1d5db; /* светло-серая линия */
  border-radius: 3px;
}

/* Ползунок (Chrome, Edge, Safari) */
.range-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #2563eb; /* синий */
  border-radius: 50%;
  margin-top: -6px; /* выравнивание по центру линии */
  cursor: pointer;
  transition: 0.15s;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* Firefox */
.range-slider::-moz-range-track {
  height: 6px;
  background: #d1d5db;
  border-radius: 3px;
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #2563eb;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: 0.15s;
}

.range-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}


.ratio-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.ratio-label {
  color: #64748b;
}

.ratio-label-active {
  color: #2563eb;
}

/* Выбор модели */
.model-picker {
  background: var(--dopapp);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid var(--brd);
  height: 420px;
  display: flex;
  flex-direction: column;
}



.model-picker-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
  flex-shrink: 0;
}

.model-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.25rem;
  padding:9px;
}

.model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #f1f5f9;
  background: white;
  margin-bottom: 0.5rem;
}

.model-item:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.model-item-active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.dark .model-item {
  border-color: #334155;
  background: rgba(30, 41, 59, 0.5);
}

.dark .model-item:hover {
  border-color: #1d4ed8;
  background: rgba(30, 41, 59, 0.8);
}

.dark .model-item-active {
  background: rgba(30, 58, 138, 0.4);
}

.model-info {
  flex: 1;
}

.model-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--pll);
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.model-item:hover .model-name {
  color: #2563eb;
}




.model-provider {
  font-size: 0.625rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.model-price {
  text-align: right;
}

.model-price-main {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3b82f6;
}

.dark .model-price-main {
  color: #60a5fa;
}

.model-price-label {
  font-size: 0.5625rem;
  color: #94a3b8;
}

.tag {
  padding: 0.1875rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.5625rem;
}

.tag-elo {
  background: #f1f5f9;
  color: #475569;
}

.dark .tag-elo {
  background: #334155;
  color: #cbd5e1;
}

.tag-image {
  background: #f3e8ff;
  color: #7c3aed;
}

.dashboard-grid {
  grid-column: span 1;
  /* padding: 20px; расстояние между блоками */
}


@media (min-width: 1024px) {
  .dashboard-grid {
    grid-column: span 8;
  }
}

/* Карточка графика */
.chart-card-rec {
  background: var(--dopapp);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border: 1px solid var(--brd);
  position: relative;
  overflow: hidden;
  min-height: 380px;
  transition: all 0.3s ease;
}



.chart-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  gap: 1rem;
}

@media (min-width: 640px) {
  .chart-header {
    flex-direction: row;
    align-items: flex-end;
  }
}

.chart-title-section {
  flex: 1;
}

.chart-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dark .chart-title {
  color: #f1f5f9;
}

.savings-badge {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--bd);
  border: 1px solid #bbf7d0;
  color: var(--cl);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  opacity: 1;
  border-color:var(--tr);
}



.savings-badge-success {
  background: var(--dc);
  border-color: var(--bk);
  color: var(--lc);
}

.savings-badge-neutral {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.dark .savings-badge-neutral {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

.savings-fire {
  font-size: 1.125rem;
  margin-right: 0.25rem;
}

.savings-amount {
  font-weight: 700;
  margin-left: 0.25rem;
}

.chart-main-display {
  text-align: right;
}

.chart-main-price {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--ch);
}



.chart-main-label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chart-container {
  position: relative;
  height: 16rem;
  width: 100%;
  z-index: 10;
}

.chart-decor {
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 20rem;
  height: 20rem;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

/* Сетка карточек сравнения */
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .breakdown-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.breakdown-card {
  padding: 1rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.breakdown-card:hover {
  transform: translateY(-1px);
}

.breakdown-card-inactive {
  opacity: 0.7;
}

.breakdown-card-active {
  box-shadow: 0 0 0 2px #3b82f6;
}

.breakdown-card-or {
  background: #f8fafc;
  border: 1px solid var(--brd);
}






.breakdown-card-real {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.dark .breakdown-card-real {
  background: rgba(154, 52, 18, 0.1);
  border-color: rgba(154, 52, 18, 0.5);
}

.breakdown-card-real:hover {
  background: #fed7aa;
}

.dark .breakdown-card-real:hover {
  background: rgba(154, 52, 18, 0.2);
}

.breakdown-card-reseller {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.dark .breakdown-card-reseller {
  background: rgba(127, 29, 29, 0.1);
  border-color: rgba(127, 29, 29, 0.5);
}

.breakdown-card-reseller:hover {
  background: #fecaca;
}

.dark .breakdown-card-reseller:hover {
  background: rgba(127, 29, 29, 0.2);
}

.breakdown-card-vsellm {
  background: var(--bgvse);
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.breakdown-card-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}


.breakdown-card-label-orange {
  color: var(--orange);
}

.breakdown-card-label-red {
  color: var(--red);
}

.breakdown-card-label-brand {
  color: var(--brand);
}
.breakdown-card-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.25rem;
}


.breakdown-card-price-orange {
  color: var(--org);
}

.breakdown-card-price-red {
  color: var(--red);
}



.breakdown-card-price-brand {
  font-size: 1.25rem;
  color: var(--brgrg);
}




.breakdown-card-desc {
  font-size: 0.625rem;
  color: var(--desc);
}

.breakdown-card-desc-orange {
  color: var(--orange-desc);
}

.breakdown-card-desc-red {
  color: var(--red-desc);
}

.breakdown-card-desc-brand {
  color: var(--brand-desc);
}


.pro-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #3b82f6;
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-bottom-left-radius: 0.25rem;
}

/* Интеграционный сниппет */
.integration-snippet {
  background: var(--dopapp);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid var(--brd);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .integration-snippet {
    flex-direction: row;
  }
}

.integration-content {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.integration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.integration-title {
  color: var(--textone);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.integration-icon {
  color: #22c55e;
}

.integration-badge {
  font-size: 0.625rem;
  color: #64748b;
  font-family: ui-monospace, monospace;
}

.code-block {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--textone);
  background: var(--dopapp);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--brd);
  overflow-x: auto;
  white-space: pre;
}

.code-highlight {
  color: #60a5fa;
}

.integration-cta {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .integration-cta {
    width: auto;
  }
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 25px 50px -12px rgba(30, 58, 138, 0.2);
}

.cta-button:hover {
  background: #3b82f6;
  transform: scale(1.05);
}

.cta-help {
  font-size: 0.625rem;
  color: #64748b;
  margin-top: 0.5rem;
}

/* Бенчмарк секция */
.benchmark-section {
  background: var(--dopapp);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid var(--brd);
  margin-top: 2rem;
}



.benchmark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-direction: column;
}

@media (min-width: 768px) {
  .benchmark-header {
    flex-direction: row;
  }
}

.benchmark-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--textone);
  margin-bottom: 0.25rem;
}



.benchmark-description {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}

.dark .benchmark-description {
  color: #94a3b8;
}

.benchmark-chart {
  position: relative;
  height: 28.125rem;
  width: 100%;
}

/* SEO блок */
.seo-block {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.dark .seo-block {
  border-top-color: #334155;
}

.seo-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--textone);
  margin-bottom: 1rem;
}


.seo-content {
  display: grid;
  gap: 2rem;
  font-size: 0.875rem;
  color: #475569;
}

@media (min-width: 768px) {
  .seo-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dark .seo-content {
  color: #94a3b8;
}

.seo-subtitle {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.dark .seo-subtitle {
  color: #e2e8f0;
}

.seo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.seo-list li {
  margin-bottom: 0.25rem;
  padding-left: 1.25rem;
  position: relative;
}

.seo-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3b82f6;
}

.mb-4 {
  margin-bottom: 1rem;
}

/* Футер */
.footer {
  border-top: 1px solid var(--bdtop);
  background: var(--olp);
  padding: 2rem 0;
  margin-top: 3rem;
}

.footer-content {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
  .hero-section {
    padding: 0 1rem;
  }
  
  .hero-title {
    font-size: 1.875rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .calculator-grid {
    padding: 0 1rem;
  }
  
  .control-card,
  .chart-card,
  .benchmark-section {
    padding: 1rem;
  }
  
  .breakdown-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .chart-container {
    height: 12rem;
  }
  
  .benchmark-chart {
    height: 20rem;
  }
  
  .integration-snippet {
    padding: 1rem;
  }
  
  .integration-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .code-block {
    font-size: 0.625rem;
    padding: 0.5rem;
  }
}