html,body {
   background: #E4E4E4;
    font-family:Montserrat;   box-sizing: border-box;    height: 100%;     width: 100%;
    font-size: 14px; color:#fff; padding: 0; margin: 0; position: relative;
  }
 a {color:#000; text-decoration: none;}
  /* ===============================НАЧАЛО УТИЛИТАРНЫХ КЛАССОВ==============================*/
  .container {
   width: 1230px;
    margin:auto;
  }
  header {position: fixed; z-index: 11; background: url(/img/stra1.png) 40% 25% #037E5D; width: 100%; box-shadow: inset 5px 5px 35px #12A47D;
  border-bottom: 1px solid #1A755D;
  top: 0;}
  .logis {width: calc(100% - 500px);  margin-top:13px;} 
  .logo { width: 120px;}
  .log { width: calc(100% - 140px); height: 50px; line-height: 50px; padding-left: 15px; text-align: center;}
.back {display: block; width: 100%; padding: 10px; text-align: center;   box-sizing: border-box;  background-color: #ffe75d; margin-top: 15px; border-radius: 10px; color:#272727;}
        h1 {    font-family:Montserrat; font-size: 21px; margin: 0; padding: 0;}
  .login {background: url(/img/snt.png) 70% no-repeat #037E5D !important;}
  .logins{background:  #037E5D !important;}
.login h5 {padding: 0; margin: 0; font-size: 16px; text-align: center; margin-bottom: 15px;  }
.loading {text-align: center;  padding-top: 60px;}
.flog { margin: 15px 0px; text-align: center;}
.butter svg {height: 22px; margin-bottom: -5px;}
.otvet { background: url(/img/ph1.png) 5px #053d2e; width: 100%;  box-sizing: border-box; padding: 15px; font-size: 14px; font-weight: 700; text-align: center;}
.inp {background-color: #065741; color:#fff; height: 45px; line-height: 45px; border: 1px solid #073d2f; box-sizing: border-box; padding: 10px; width: 100%;   font-family:Montserrat; border-radius: 15px; margin-bottom: 15px;}
.tin {font-size: 13px; margin-bottom: 6px; box-sizing: border-box; padding-left: 10px; color:#d2e9e3; text-align: left;}
.go {background-color: #053d2e; color:#fff; height: 45px; line-height: 45px;  margin-bottom: 9px; border: 1px solid #073d2f;box-sizing: border-box;  font-weight: 700;   font-family:Montserrat; font-size: 14px;  width: 100%; border-radius: 15px;}
.gois {background-color: #ffe75d; color:#272727; height: 45px; line-height: 45px;  margin-bottom: 9px; border: 1px solid #bbb04a;box-sizing: border-box;  font-weight: 700;    font-family:Montserrat; font-size: 14px;  width: 100%; border-radius: 15px;}
.button {background-color: #ffe75d;  max-width: 400px; color:#272727; height: 45px; text-align: center; line-height: 45px;  margin-bottom: 9px; border: 1px solid #bbb04a;box-sizing: border-box;  font-weight: 700;  margin-top: 5px;  font-family:Montserrat; font-size: 14px;  width: 100%; border-radius: 15px;}

.block {background-color: #fff; box-sizing: border-box; padding: 15px; color:#000; border: 1px solid #c9c9c9; border-radius: 15px;}
.name_input {font-size: 13px; margin-bottom: 6px; box-sizing: border-box; padding-left: 5px; color:#666666; text-align: left;}
.inpas {background-color: #ffffff; color:#141414; height: 45px; max-width: 400px; line-height: 45px; border: 1px solid #8b8b8b; box-sizing: border-box; padding: 10px; width: 100%;   font-family:Montserrat; border-radius: 15px; margin-bottom: 15px;}
.inpaser {background-color: #ffffff; color:#141414; height: 45px; max-width: 100%; line-height: 45px; border: 1px solid #8b8b8b; box-sizing: border-box; padding: 10px; width: 100%;   font-family:Montserrat; border-radius: 15px; margin-bottom: 15px;}
.cls {
    animation: firefly 7s infinite;
}


.backers {width: 100%; box-sizing: border-box; padding: 8px; text-align: center; background-color: #E2ECE9; color:#242424; font-weight: 700; cursor: pointer; border-radius: 10px; margin-bottom: 10px;}
.post {width: 250px; cursor: pointer; box-sizing: border-box; padding: 15px; margin: 5px 10px;box-shadow: 0px 0px 5px #e8e8e8;
  border-radius: 8px;}
.post .pico {width: 100%; height: 150px; overflow: hidden; border-radius: 5px;}
.pico img {width: 100%; height: 100%; object-fit: cover;}
.post ._name {margin-top: 8px; font-weight: 700}
.post:hover {background-color: #f5f5f5;}

  /* Каркас — минимум отступов, никаких теней */
        .demo-box {
            width: 100%;
            max-width: 1200px;
            background: transparent; margin: 10px 0px;
        } 
        /* ---------- Навигация: чистый минимализм ---------- */
        .nav-wrap {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            background: transparent;
        }

        /* Кнопки-стрелки — тонкие, почти прозрачные */
        .nav-arrow {
            flex: 0 0 auto;
            width: 36px;
            height: 36px;
            border-radius: 36px;
            background: white;
            border: 1px solid #d0d9e4;
            color: #5b6f82;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.1s ease;
            box-shadow: none;
            opacity: 0.9;
            user-select: none;
        }

        .nav-arrow:hover:not(:disabled) {
            background: #edf2f7;
            border-color: #9aaebb;
            color: #1a2b3c;
            opacity: 1;
        }

        .nav-arrow:active:not(:disabled) {
            background: #dde5ef;
            transform: scale(0.96);
        }

        .nav-arrow:disabled {
            opacity: 0.2;
            border-color: #cfdae5;
            pointer-events: none;
        }

        /* Контейнер скролла — вообще без украшений */
        .nav-scroll {
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #b4c1ce #eef2f6;
            padding: 6px 0 14px 0;
            margin: -6px 0 -14px 0;  /* не съедаем клики */
        }

        .nav-scroll::-webkit-scrollbar {
            height: 4px;
            background: transparent;
        }

        .nav-scroll::-webkit-scrollbar-track {
            background: #eef2f6;
            border-radius: 20px;
        }

        .nav-scroll::-webkit-scrollbar-thumb {
            background: #b4c1ce;
            border-radius: 20px;
        }

        .nav-scroll::-webkit-scrollbar-thumb:hover {
            background: #8fa0b5;
        }

        /* Набор ссылок/кнопок — минимум декора */
        .nav-list {
            display: inline-flex;
            flex-wrap: nowrap;
            gap: 8px;
            padding: 0 2px;
        }

        .nav-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 18px;
            background: white;
            border: 1px solid #dde3ea;
            border-radius: 40px;
            font-size: 0.95rem;
            font-weight: 450;
            color: #1f2d3a;
            text-decoration: none;
            transition: all 0.1s;
            white-space: nowrap;
            cursor: default;  /* или pointer если нужны ссылки */
            line-height: 1.4;
            box-shadow: none;
        }

        /* Только чуть‑чуть реакции */
        .nav-item:hover {
            background: #f2f6fc;
            border-color: #bac8d9;
        }

        .nav-item:active {
            background: #e2eaf3;
            transform: translateY(1px);
        }

        /* Футер с подсказкой — скромный */
        .info-line {
            margin-top: 32px;
            display: flex;
            gap: 28px;
            font-size: 0.85rem;
            color: #4f6479;
            background: transparent;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-item code {
            background: #e9edf3;
            padding: 4px 8px;
            border-radius: 40px;
            color: #1f3a5f;
            font-size: 0.75rem;
            border: 1px solid #d2ddee;
        }

        /* Совсем узкие экраны */
        @media (max-width: 500px) {
            .nav-item {
                padding: 6px 14px;
                font-size: 0.85rem;
            }
            .nav-arrow {
                width: 32px;
                height: 32px;
                font-size: 18px;
            }
            .info-line {
                flex-wrap: wrap;
                gap: 12px;
            }
        }

        /* Для тач-устройств убираем лишние hover-эффекты */
        @media (hover: none) {
            .nav-item:hover {
                background: white;
                border-color: #dde3ea;
            }
            .nav-arrow:hover:not(:disabled) {
                background: white;
                border-color: #d0d9e4;
            }
        }
@keyframes firefly {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    25%, 75% {
        opacity: 0.2;
        transform: scale(0.75);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}
.info {width: 12px; height: 12px; background-color: #ffe75d; color:#000; text-align: center; line-height: 12px; border-radius: 9px; position: absolute; top: 5px; left: 5px; font-size: 11px;}

.yes {font-size: 13px; margin: 8px 0 15px; padding: 0px 10px; text-align: left;}
.yes a {color:#fff !important; text-decoration: underline;}
.flog img { height: 50px;}
.forma {max-width: 390px; margin: auto;  background:50% url(/img/stra1.png); box-sizing: border-box; padding: 25px; border: 5px solid #065741; border-radius: 15px;}
.formator {max-width: 1000px; margin: auto;  background:50% url(/img/stra1.png); box-sizing: border-box; padding: 25px; border: 5px solid #065741; border-radius: 15px;}
 .butter {cursor: pointer; position: relative;}
 .butter:hover {opacity: 0.8;}
 main {min-height: 700px; margin: 185px 0px 25px; color:#000;}
 .footer {padding: 40px 0 15px; color:#c0c0c0; border-top: 1px solid #dddddd; }
 .footera {padding: 40px 0 15px; color:#c0c0c0; border-top: 1px solid #f8f8f8; margin-top: 30px; color:#fff !important; }
  .footera a {color:#fff !important}
  .logo img { width: 100%; padding-left: 15px;}
  h1 {  padding: 0; margin: 0;}
  .toping {width:480px; height:73px; line-height: 73px;font-size:14px; padding-top:15px}
  .toping .zd {padding: 0px 10px; height: 40px; text-align: center; box-shadow: inset 5px 5px 5px #ffffff17; background-color: #33967B; border-radius: 8px; line-height: 40px;}
  .toping .st { padding: 0px 10px; height: 40px; text-align: center; box-shadow: inset 5px 5px 5px #ffffff17; background-color: #33967B;   border-radius: 8px; line-height: 40px;}
  .toping .rt {padding: 0px 10px; height: 40px; text-align: center; box-shadow: inset 5px 5px 5px #ffffff17; background-color: #33967B; border-radius: 8px; line-height: 40px;}
  .toping .ex {padding: 0px 10px; height: 40px; text-align: center; box-shadow: inset 5px 5px 5px #ffffff17; background-color: #33967B; border-radius: 8px; line-height: 40px;}
  .flexy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;

}






     .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  box-sizing: border-box;
}
 .footer a {padding-right: 10px;}
 /* Карточка для красоты */
        .demo-card {
            background: white;
            border-radius: 24px;box-sizing: border-box;
            box-shadow: 0 20px 35px -8px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 1230px;
            padding: 19px 24px; margin-bottom: 10px;
        }

        .demo-card h2 {
            margin-bottom: 24px;
            font-weight: 500;
            color: #1e293b;
            font-size: 1.5rem;
            padding-left: 8px;
        }

        /* Контейнер всего меню (стрелки + лента) */
        .menu-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        /* Кнопки-стрелки */
        .scroll-btn {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background: white;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            color: #334155;
            font-size: 20px;
            user-select: none;
            z-index: 10;
        }

        .scroll-btn:hover:not(:disabled) {
            background: #f8fafc;
            border-color: #94a3b8;
            box-shadow: 0 6px 14px rgba(0,0,0,0.08);
            color: #0f172a;
        }

        .scroll-btn:active:not(:disabled) {
            background: #e2e8f0;
            transform: scale(0.95);
        }

        .scroll-btn:disabled {
            opacity: 0.2;
            cursor: default;
            pointer-events: none;
            box-shadow: none;
            border-color: #cbd5e1;
        }

        /* Область прокрутки */
        .menu-scroll-container {
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            white-space: nowrap;
            padding: 8px 0 16px 0; /* чуть снизу для красоты */
            margin: -8px 0 -16px 0; /* компенсация для тени */
            scrollbar-width: thin;
            scrollbar-color: #94a3b8 #e9eef3;

            /* Сглаживание на тачпаде и тачскрине */
            -webkit-overflow-scrolling: touch;
        }

        /* Стилизация скролла для WebKit (Chrome, Safari, Edge) */
        .menu-scroll-container::-webkit-scrollbar {
            height: 6px;
            background: transparent;
        }
        .menu-scroll-container::-webkit-scrollbar-track {
            background: #e9eef3;
            border-radius: 20px;
            margin: 0 10px;
        }
        .menu-scroll-container::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 20px;
        }
        .menu-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* Само меню (ряд кнопок) */
        .menu-items {
            display: inline-flex;
            flex-wrap: nowrap;
            gap: 12px;
            padding: 0 4px;
        }

        /* Стиль пунктов меню */
        .menu-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 28px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: 500;
            color: #1e293b;
            box-shadow: 0 2px 6px rgba(0,0,0,0.02);
            cursor: default;
            transition: all 0.1s;
            white-space: nowrap;
            user-select: none;
        }

        .menu-item:first-child {
            margin-left: 2px;
        }
        .menu-item:last-child {
            margin-right: 2px;
        }

        .menu-item:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
            transform: translateY(-1px);
            box-shadow: 0 10px 20px -10px rgba(0,100,200,0.2);
        }

        /* Состояние — нажали */
        .menu-item:active {
            background: #e2e8f0;
            transform: translateY(0);
        }

        /* Инструкция мелкая */
        .hint {
            margin-top: 30px;
            color: #475569;
            font-size: 0.9rem;
            border-top: 1px dashed #cbd5e1;
            padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

        .hint-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hint-item span {
            background: #eef2ff;
            padding: 4px 12px;
            border-radius: 40px;
            color: #1e3a8a;
            font-size: 0.8rem;
        }

        .demo-box h3 {
            font-weight: 400;
            font-size: 1.1rem;
            color: #2c3e50;
            margin-bottom: 20px;
            letter-spacing: -0.01em;
            border-bottom: 1px solid #dce4ec;
            padding-bottom: 12px;
        }

        /* навигация */
        .nav-wrap {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            background: transparent;
        }

        /* стрелки */
        .nav-arrow {
            flex: 0 0 auto;
            width: 36px;
            height: 36px;
            border-radius: 36px;
            background: white;
            border: 1px solid #d0d9e4;
            color: #5b6f82;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.1s ease;
            box-shadow: none;
            opacity: 0.9;
            user-select: none;
        }

        .nav-arrow:hover:not(:disabled) {
            background: #edf2f7;
            border-color: #9aaebb;
            color: #1a2b3c;
            opacity: 1;
        }

        .nav-arrow:active:not(:disabled) {
            background: #dde5ef;
            transform: scale(0.96);
        }

        .nav-arrow:disabled {
            opacity: 0.2;
            border-color: #cfdae5;
            pointer-events: none;
        }

        /* скролл-контейнер */
        .nav-scroll {
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #b4c1ce #eef2f6;
            padding: 6px 0 14px 0;
            margin: -6px 0 -14px 0;
        }

        .nav-scroll::-webkit-scrollbar {
            height: 4px;
            background: transparent;
        }

        .nav-scroll::-webkit-scrollbar-track {
            background: #eef2f6;
            border-radius: 20px;
        }

        .nav-scroll::-webkit-scrollbar-thumb {
            background: #b4c1ce;
            border-radius: 20px;
        }

        .nav-scroll::-webkit-scrollbar-thumb:hover {
            background: #8fa0b5;
        }

        /* список пунктов */
        .nav-list {
            display: inline-flex;
            flex-wrap: nowrap;
            gap: 8px;
            padding: 0 2px;
        }

        .nav-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 18px;
            background: white;
            border: 1px solid #dde3ea;
            border-radius: 40px;
            font-size: 0.95rem;
            font-weight: 450;
            color: #1f2d3a;
            text-decoration: none;
            transition: all 0.1s;
            white-space: nowrap;
            cursor: default;
            line-height: 1.4;
            box-shadow: none;
        }

        .nav-item:hover {
            background: #f2f6fc;
            border-color: #bac8d9;
        }

        .nav-item:active {
            background: #e2eaf3;
            transform: translateY(1px);
        }

        /* подсказка */
        .info-line {
            margin-top: 32px;
            display: flex;
            gap: 28px;
            font-size: 0.85rem;
            color: #4f6479;
            background: transparent;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-item code {
            background: #e9edf3;
            padding: 4px 8px;
            border-radius: 40px;
            color: #1f3a5f;
            font-size: 0.75rem;
            border: 1px solid #d2ddee;
        }

        @media (max-width: 500px) {
            .nav-item {
                padding: 6px 14px;
                font-size: 0.85rem;
            }
            .nav-arrow {
                width: 32px;
                height: 32px;
                font-size: 18px;
            }
            .info-line {
                flex-wrap: wrap;
                gap: 12px;
            }
        }

        @media (hover: none) {
            .nav-item:hover {
                background: white;
                border-color: #dde3ea;
            }
            .nav-arrow:hover:not(:disabled) {
                background: white;
                border-color: #d0d9e4;
            }
        }
        .della { padding: 0px 15px; color:#c53c3c}
.ok {background:#087F5E !important; color:#fff !important; box-shadow: inset 5px 5px 35px #12A47D !important;}
        /* Адаптация для совсем узких — ничего не ломается */
        @media (max-width: 480px) {
            .demo-card {
                padding: 20px 12px;
            }
            .menu-item {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            .scroll-btn {
                width: 36px;
                height: 36px;
            }
        }

        /* Для устройств, где hover ограничен — убираем лишнее */
        @media (hover: none) and (pointer: coarse) {
            .scroll-btn:hover:not(:disabled) {
                background: white;
                border-color: #e2e8f0;
            }
            .menu-item:hover {
                background: white;
                transform: none;
                box-shadow: none;
            }
        }
        @media (max-width: 1230px) {
     .container {
   width: 98%;
    margin:auto;
  }
}
   .grate { margin-bottom: 10px;}
      @media (max-width: 550px) { 
 main {min-height: 700px; margin: 125px 0px 25px;}
 
 .forma {max-width: 90%; margin: auto;  }
.inp {font-size: 17px;}
        .login {background: url(/img/snt.png) 80% no-repeat #037E5D !important;  }
#scrollLeft {display: none;}
#scrollRight {display: none;}
          .toping .zd { height: 40px; text-align: center; background-color: #33967B; border-radius: 8px; line-height: 40px;}
          .toping .st span {display: none;}
          .toping .ex span {display: none;}
          .toping .rt span {display: none;}
          .toping .rt   {padding: 0px 11px;}
  .toping .st { height: 40px; text-align: center; padding: 0px 11px;  background-color: #33967B; border-radius: 8px; line-height: 40px;}
  .toping .ex {height: 40px; text-align: center; padding:0px 11px; background-color: #33967B; border-radius: 8px; line-height: 40px;}
        .footer {font-size: 13px; padding-top: 10px; color:#000}
        .footer a { padding: 10px; display: block; width: 100%; border-top: 1px solid #cccccc; box-sizing: border-box;}
        .grate { margin-bottom: 18px; padding-top: 8px;}
             .container {
   width: 94%;
    margin:auto;
  }
.logis {display: none;}.toping {
  width: 100%; }   .demo-card {
    padding: 5px 5px;
    box-sizing: border-box;
    border-radius: 15px;
  }.toping {
  width: 100%;
  height: unset;
  line-height: 43px;
  font-size: 14px;
  padding-top: 8px;
  margin-bottom: 8px;
}
      }