* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
  }

  html, body {
     content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: url("../img/bg/ai_001.webp") center/cover no-repeat;
    //opacity: 0.99;
    z-index: -2;
    transform: translateZ(0);
    overscroll-behavior: none;
  }

@font-face {
    font-family: 'ai_01';
    font-style: normal;
    font-weight: normal;
    src: local('ubr'), url('ttf/ai_01.woff2') format('woff2');
}
/* Лёгкое затемнение: 95% видимость фона */
.bgf-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35); /* ← затемнение 5% */
    z-index: -1;
}




/* Внешний контейнер уже стеклянный
  .glass-container {
    margin: 1.5%;
    padding: 2%;

    background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);

    height: 95%;
    overflow-y: auto;
    overflow-x: hidden;         /

    display: flex;
    flex-direction: column;
    gap: 1.5%;

   color: #fff;
}

     */

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2%; /* минимальные отступы слева и справа */
    box-sizing: border-box;
}

.glass-container {  max-width: 1200px;
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 20px;
     /* Толстый белый бордер как рамка устройства */
    border: 6px solid rgba(255, 255, 255, 0.9);

    /* Объёмная тень для эффекта панели */
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),   /* внешняя тень */
        inset 0 0 20px rgba(255, 255, 255, 0.1); /* внутренняя подсветка */

    /* Плавный переход при наведении */
    transition: all 0.3s ease;/* Включаем вертикальную прокрутку при переполнении */
    overflow-y: auto;

    /* Скрываем стандартный скроллбар */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

.wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.glass-container:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 0 25px rgba(255, 255, 255, 0.15);
}





/* Ряд с левым и правым блоком */
.inner-row { //border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    width: 100%;
    gap: 20px;
}

/* Левая колонка 25% */
.left-col {
    flex: 0 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Картинка котика */
.left-col img {
    width: 80%;        /* по умолчанию занимает 80% колонки */
    max-width: 200px;  /* ограничение на больших экранах */
    height: auto;
    object-fit: contain;
}

/* Правая колонка 75% */
.right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding:20px 10px 20px 0px;
}

.search-box {
    background: transparent;       /* прозрачный фон */
    color: white;                  /* белый текст */
    font-family: Arial, sans-serif;/* шрифт */
    font-size: 16px;
    border: 1px solid rgba(255,255,255,0.3);
    resize: none;                  /* убираем ручку изменения размера */
    overflow: hidden;              /* убираем полосы прокрутки */
    box-sizing: border-box;
    padding: 14px 16px;
}

/* Placeholder */
.search-box::placeholder {
    color: rgba(255, 255, 255, 0.6);
}


.button-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* Белые кнопки */
.button-grid button {  font-family: 'ai_01';
    padding: 12px;
    border: none;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1); /* полностью белые */
    color: #000;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* При наведении прозрачные */
.button-grid button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* почти прозрачные */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* оставляем тень без изменений */
}

/* Адаптивность */
@media (max-width: 1024px) {
    .button-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .button-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .button-grid button {
        padding: 8px;
        font-size: 14px;
        border-radius: 10px;
    }
}

@media (max-width: 360px) {
    .button-grid button {
        padding: 6px;
        font-size: 13px;
    }
}


/* скрываем левый блок на мобильных */
@media (max-width: 900px) {
    .left-col {
        display: none;
    }
    .right-col {
        flex: 1 1 100%;
    }
    .inner-row {
        gap: 0;
    }
}

/* Меняем сетку кнопок на планшете/мобильном */
@media (max-width: 900px) {
    .button-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-box {
        font-size: 14px;
        padding: 12px 14px;
    }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .glass-container {
       height: 98%;    background: rgba(255, 255, 255, 0.1);
    }
}

/* Скрываем скроллбар, но прокрутка сохраняется */
.glass-container::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
}
.glass-container {
    scrollbar-width: none;      /* Firefox */
}



webkit-scrollbar {display: none;}
.margindiv_5 {height:5px;}

.margindiv_10 {height:25px;}
.margindiv_15 {height:15px;} .margindiv_20 {height:20px;}
.margindiv_25 {height:25px;}

#main_tab {

   margin:15px 3% 15px 3%;
   width: 94%;
  max-width: 1200px;
 // background: red;
// background: transparent;
//box-shadow: 0px 0px 50px 0px #e1d6d0;

 font-family: "ai_01", serif;
  font-weight: 400;    font-size: 20px;
  font-style: normal;
  color:#fff;

}