:root{
  --brand: #ff0000;
  --brand-dark: #b30000;
  --brand-light: #ff6666;
  --surface: #ffffff;
  --text: #111111;
  --muted: #777777;
  --border: #e9e9e9;
  --shadow: 0 8px 20px rgba(0,0,0,0.08);
}

body{
  background-color: var(--surface);
  color: var(--text);
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,*::before,*::after{box-sizing:inherit}

.container{
  width:100%;
  margin:0 auto;
  text-align:center;
  background-color:var(--surface);
  padding:20px;
}

.header{
  display:flex;
  align-items:center;
  height:70px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 20px;
  text-align:left;
  box-shadow:none;
}

.title{
  color:var(--brand);
  font-weight:600;
  font-size:18px;
  margin:20px 0;
  padding:5px 10px;
  background:none;
  border:none;
  text-align:center;
  text-transform:capitalize;
  line-height:1.3;
}

.foot{
  text-align:center;
  padding:15px 0;
  font-size:13px;
  color:var(--muted);
}
.foot a{
  text-decoration:none;
  color:var(--brand);
}
.foot a:hover{
  color:var(--brand-dark);
  cursor:pointer;
  text-decoration:underline;
}

.play{
  background: #fff;
  padding:10px 15px;
  margin:5px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:#333;
}

.list-inline{padding-left:0;margin-left:0;list-style:none}
.list-inline>li{display:inline-block;padding:0 8px}

.menux{
  text-align:center;
  margin:15px 0;
}
.menux a{
  border-radius:3px;
  border:1px solid var(--brand);
  font-weight:700;
  color:var(--brand);
  margin:5px 3px;
  padding:8px 12px;
  text-decoration:none;
  background:var(--surface);
  transition:background-color .18s ease,color .18s ease,transform .06s ease;
}
.menux a:hover{
  background:var(--brand);
  color:var(--surface);
  cursor:pointer;
  transform:translateY(-1px);
}

.videos{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  text-align:center;
  padding:0 15px;
}

.razdel{
  font-size:14px;
  width:24.5%;
  display:inline-block;
  padding:5px;
  box-sizing:border-box;
}
.razdel a{
  text-decoration:none;
  color:var(--brand);
  display:block;
  padding:10px 5px;
  text-align:center;
  font-weight:700;
  border:1px solid var(--brand);
  border-radius:3px;
  margin:5px 3px;
  background:var(--surface);
  transition:background-color .18s ease,color .18s ease,transform .06s ease;
}
.razdel a:hover{
  background:var(--brand);
  color:var(--surface);
  cursor:pointer;
  transform:translateY(-1px);
}

.video{
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  background:var(--surface);
  display:inline-block;
  width:100%;
  max-width:23%;
  text-align:center;
  margin:10px 8px;
  box-shadow:none;
  transition:box-shadow .28s ease,transform .12s ease;
  box-sizing:border-box;
}
.video a{display:block;color:var(--brand);text-decoration:none}
.video a:hover{cursor:pointer;color:var(--brand-dark)}
.video:hover{box-shadow:0 8px 24px rgba(255,0,0,0.08);transform:translateY(-4px)}

.vsc{position:relative;padding:5px;box-sizing:border-box}
.vsc img{max-width:100%;width:100%;display:block}

.name{
  white-space:normal;
  overflow:visible;
  height:auto;
  line-height:1.2em;
  padding:5px 10px;
  font-weight:600;
  color:var(--text);
  box-sizing:border-box;
}

a.lnk1,a.nav{
  border-radius:3px;
  white-space:nowrap;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  padding:8px 12px;
  color:var(--brand);
  border:1px solid var(--brand);
  background:var(--surface);
  margin:5px 3px;
  transition:background-color .18s ease,color .18s ease,transform .06s ease;
}
a.lnk1:hover,a.nav:hover{
  cursor:pointer;
  background:var(--brand);
  color:var(--surface);
  text-decoration:none;
  transform:translateY(-1px);
}

.navactive{
  border:1px solid var(--brand-dark);
  background:var(--brand);
  color:var(--surface);
}

input,select,textarea{
  border-radius:3px;
  padding:7px;
  color:var(--text);
  margin:2px 0;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:none;
  font-size:14px;
  box-sizing:border-box;
}
input[type=submit]{
  font-size:14px;
  font-weight:700;
  border-radius:3px;
  padding:10px 16px;
  color:var(--surface);
  background:linear-gradient(180deg,var(--brand-light),var(--brand));
  border:1px solid var(--brand);
  cursor:pointer;
  transition:filter .12s ease,transform .06s ease;
}
input[type=submit]:hover{filter:brightness(1.04);transform:translateY(-1px)}
input[type=submit]:active{transform:translateY(0)}

.bigblock a{
  display:inline-block;
  margin:5px 7px;
  padding:8px 15px;
  border-radius:3px;
  background:var(--surface);
  color:var(--muted);
  font-weight:700;
  text-decoration:none;
  transition:background-color .12s ease,color .12s ease,transform .06s ease;
}
.bigblock a:hover{background:var(--brand);color:var(--surface);cursor:pointer;transform:translateY(-1px)}

.infoblock,.adska{
  color:#444;
  text-align:left;
  padding:10px 15px;
  margin:5px 0;
  background-color:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  font-size:14px;
  box-sizing:border-box;
}

.adska a{
  text-decoration:none;
  color:var(--brand);
  font-size:14px;
  line-height:2;
}
.adska a:last-child{margin-bottom:0}
.adska a:hover{cursor:pointer;color:var(--brand-dark)}

.time{
  position:absolute;
  right:5px;
  top:5px;
  background:var(--brand);
  height:22px;
  border-radius:4px;
  font-weight:700;
  line-height:22px;
  color:var(--surface);
  padding:0 10px;
  z-index:3;
}

.kol{
  float:right;
  text-align:center;
  color:var(--surface);
  padding:3px 6px 0;
  border-radius:3px;
  font-size:12px;
  height:18px;
  background-color:var(--brand-dark);
  border:1px solid #660000;
}

.pagination-container{display:flex;justify-content:center;margin:1em 0}

.pagination{display:flex;list-style:none;padding:0;gap:5px}

.pagination li a,.pagination li span{
  padding:6px 12px;
  background-color:var(--surface);
  color:#333;
  border:1px solid var(--border);
  border-radius:3px;
  text-decoration:none;
  transition:background-color .12s ease,transform .06s ease;
}
.pagination li a:hover{background-color:var(--brand-light);transform:translateY(-1px)}
.pagination li.active span{
  background-color:var(--brand);
  color:var(--surface);
  font-weight:bold;
  pointer-events:none;
}

@media (max-width:1080px){.video{max-width:31%}}
@media (max-width:800px){.alltitle{font-size:16px}.video{max-width:46%}}
@media (max-width:550px){.video{max-width:47%}.alltitle{font-size:15px}a.lnk1{margin:2px 0;display:block}}
@media (max-width:467px){.video{max-width:95%;margin:5px 0}.vsc img{max-width:100%}}
@media (max-width:1100px){.razdel{width:32%}}
@media (max-width:850px){.razdel{width:49%}}
@media (max-width:570px){.razdel{width:99%;display:block;margin:0}}
@media (max-width:260px){.razdel{font-size:12px}}

.bigblock,.category-block{
  padding:15px 20px;
  margin:10px 0;
  background:var(--surface);
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid var(--border);
}

.icons,.иконки{display:flex;gap:10px;padding:10px 0;justify-content:center}

.videoinfo{
  padding:12px 15px;
  margin:10px 0 15px 0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  color:#333;
  box-sizing:border-box;
  text-align:left;
}

.video-container{
  width:720px;
  height:405px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  position:relative;
  border-radius:8px;
  overflow:hidden;
}

.video-container .video{margin:0;width:100%;height:100%}

@media (max-width:768px){
  .video-container{width:100%;height:auto;aspect-ratio:16/9;border-radius:8px}
  .video-container .video{height:100%}
}

.plyr{position:relative;width:100%;height:100%}

.bigblock.category-block a{color:var(--brand);font-weight:700;text-decoration:none}
.bigblock.category-block a:hover{color:var(--brand-dark)}

.menux{max-width:1220px;margin:16px auto 10px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}

.search-form{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:6px auto 8px;max-width:720px}

.search-form input[type="text"]{
  flex:1 1 420px;
  min-width:220px;
  padding:10px 16px;
  border:1px solid #dcdcdc;
  border-radius:12px;
  background:#fafafa;
  font-size:15px;
  height:42px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.search-form input[type="text"]:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,0,0,0.09)}

