/* ========================================
   ПЕРВАЯ СТРАНИЦА - CALL RESPONSE ANALYZER
   Фирменные цвета:
   - #002337 - основной текст (тёмно-синий)
   - #E0EAF5 - светлый фон элементов
   - #F6F6F6 - общий фон страницы
   - #F29422 - оранжевый акцент
   - #2371B7 - синий акцент
   
   Дизайн: Современный технологичный стиль с градиентами
   ======================================== */

/* ===== ГЛОБАЛЬНЫЕ СТИЛИ ===== */

body {
  background: #F6F6F6 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    Oxygen, Ubuntu, Cantarell, sans-serif !important;
  background: linear-gradient(135deg, #E0EAF5 0%, #F6F6F6 100%) !important;
  min-height: 100vh;
}

body,
p,
h2,
h3,
h4,
h5,
h6,
label,
div,
button,
input,
select {
  color: #002337 !important;
}

/* ===== ЗАГОЛОВОК СТРАНИЦЫ ===== */

h2.text-3xl, 
h1.text-3xl {
  font-weight: 700;
  /* background: linear-gradient(135deg, #002337 0%, #2371B7 100%); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#bg-color-main {
  background-color: #002337; /* пример */
}

#bg-color-main {
  background-color: #002337; /* пример */
}

