:root {
  --bg-light: #f0f2f5;
  --text-light: #222;
}

.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1055%26quot%3b)' fill='none'%3e%3cpath d='M39.14244995885043 186.75930319893467L117.07846675700401 316.46661689222685 246.78578045029622 238.5306000940733 168.84976365214263 108.8232864007811z' fill='rgba(7%2c 105%2c 167%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M896.262%2c464.025C913.935%2c464.85%2c933.125%2c458.892%2c941.159%2c443.129C948.747%2c428.24%2c939.72%2c411.333%2c930.073%2c397.687C922.167%2c386.503%2c909.943%2c380.252%2c896.262%2c379.621C881.161%2c378.924%2c864.728%2c381.565%2c856.577%2c394.296C847.912%2c407.83%2c850.134%2c425.285%2c858.083%2c439.251C866.126%2c453.383%2c880.02%2c463.267%2c896.262%2c464.025' fill='rgba(7%2c 105%2c 167%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M969.6648312340697 120.01861515319987L875.4037328936415 236.42137746566544 991.8064952061071 330.6824758060935 1086.0675935465351 214.279713493628z' fill='rgba(7%2c 105%2c 167%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1323.949%2c619.379C1349.998%2c617.825%2c1368.038%2c597.06%2c1381.946%2c574.98C1397.237%2c550.705%2c1413.8%2c522.682%2c1401.048%2c496.982C1387.336%2c469.346%2c1354.731%2c456.031%2c1323.949%2c458.093C1296.228%2c459.95%2c1276.686%2c482.128%2c1262.878%2c506.237C1249.179%2c530.156%2c1239.489%2c558.444%2c1252.582%2c582.7C1266.199%2c607.927%2c1295.333%2c621.087%2c1323.949%2c619.379' fill='rgba(7%2c 105%2c 167%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1055'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  color: var(--text-light);

}

header {
  padding: 20px;
  text-align: center;
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c298.429C62.012%2c293.601%2c129.729%2c316.911%2c182.211%2c283.527C234.737%2c250.115%2c244.271%2c179.896%2c273.087%2c124.715C303.807%2c65.887%2c354.356%2c14.969%2c357.083%2c-51.341C360.02%2c-122.779%2c343.892%2c-204.782%2c288.494%2c-249.982C233.398%2c-294.935%2c150.739%2c-261.716%2c81.175%2c-276.455C18.952%2c-289.638%2c-34.934%2c-343.672%2c-97.409%2c-331.744C-161.005%2c-319.602%2c-202.285%2c-260.87%2c-246.782%2c-213.838C-293.228%2c-164.746%2c-360.322%2c-119.612%2c-362.026%2c-52.052C-363.738%2c15.836%2c-282.437%2c54.336%2c-255.112%2c116.506C-227.174%2c180.071%2c-257.939%2c273.082%2c-201.407%2c313.396C-145.462%2c353.291%2c-68.506%2c303.763%2c0%2c298.429' fill='%230b2239'%3e%3c/path%3e%3cpath d='M1440 1275.966C1572.425 1251.772 1608.13 1070.6109999999999 1721.2939999999999 997.702 1834.247 924.929 2010.2939999999999 964.9300000000001 2090.309 856.986 2170.426 748.904 2160.7309999999998 590.091 2118.007 462.517 2077.978 342.98900000000003 1954.719 280.522 1866.953 190.043 1785.061 105.61900000000003 1735.278-30.565000000000055 1619.518-51.38300000000004 1503.206-72.30100000000004 1417.215 64.29399999999998 1301.512 88.35300000000001 1169.642 115.774 999.429 0.2949999999999591 905.719 97.043 813.876 191.863 900.375 353.96799999999996 917.446 484.868 930.177 582.487 967.565 669.085 992.7339999999999 764.259 1024.185 883.187 1002.905 1021.538 1083.863 1114.1599999999999 1171.4479999999999 1214.364 1309.081 1299.885 1440 1275.966' fill='%23113255'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  color: white;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.container {
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  background: #ffffffc2;
}


textarea {
  width: 96%;
  height: 130px;
  padding: 12px;
  font-size: 16px;
  border-radius: 15px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
  
}

textarea:focus {
  border-color: #4caf50;
 outline: none;
}

input[type=number] {
  width: 100px;
  padding: 8px;
  font-size: 16px;
  margin-right: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.inst{
    padding: 10px 22px;
  font-size: 16px;
  border: none;
  border-radius: 20px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c298.429C62.012%2c293.601%2c129.729%2c316.911%2c182.211%2c283.527C234.737%2c250.115%2c244.271%2c179.896%2c273.087%2c124.715C303.807%2c65.887%2c354.356%2c14.969%2c357.083%2c-51.341C360.02%2c-122.779%2c343.892%2c-204.782%2c288.494%2c-249.982C233.398%2c-294.935%2c150.739%2c-261.716%2c81.175%2c-276.455C18.952%2c-289.638%2c-34.934%2c-343.672%2c-97.409%2c-331.744C-161.005%2c-319.602%2c-202.285%2c-260.87%2c-246.782%2c-213.838C-293.228%2c-164.746%2c-360.322%2c-119.612%2c-362.026%2c-52.052C-363.738%2c15.836%2c-282.437%2c54.336%2c-255.112%2c116.506C-227.174%2c180.071%2c-257.939%2c273.082%2c-201.407%2c313.396C-145.462%2c353.291%2c-68.506%2c303.763%2c0%2c298.429' fill='%230b2239'%3e%3c/path%3e%3cpath d='M1440 1275.966C1572.425 1251.772 1608.13 1070.6109999999999 1721.2939999999999 997.702 1834.247 924.929 2010.2939999999999 964.9300000000001 2090.309 856.986 2170.426 748.904 2160.7309999999998 590.091 2118.007 462.517 2077.978 342.98900000000003 1954.719 280.522 1866.953 190.043 1785.061 105.61900000000003 1735.278-30.565000000000055 1619.518-51.38300000000004 1503.206-72.30100000000004 1417.215 64.29399999999998 1301.512 88.35300000000001 1169.642 115.774 999.429 0.2949999999999591 905.719 97.043 813.876 191.863 900.375 353.96799999999996 917.446 484.868 930.177 582.487 967.565 669.085 992.7339999999999 764.259 1024.185 883.187 1002.905 1021.538 1083.863 1114.1599999999999 1171.4479999999999 1214.364 1309.081 1299.885 1440 1275.966' fill='%23113255'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  color: white;
  cursor: pointer;
  background-size: cover;
  font-weight: bold;
  transition: all 0.3s ease;
}
 .inst:hover{box-shadow: 0 12px 25px rgba(0,0,0,0.3);}
a{
  text-decoration: none;
}
button {
  padding: 10px 22px;
  font-size: 16px;
  border: none;
  border-radius: 20px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c298.429C62.012%2c293.601%2c129.729%2c316.911%2c182.211%2c283.527C234.737%2c250.115%2c244.271%2c179.896%2c273.087%2c124.715C303.807%2c65.887%2c354.356%2c14.969%2c357.083%2c-51.341C360.02%2c-122.779%2c343.892%2c-204.782%2c288.494%2c-249.982C233.398%2c-294.935%2c150.739%2c-261.716%2c81.175%2c-276.455C18.952%2c-289.638%2c-34.934%2c-343.672%2c-97.409%2c-331.744C-161.005%2c-319.602%2c-202.285%2c-260.87%2c-246.782%2c-213.838C-293.228%2c-164.746%2c-360.322%2c-119.612%2c-362.026%2c-52.052C-363.738%2c15.836%2c-282.437%2c54.336%2c-255.112%2c116.506C-227.174%2c180.071%2c-257.939%2c273.082%2c-201.407%2c313.396C-145.462%2c353.291%2c-68.506%2c303.763%2c0%2c298.429' fill='%230b2239'%3e%3c/path%3e%3cpath d='M1440 1275.966C1572.425 1251.772 1608.13 1070.6109999999999 1721.2939999999999 997.702 1834.247 924.929 2010.2939999999999 964.9300000000001 2090.309 856.986 2170.426 748.904 2160.7309999999998 590.091 2118.007 462.517 2077.978 342.98900000000003 1954.719 280.522 1866.953 190.043 1785.061 105.61900000000003 1735.278-30.565000000000055 1619.518-51.38300000000004 1503.206-72.30100000000004 1417.215 64.29399999999998 1301.512 88.35300000000001 1169.642 115.774 999.429 0.2949999999999591 905.719 97.043 813.876 191.863 900.375 353.96799999999996 917.446 484.868 930.177 582.487 967.565 669.085 992.7339999999999 764.259 1024.185 883.187 1002.905 1021.538 1083.863 1114.1599999999999 1171.4479999999999 1214.364 1309.081 1299.885 1440 1275.966' fill='%23113255'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  color: white;
  cursor: pointer;
  background-size: cover;
  font-weight: bold;
  transition: all 0.3s ease;
}

button:hover {
  
  box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.loader {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #0e2a47;
  margin-top: 20px;
  display: none;
}

.groups {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  perspective: 1000px;
}

.group-card {
  padding: 25px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(255,0,255,0.2), rgba(255,255,0,0.2));
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease, scale 0.5s ease;
  opacity: 0;
  transform: scale(0.8);
 
}

.group-card.show {
  opacity: 1;
  transform: scale(1);
}

.group-card h3 {
  text-align: center;
  font-size: 1.4em;
  margin-bottom: 15px;
  text-shadow: 0 0 5px rgb(4 4 4 / 30%);
}

.group-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.group-card li {
  padding: 4px 0;
  font-size: 1.1em;
}

.total-count {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #0e2a47;
  text-align: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 600px) {
  .groups { grid-template-columns: 1fr; }
  .inst{
    display: none;
  }
  textarea { height: 110px; }
  input[type=number], button { width: 100%; margin-bottom: 25px; }
}
/* Sticky Footer Layout */
/* Бүткүл дене flex колдонуу, футер аягында */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* экрандын толук бийиктиги */
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

/* Контентти ийкемдүү кылуу */
.container {
  flex: 1;               /* вертикалдык бойдон экранды ээлейт */
  max-width: 1200px;     /* эң чоң тууралык */
  width: 90%;            /* экранга салыштырмалуу тууралык */
  margin: 30px auto;     /* экрандын ортосуна жайгаштыруу */
  padding: 20px;         /* ички боштук */
  box-sizing: border-box; /* padding эсепке алынсын */
  background: #ffffffc2;
  box-shadow: 0px 0px 4px 0px #bfbfbf;
  border-radius: 5px;
}


/* Footer стили */
.site-footer {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M0%2c298.429C62.012%2c293.601%2c129.729%2c316.911%2c182.211%2c283.527C234.737%2c250.115%2c244.271%2c179.896%2c273.087%2c124.715C303.807%2c65.887%2c354.356%2c14.969%2c357.083%2c-51.341C360.02%2c-122.779%2c343.892%2c-204.782%2c288.494%2c-249.982C233.398%2c-294.935%2c150.739%2c-261.716%2c81.175%2c-276.455C18.952%2c-289.638%2c-34.934%2c-343.672%2c-97.409%2c-331.744C-161.005%2c-319.602%2c-202.285%2c-260.87%2c-246.782%2c-213.838C-293.228%2c-164.746%2c-360.322%2c-119.612%2c-362.026%2c-52.052C-363.738%2c15.836%2c-282.437%2c54.336%2c-255.112%2c116.506C-227.174%2c180.071%2c-257.939%2c273.082%2c-201.407%2c313.396C-145.462%2c353.291%2c-68.506%2c303.763%2c0%2c298.429' fill='%230b2239'%3e%3c/path%3e%3cpath d='M1440 1275.966C1572.425 1251.772 1608.13 1070.6109999999999 1721.2939999999999 997.702 1834.247 924.929 2010.2939999999999 964.9300000000001 2090.309 856.986 2170.426 748.904 2160.7309999999998 590.091 2118.007 462.517 2077.978 342.98900000000003 1954.719 280.522 1866.953 190.043 1785.061 105.61900000000003 1735.278-30.565000000000055 1619.518-51.38300000000004 1503.206-72.30100000000004 1417.215 64.29399999999998 1301.512 88.35300000000001 1169.642 115.774 999.429 0.2949999999999591 905.719 97.043 813.876 191.863 900.375 353.96799999999996 917.446 484.868 930.177 582.487 967.565 669.085 992.7339999999999 764.259 1024.185 883.187 1002.905 1021.538 1083.863 1114.1599999999999 1171.4479999999999 1214.364 1309.081 1299.885 1440 1275.966' fill='%23113255'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  color: #fff;
  padding: 20px 30px;
  text-align: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
  background-size: cover;
  background-repeat: no-repeat;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin: 0 10px;
}

.site-footer a:hover {
  color: #ffd700;
}

.site-footer .footer-info {
  margin-bottom: 8px;
  font-size: 0.95em;
}

.site-footer .author {
  font-weight: bold;
  font-size: 1em;
}

/* Мобилдик шайкештик */
@media (max-width: 600px) {
  .site-footer {
    padding: 15px 10px;
    font-size: 0.9em;
  }
}