/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

*:focus {
  outline: none;
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  border: none;
  margin: 5px 0;
  flex-shrink: 0;
}

div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== FLEX CONTAINERS ===== */
/* Горизонтальный флекс контейнер (ряд) */
.row {
  display: flex;
  flex-direction: row;
}

/* Вертикальный флекс контейнер (колонка) */
.col {
  display: flex;
  flex-direction: column;
}
/* ===== FLEX ALIGNMENT (для row и col) ===== */

/* Выравнивание по главной оси (justify-content) */
.jc-start { justify-content: flex-start; }      /* Слева (row) / Сверху (col) */
.jc-center { justify-content: center; }         /* По центру главной оси */
.jc-end { justify-content: flex-end; }          /* Справа (row) / Снизу (col) */
.jc-between { justify-content: space-between; } /* Равномерно, первый и последний у краев */
.jc-around { justify-content: space-around; }   /* Равномерно с отступами по краям */

/* Выравнивание по поперечной оси (align-items) */
.ai-start { align-items: flex-start; }          /* Вверху (row) / Слева (col) */
.ai-center { align-items: center; }             /* По центру поперечной оси */
.ai-end { align-items: flex-end; }              /* Внизу (row) / Справа (col) */
.ai-stretch { align-items: stretch; }           /* Растянуть на всю высоту/ширину */
.ai-baseline { align-items: baseline; }         /* По базовой линии текста */

/* Выравнивание отдельного элемента (align-self) */
.as-start { align-self: flex-start; }
.as-center { align-self: center; }
.as-end { align-self: flex-end; }
.as-stretch { align-self: stretch; }

/* ===== FLEX WRAP ===== */
.wrap { flex-wrap: wrap; }       /* Перенос на новую строку/столбец */
.nowrap { flex-wrap: nowrap; }   /* Без переноса */

/* ===== FLEX GROW/SHRINK ===== */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* ===== FLEX DIRECTION REVERSE ===== */
.row-reverse { display: flex; flex-direction: row-reverse; }
.col-reverse { display: flex; flex-direction: column-reverse; }

/* ===== MIN HEIGHT ===== */
.min-h-0 { min-height: 0; }

/* ===== FLEX BASIS ===== */
.flex-basis-auto { flex-basis: auto; }

/* ===== OVERFLOW ===== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ===== BORDER ===== */
.border { border: 1px solid #e0e0e0; }

/* ===== GAP UTILITIES (межэлементные отступы) ===== */
/* Общий gap (работает и для row, и для col) */
.gap-2 { gap: 4px; }     /* Микро отступ */
.gap-4 { gap: 4px; }     /* Мизерный отступ */
.gap-8 { gap: 8px; }     /* Маленький отступ */
.gap-12 { gap: 12px; }   /* Средний отступ */
.gap-16 { gap: 16px; }   /* Большой отступ */
.gap-24 { gap: 24px; }   /* Гигансткий отступ */

/* Раздельные отступы по осям */
.gap-x-8 { column-gap: 8px; }   /* Горизонтальный отступ в ряду */
.gap-y-12 { row-gap: 12px; }    /* Вертикальный отступ в колонке */

/* ===== SPACING UTILITIES (маргины и паддинги) ===== */
/* Маргины (внешние отступы) */
.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.m-12 { margin: 12px; }
.mt-8 { margin-top: 8px; }       /* Отступ сверху */
.mb-8 { margin-bottom: 8px; }    /* Отступ снизу */
.ml-8 { margin-left: 8px; }      /* Отступ слева */
.mr-8 { margin-right: 8px; }     /* Отступ справа */
.mx-auto { margin-left: auto; margin-right: auto; } /* Центрирование блока */

/* Паддинги (внутренние отступы) */
.p-2 { padding: 2px; }
.p-4 { padding: 4px; }
.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.px-8 { padding-left: 8px; padding-right: 8px; }   /* Горизонтальные */
.py-8 { padding-top: 8px; padding-bottom: 8px; } 
.py-12 { padding-top: 12px; padding-bottom: 12px; } /* Вертикальные */
.pb-10 {padding-bottom: 10px;}
.pl-2 {padding-left: 2px;}
.pr-2 {padding-right: 2px;}

/* Утилита для отрицательного margin */
.-ml-8 { margin-left: -8px; }

/* ===== WIDTH & HEIGHT ===== */
/* Ширина */
.w-full { width: 100%; }         /* Полная ширина */
.w-half { width: 50%; }          /* Половина ширины */
.w-auto { width: auto; }         /* Автоматическая ширина */
.min-w-0 { min-width: 0; }       /* Минимальная ширина 0 (важно для flex-детей) */
.w-10{width: 10px;}
.w-30{width: 30px;}
.w-40{width: 40px;}
.w-100{width: 100px;}

/* Высота */
.h-full { height: 100%; }        /* Полная высота */
.h-auto { height: auto; }        /* Автоматическая высота */
.h-1 {height: 1px; }
.h-10 {height: 10px; }
.h-30 {height: 30px; }
.h-40 {height: 40px; }
.h-100{height: 100px;}
.mh-40 {min-height: 40px;}

/* ===== TEXT UTILITIES ===== */
/* Выравнивание текста */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-underlined{ text-decoration: underline; }

/* Вес шрифта */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* Размер шрифта */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }

/* ===== VISIBILITY ===== */
.hidden { display: none !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ===== OTHER ===== */
.pr { position: relative; }
.pf { position: fixed; }
.pa { position: absolute; }

/* Скругления углов */
.rounded { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }

/* Тени (для iOS-like эффектов) */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.shadow-t1 {
  text-shadow: 
    0 0 2px rgba(0,0,0,0.2),
    0 0 4px rgba(0,0,0,0.1),
    0 0 6px rgba(0,0,0,0.1);
}

/* Pointer events (для отключения взаимодействия) */
.pointer-events-none { pointer-events: none; }

/* Курсоры */
.c-pointer { cursor: pointer; }