#flex-logo img {
    width: 15%;
}
/* Название сайта без рамки - просто на фоне */
body .bg-white.rounded-lg.shadow-md.p-6.mb-6 h1.text-3xl {
  /* background: linear-gradient(135deg, #002337 0%, #2371B7 50%, #F29422 100%); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .bg-white.rounded-lg.shadow-md.p-6.mb-6 p.text-gray-600 {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* Обязательное поле Call Log Provider */
.mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200 .text-sm.font-semibold {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200 .text-sm.font-semibold::before {
  content: "*";
  background: linear-gradient(135deg, #F29422 0%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

p.text-gray-600 {
  color: #64748b;
  font-weight: 400;
  font-size: 16px;
}

/* ===== КАРТОЧКИ ===== */

.bg-white.rounded-lg.shadow-md {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 35, 55, 0.1);
  box-shadow: 
    0 8px 32px rgba(35, 113, 183, 0.12),
    0 2px 8px rgba(0, 35, 55, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.bg-white.rounded-lg.shadow-md:hover {
  box-shadow: 
    0 12px 40px rgba(35, 113, 183, 0.18),
    0 4px 12px rgba(0, 35, 55, 0.12);
  transform: translateY(-2px);
  border-color: rgba(35, 113, 183, 0.3);
}

/* ===== WORKING HOURS СЕКЦИЯ ===== */

.bg-white.rounded-lg.shadow-sm.border.border-gray-200 {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 35, 55, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(35, 113, 183, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.bg-white.rounded-lg.shadow-sm.border.border-gray-200:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.9) 100%);
  border-color: rgba(35, 113, 183, 0.4);
  box-shadow: 0 8px 32px rgba(35, 113, 183, 0.15);
}

.bg-white.rounded-lg.shadow-sm.border.border-gray-200:hover
  .text-lg.font-semibold {
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span.text-xs.font-medium.text-gray-500.bg-gray-100 {
  background: linear-gradient(135deg, #2371B7 0%, #3b82f6 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(35, 113, 183, 0.3);
}

/* ===== INSTRUCTIONS HELP СЕКЦИЯ ===== */

.bg-blue-50.border.border-blue-200 {
  background: linear-gradient(135deg, rgba(35, 113, 183, 0.05) 0%, rgba(224, 234, 245, 0.9) 100%);
  border: 2px solid rgba(35, 113, 183, 0.2);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(35, 113, 183, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.bg-blue-50.border.border-blue-200:hover {
  border-color: rgba(35, 113, 183, 0.4);
  box-shadow: 0 8px 28px rgba(35, 113, 183, 0.15);
}

h3.text-md.font-semibold.text-blue-800 {
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 18px;
}

/* Главный контейнер для file upload - distance от help */
body .bg-white.rounded-lg.shadow-md.p-6.mb-6 {
  padding: 25px !important;
}

/* Заголовок секции файла */
h2.text-xl.font-semibold.text-gray-800.mb-4 {
  font-weight: 700;
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Grid для файлов */
.grid.grid-cols-1.md\:grid-cols-2.gap-4.mb-4 {
  gap: 32px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.grid.grid-cols-1.gap-4 {
  gap: 32px;
  margin-top: 16px;
  margin-bottom: 24px;
}

/* Кнопка Analyze - расстояние от grid */
.mt-6.flex.justify-center {
  margin-top: 24px;
}

.border-l-4.border-blue-400 {
  border-left: 4px solid #2371B7;
  padding-left: 16px;
  background: rgba(35, 113, 183, 0.02);
  border-radius: 0 12px 12px 0;
  transition: all 0.3s ease;
  margin-bottom: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.border-l-4.border-blue-400:hover {
  background: rgba(35, 113, 183, 0.05);
  border-left-width: 6px;
  transform: translateX(2px);
}

.border-l-4.border-green-400 {
  border-left: 4px solid #10b981;
  padding-left: 16px;
  background: rgba(16, 185, 129, 0.02);
  border-radius: 0 12px 12px 0;
  transition: all 0.3s ease;
  margin-bottom: 12px;
  padding: 15px 10px;
}

.border-l-4.border-green-400:hover {
  background: rgba(16, 185, 129, 0.05);
  border-left-width: 6px;
  transform: translateX(2px);
}

.border-l-4.border-purple-400 {
  border-left: 4px solid #8B5CF6;
  padding:15px 10px;
  background: rgba(139, 92, 246, 0.02);
  border-radius: 0 12px 12px 0;
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

.border-l-4.border-purple-400:hover {
  background: rgba(139, 92, 246, 0.05);
  border-left-width: 6px;
  transform: translateX(2px);
}

/* Информационные блоки внутри help */
div.space-y-3.ml-2 .space-y-3 {
  gap: 16px;
}

/* ===== FILE UPLOAD ЗОНА ===== */

/* Use body prefix to override inline styles with higher specificity */
body .file-drop {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px dashed rgba(242, 148, 34, 0.6);
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  padding: 16px !important;
  min-height: 80px !important;
}

body .file-drop:hover {
  border-color: #2371B7 !important;
  border-style: solid !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.95) 100%) !important;
  box-shadow: 0 8px 24px rgba(35, 113, 183, 0.15) !important;
  transform: translateY(-2px) !important;
}

body .file-drop.active {
  border-color: #F29422 !important;
  border-style: solid !important;
  background: linear-gradient(135deg, rgba(242, 148, 34, 0.1) 0%, rgba(255, 247, 237, 0.95) 100%) !important;
  box-shadow: 0 8px 24px rgba(242, 148, 34, 0.2) !important;
}

.text-green-600 {
  color: #2371B7 !important;
  font-weight: 600;
}

.border-red-500.bg-red-50 {
  background: linear-gradient(135deg, rgba(242, 148, 34, 0.15) 0%, rgba(254, 226, 226, 0.9) 100%) !important;
  border: 2px dashed rgba(242, 148, 35, 0.5) !important;
}

/* Название файла */
.mb-2.font-semibold.text-gray-700 {
  font-size: 16px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Лейбл заголовка file drop */
label.block .mb-2.font-semibold {
  color: #002337 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Размер файла */
div.text-xs.text-gray-500.mt-1 {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Click upload text hover */
div.text-cursor-pointer.hover\:text-blue-600 {
  transition: color 0.3s ease !important;
}

div.text-cursor-pointer.hover\:text-blue-600:hover {
  color: #2371B7 !important;
  font-weight: 600 !important;
}

/* Error text hover */
div.text-gray-500.text-cursor-pointer.hover\:text-blue-600 {
  transition: color 0.3s ease !important;
}

div.text-gray-500.text-cursor-pointer.hover\:text-blue-600:hover {
  color: #2371B7 !important;
  font-weight: 600 !important;
}

/* Hidden file input */
input[type="file"].hidden {
  display: none !important;
}

/* File drop cliкабельный area */
label.block {
  cursor: pointer !important;
  display: block !important;
}

/* ===== CALL LOG PROVIDER GUI ===== */

.mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200 {
  background: linear-gradient(135deg, rgba(224, 234, 245, 0.8) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 2px solid rgba(35, 113, 183, 0.2);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(35, 113, 183, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200:hover {
  border-color: rgba(35, 113, 183, 0.5);
  box-shadow: 0 8px 28px rgba(35, 113, 183, 0.15);
}

.mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200 .text-sm.font-semibold {
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

label span.text-red-500 {
  color: #F29422;
  font-weight: 600;
}

/* ===== RADIO BUTTONS (Call Log Provider) ===== */

/* Radio обёртка/label */
label.flex.items-center.cursor-pointer {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 234, 245, 0.9) 100%);
  border: 2px solid rgba(0, 35, 55, 0.1);
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}

label.flex.items-center.cursor-pointer:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.95) 100%);
  border-color: rgba(35, 113, 183, 0.3);
  box-shadow: 0 4px 12px rgba(35, 113, 183, 0.1);
  transform: translateY(-1px);
}

/* Активный/выбранный radio контейнер */
input[type="radio"]:checked + .text-gray-700 {
  border-color: #2371B7;
  background: linear-gradient(135deg, rgba(35, 113, 183, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: 0 0 0 3px rgba(35, 113, 183, 0.15), 0 4px 16px rgba(35, 113, 183, 0.2);
}

input[type="radio"]:checked + .text-gray-700::before {
  background: linear-gradient(135deg, #2371B7 0%, #3b82f6 100%);
}

/* Сам input radio */
input[type="radio"].w-4.h-4.text-blue-600 {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 2px solid rgba(0, 35, 55, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  appearance: none;
  position: relative;
}

/* Radio при hover (не checked) */
input[type="radio"].w-4.h-4.text-blue-600:hover:not(:checked) {
  border-color: rgba(35, 113, 183, 0.4);
  box-shadow: 0 4px 12px rgba(35, 113, 183, 0.15);
  transform: scale(1.05);
}

/* Radio при checked */
input[type="radio"].w-4.h-4.text-blue-600:checked {
  background: linear-gradient(135deg, #2371B7 0%, #3b82f6 100%);
  border-color: #2371B7;
  box-shadow: 0 0 0 4px rgba(35, 113, 183, 0.1), 0 4px 12px rgba(35, 113, 183, 0.3);
}

/* Текст рядом с radio (название провайдера) */
label.flex.items-center .text-gray-700 {
  color: #002337;
  font-weight: 600;
  transition: all 0.3s ease;
}

label.flex.items-center:hover .text-gray-700 {
  color: #2371B7;
}

/* Выбранный текст */
input[type="radio"]:checked + .text-gray-700 {
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ===== КНОПКИ ===== */

button.px-8.py-3.bg-blue-600.text-white {
  background: linear-gradient(135deg, #2371B7 0%, #3b82f6 100%);
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(35, 113, 183, 0.3);
  transition: all 0.3s ease;
}

button.px-8.py-3.bg-blue-600.text-white:hover {
  background: linear-gradient(135deg, #1e60bf 0%, #2563eb 100%);
  box-shadow: 0 8px 28px rgba(35, 113, 183, 0.4);
  transform: translateY(-2px);
}

button.px-8.py-3.bg-blue-600.text-white:disabled {
  background: linear-gradient(135deg, #cbd5e1 0%, #3b82f6 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* Остальные кнопки */
button.px-6.py-2.bg-purple-600,
button.px-6.py-3.bg-green-600,
button.px-6.py-3.bg-blue-600,
button.px-6.py-3.bg-red-600 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  transition: all 0.3s ease;
}

button.px-6.py-2.bg-purple-600:hover,
button.px-6.py-3.bg-green-600:hover,
button.px-6.py-3.bg-blue-600:hover,
button.px-6.py-3.bg-red-600:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ===== TIME INPUTS Working Hours ===== */

label.block.text-xs.font-medium.text-gray-500 {
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Time input контейнер */
input[type="time"] {
  border: 2px solid rgba(0, 35, 55, 0.12);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.9) 100%);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  font-weight: 500;
  color: #002337;
  cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.2) sepia(0.5) hue-rotate(200deg) saturate(3);
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(0.1) sepia(0.6) hue-rotate(210deg) saturate(4);
}

input[type="time"]:hover {
  border-color: rgba(35, 113, 183, 0.3);
  box-shadow: 
    0 4px 16px rgba(35, 113, 183, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(224, 234, 245, 0.95) 100%);
}

input[type="time"]:focus {
  border-color: #2371B7;
  outline: none;
  box-shadow: 
    0 0 0 3px rgba(35, 113, 183, 0.15),
    0 6px 20px rgba(35, 113, 183, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(224, 234, 245, 0.98) 100%);
}

input[type="time"]:disabled {
  background: linear-gradient(135deg, rgba(246, 246, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%);
  color: #94a3b8;
  cursor: not-allowed;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Стрелка между Start и End */
span.text-gray-400 {
  color: #64748b;
  font-weight: 600;
  font-size: 20px;
  transition: all 0.3s ease;
}

span.text-gray-400:hover {
  color: #2371B7;
  transform: scale(1.1);
}

/* Flex container для time inputs */
div.flex.items-center.gap-3.flex-1 {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 8px;
  transition: all 0.3s ease;
}

div.flex.items-center.gap-3.flex-1:hover {
  background: rgba(255, 255, 255, 0.6);
}
/* ===== TOGGLE SWITCH ===== */

.w-11.h-6.bg-gray-300 {
  background: linear-gradient(135deg, #E0EAF5 0%, #cbd5e1 100%);
  border: 1px solid rgba(0, 35, 55, 0.1);
  transition: all 0.3s ease;
}

/* ===== ЗАГОЛОВКИ ДНЕЙ НЕДЕЛИ ===== */

.w-2.h-2.rounded-full.bg-green-500 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
}

.w-2.h-2.rounded-full.bg-gray-300 {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

span.text-gray-400 {
  color: #64748b;
}

/* ===== WORKING HOURS DROPDOWN CARDS ===== */

/* Каждая карточка дня недели */
.bg-white.border.rounded.p-4.space-y-3 {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 35, 55, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(35, 113, 183, 0.08);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.bg-white.border.rounded.p-4.space-y-3:hover {
  border-color: rgba(35, 113, 183, 0.2);
  box-shadow: 0 6px 24px rgba(35, 113, 183, 0.12);
}

/* Коричневая карточка для enabled дней */
.bg-white.border.rounded.p-4.transition-all {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.85) 100%);
  border: 2px solid rgba(35, 113, 183, 0.15);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(35, 113, 183, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.bg-white.border.rounded.p-4.transition-all:hover {
  border-color: rgba(35, 113, 183, 0.3);
  box-shadow: 0 8px 32px rgba(35, 113, 183, 0.15);
  transform: translateY(-2px);
}

/* Серая карточка для disabled дней */
.bg-white.border.rounded.p-4.transition-all.opacity-60 {
  background: rgba(246, 246, 246, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}

/* Внутренний flex card */
.flex.items-center.justify-between.gap-4 {
  padding: 8px;
}

/* Название дня недели */
.w-24 .font-medium {
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ===== ВАЛИДАЦИЯ ОШИБКИ ===== */

.bg-red-50.border-l-4.border-red-500 {
  background: linear-gradient(135deg, rgba(242, 148, 34, 0.1) 0%, rgba(254, 226, 226, 0.95) 100%);
  border-left: 4px solid #F29422;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(242, 148, 34, 0.15);
  backdrop-filter: blur(8px);
}

.bg-red-50.border-l-4.border-red-500 .text-red-800 {
  background: linear-gradient(135deg, #002337 0%, #F29422 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

span.text-red-500 {
  color: #F29422;
  font-weight: 600;
}

p.text-red-700 {
  color: #002337;
  font-weight: 500;
}

/* ===== ПОДСКАЗКИ ===== */

p.text-xs.text-gray-500 {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

/* ===== СЕКЦИЯ ИНСТРУКЦИЙ ФАЙЛОВ ===== */

.border-l-4 h4.font-semibold {
  color: #002337;
  font-weight: 700;
  background: linear-gradient(135deg, #002337 0%, #2371B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
}

div[class*="bg-white rounded p-3 border border-gray-200"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 234, 245, 0.9) 100%);
  border: 1px solid rgba(35, 113, 183, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(35, 113, 183, 0.08);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  padding: 16px;
}

div[class*="bg-white rounded p-3 border border-gray-200"]:hover {
  border-color: rgba(35, 113, 183, 0.3);
  box-shadow: 0 6px 20px rgba(35, 113, 183, 0.12);
  transform: translateY(-1px);
}

.page-title {
  background: linear-gradient(135deg, #002337 0%, #2371B7 50%, #F29422 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 32px;
}

.page-subtitle {
  color: #64748b;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}

/* ===== РАССТОЯНИЕ МЕЖДУ КАРТОЧКАМИ ===== */




/* Между Help и Upload files section */
.bg-white.rounded-lg.shadow-md.p-6.mb-6 {
  margin-bottom: 32px;
}

/* Между Working Hours и Help */
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 {
  margin-bottom: 24px;
}

/* Между Help и Upload files section */
.bg-white.rounded-lg.shadow-md.p-6.mb-6 {
  margin-bottom: 24px;
}

/* ===== СМЕШАННЫЕ ПАРАМЕТРЫ ПУСТЫХ ПАУЗОВ ===== */

/* ===== АНИМАЦИИ ===== */

/* Минимум анимаций – только hover и smooth transitions */

/* Fade in для страницы */
.min-h-screen {
  animation: fadeIn 0.6s ease-out;
}

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

/* ===== АДАПТИВНОСТЬ ===== */

@media (max-width: 768px) {
  .bg-white.rounded-lg.shadow-md,
  .bg-white.rounded-lg.shadow-sm {
    margin-bottom: 20px;
    border-radius: 12px;
  }
  
  h2.text-3xl,
  h1.text-3xl {
    font-size: 24px;
  }

  button.px-8.py-3.bg-blue-600.text-white {
    font-size: 14px;
  }

  .file-drop {
    border-radius: 12px;
    padding: 20px;
  }
  
  .mb-4.p-4.bg-gray-50.rounded-lg.border.border-gray-200 {
    padding: 16px;
    border-radius: 12px;
  }

  input[type="time"] {
    font-size: 14px;
  }

  /* Mobile spacing */
  .grid.grid-cols-1.md\:grid-cols-2.gap-4.mb-4 {
    gap: 16px;
  }
}

/* ===== ПЕЧАТЬ ===== */

@media print {
  .file-drop,
  button {
    display: none;
  }

  body {
    background: #ffffff;
  }

  .bg-white.rounded-lg.shadow-md,
  .bg-white.rounded-lg.shadow-sm {
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ ===== */

/* Section titles more visible */
.text-lg.font-semibold {
  font-size: 16px;
  font-weight: 700;
  color: #002337;
}

/* Labels highlight */
label.block {
  font-weight: 600;
  color: #64748b;
}

/* Space-y utility enhanced */
.space-y-3 {
  gap: 12px;
}

/* Markdown/list styling */
ol.list-decimal.list-inside.ml-2 {
  padding-left: 4px;
  color: #4a5568;
}

ol.list-decimal.list-inside.ml-2 li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Paragraphs consistent */
p {
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Badge improvements */
span[class*="px-3"][class*="py-1"] {
  transition: all 0.3s ease;
}

span[class*="px-3"][class*="py-1"]:hover {
  transform: scale(1.05);
}

@media (max-width: 500px) {
  div.flex.gap-6 {
    flex-wrap: wrap;
  }

  div.flex.gap-6 > label {
    width: 100%;
  }
}


@media (max-width: 650px) {
  .flex.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .flex.items-center.gap-3.min-w-\[120px\] {
    justify-content: space-between;
  }

  .flex.items-center.gap-3.flex-1 {
    width: 100%;
  }
}

#bg-color-main p {
  color: #ffffff !important;
}

#bg-color-main h1 {
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}