.search-form input[type="submit"],.search-form button{
  height:42px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,var(--brand-light),var(--brand));
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(255,0,0,0.18);
  transition:transform .06s ease,filter .12s ease;
}
.search-form input[type="submit"]:hover,.search-form button:hover{filter:brightness(1.03)}
.search-form input[type="submit"]:active,.search-form button:active{transform:translateY(1px)}

.menu-links{
  display: flex;
  justify-content: center;
  gap: 10px; /* расстояние между кнопками */
  margin-top: 20px;
}

.menu-links a{
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--brand); /* красный фон */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.menu-links a:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  cursor: pointer;
}


@media (max-width:560px){
  .search-form{gap:8px}
  .search-form input[type="text"]{flex:1 1 100%;font-size:14px}
  .search-form input[type="submit"],.search-form button{width:auto;padding:8px 14px;height:40px;font-size:14px}
  .menux{margin:10px 8px;padding:12px}
}

.header.header--brand{
  background: var(--brand);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 18px rgba(255,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.logo{
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap; /* чтобы текст не переносился */
}

/* Адаптив */
@media (max-width:560px){
  .header.header--brand{
    padding: 12px 10px;
  }
  .logo{
    font-size: 20px;
  }
}

@media (max-width: 560px){
  .search-form {
    display: flex !important;       /* делаем flex-контейнером */
    flex-direction: row !important; /* всё в одну линию */
    align-items: stretch;            /* чтобы кнопка и поле одинаковой высоты */
    gap: 6px;                        /* небольшой промежуток */
  }

  .search-form input[type="text"] {
    flex: 1 1 auto;  /* поле занимает всё доступное место */
    width: auto !important; /* отменяем автоматическое растягивание на всю ширину */
  }

  .search-form input[type="submit"] {
    flex: 0 0 auto;  /* кнопка только по ширине контента */
  }
}