/* ====== БАЗОВЫЕ ====== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: #232323;
  font-family: Sans-Serif;
  font-size: 13px;
  margin: 0 auto;
  max-width: 700px;
  color: #6D6B6B;
  overflow-wrap: break-word;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

/* ====== ШАПКА ====== */
.head {
  background: url(head.png);
  border-bottom: 2px solid rgb(109, 55, 131);
  text-align: center;
}

.head img {
  max-width: 100%;
  height: auto;
}

.head2 {
  background: url(head.png);
  border-bottom: 2px solid rgb(109, 55, 131);
}

.fo {
  background: url(fo.png) no-repeat left, url(f.png);
  padding: 37px;
  border-top: 2px solid rgb(128, 75, 148);
}

/* ====== РЕКЛАМА ====== */
.rekl {
  background: rgb(57, 39, 65) url(rek.png) no-repeat right top;
  padding: 12px;
  border-top: 1px solid rgb(120, 66, 142);
  border-bottom: 2px solid rgb(109, 55, 131);
  color: rgb(242, 242, 242);
  display: block;
  overflow: hidden;
}

/* ====== ЗАГОЛОВКИ ====== */
.title {
  background: url(title.png);
  padding: 14px;
  border-top: 1px solid rgb(153, 82, 181);
  border-bottom: 2px solid rgb(174, 120, 195);
  font-weight: bold;
  color: white;
  display: block;
}

.li_title {
  background: #8f44ad;
  display: block;
  border-bottom: 2px solid rgb(109, 55, 131);
  color: #fff;
  padding: 1px;
}

.li_title h1 {
  font-size: 17px;
  padding: 0px;
  padding-left: 5px;
}

/* ====== НАВИГАЦИЯ (panel_u) ====== */
.panel_u, .panel_u:hover {
  margin-bottom: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.panel_u table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.td_title {
  background: #8f44ad;
  text-align: center;
  border-left: 2px solid rgb(174, 120, 195);
  border-top: 1px solid rgb(153, 82, 181);
  border-right: 1px solid rgb(153, 82, 181);
  border-bottom: 2px solid rgb(174, 120, 195);
  font-weight: bold;
  color: white;
  padding: 10px 6px;
}

.td_title a {
  display: block;
  color: white;
  word-wrap: break-word;
}

/* ====== МЕНЮ / НОВОСТИ ====== */
.menu {
  background: #EDE0F2;
  padding: 10px;
}

.news {
  background: #F5F5F5;
  padding: 10px;
  display: block;
  border-radius: 5px;
  color: rgb(197, 160, 166);
}

.link {
  background: white;
  padding: 12px;
  border-top: 2px solid rgb(236, 208, 211);
  border-bottom: 2px solid rgb(223, 223, 223);
  margin: -1px;
  display: block;
  color: rgb(136, 136, 136);
}

.link img {
  vertical-align: middle;
  margin-bottom: 5px;
  max-width: 100%;
}

.link2 {
  background: white;
  border-bottom: 1px solid #DFCBCF;
  padding: 12px;
  margin: -1px;
  display: block;
  color: rgb(137, 137, 137);
}

/* ====== СЧЕТЧИКИ ====== */
.cnt {
  float: right;
  background-color: #C29DD0;
  padding: 3px 4px;
  border-radius: 3px;
  text-shadow: none;
  margin: -3px 0px 0 0;
  color: #FFFFFF;
}

.cnt2 {
  float: right;
  background-color: #703A86;
  padding: 6px 8px;
  border-radius: 3px;
  border-top: 1px solid rgb(94, 54, 111);
  border-bottom: 1px solid rgb(150, 95, 173);
  margin: -14px;
  color: #FFFFFF;
}

.cnt3 {
  float: right;
  background-color: #703A86;
  padding: 6px 8px;
  border-radius: 3px;
  border-top: 1px solid rgb(94, 54, 111);
  border-bottom: 1px solid rgb(150, 95, 173);
  margin: -14px;
  color: #FFFFFF;
}

/* ====== КНОПКА НА ГЛАВНУЮ ====== */
.mine {
  background: linear-gradient(to top, #F4D7FF 50%, #F9E8FF 50%);
  padding: 15px;
  border-top: 1px solid rgb(247, 229, 255);
  text-shadow: 1px 1px 1px white;
  border-bottom: 1px solid rgb(212, 177, 226);
  display: block;
  color: rgb(154, 107, 173);
  text-align: center;
}

/* ====== ФОРМЫ ====== */
input, textarea, select {
  padding: 10px;
  background: rgb(253, 249, 255);
  border: 1px solid rgb(211, 176, 224);
  border-radius: 4px;
  color: rgb(155, 116, 155);
  box-sizing: border-box;
}

/* ====== ФУТЕР ====== */
.foot a {
  background: rgb(143, 68, 173);
  padding: 16px;
  color: white;
  border-bottom: 4px solid rgb(109, 55, 131);
  display: block;
  text-shadow: 1px 1px 1px rgb(136, 64, 166);
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.foot2 a {
  background: rgb(136, 64, 166);
  padding: 16px;
  color: white;
  border-bottom: 4px solid rgb(109, 55, 131);
  display: block;
  text-shadow: 1px 1px 1px rgb(136, 64, 166);
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

/* ====== БЛОКИ КОНТЕНТА ====== */
.catrek {
  background: #ecebf3;
  color: #14131f;
  border-top: 1px solid #f2f2f9;
  border-bottom: 1px solid #a8a6c0;
  padding: 10px;
  height: 200px;
  overflow: hidden;
}

.catrek a { color: #14131f; }
.catrek a:hover { color: #1b1929; text-decoration: underline; }

.cat {
  background: #ecebf3;
  color: #14131f;
  border-top: 1px solid #f2f2f9;
  border-bottom: 1px solid #a8a6c0;
  padding: 10px;
  overflow: hidden;
}

.cat a { color: #14131f; }
.cat a:hover { color: #1b1929; text-decoration: underline; }

.texthide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.screen {
  width: 150px;
  height: 87px;
  border-radius: 4px;
  border: 1px solid #46435f;
  margin-right: 10px;
  object-fit: cover;
}

/* ====== ДЛИТЕЛЬНОСТЬ ====== */
.dur {
  position: absolute;
  top: 68px;
  left: 0;
  width: 100%;
}

.dur span {
  background-color: rgba(0,0,0,0.5);
  bottom: 5px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 4px;
}

/* ====== КНОПКИ ====== */
.as_botton {
  display: inline-block;
  overflow: hidden;
  color: #fff;
  background-color: #856afa;
  border-color: #d43f3a;
  margin: 1px;
  padding: 0px;
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: none;
  border-radius: 4px;
}

.block_default {
  background: #ecebf3;
  border-bottom: 1px solid rgb(109, 55, 131);
  border-top: 1px solid rgb(109, 55, 131);
  padding: 9px;
  overflow: hidden;
}

.block_default a {
  border: 1px;
  border-radius: 4px;
  display: inline-block;
  margin: 2px 0;
  padding: 5px 7px;
}

.block_default a img {
  border-radius: 4px;
  margin-left: 1px;
  vertical-align: middle;
  max-width: 100%;
}

/* ====== ПАГИНАЦИЯ ====== */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 4px 0;
  border-radius: 4px;
}

.pagination > li { display: inline; }

.pagination > li > a, .pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #428bca;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus {
  z-index: 3;
  color: #2a6496;
  background-color: #eee;
  border-color: #ddd;
}

.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
  cursor: default;
}

.pagination > .disabled > span, .pagination > .disabled > span:hover,
.pagination > .disabled > span:focus, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
  color: #999;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}

/* ====== СООБЩЕНИЯ ====== */
.success { background: #4CAF50; padding: 15px; color: #fff; }
.warning { background: #c4871e; padding: 15px; color: #fff; }
.error { background: #f44336; color: #fff; padding: 18px; }

/* ====== КНОПКИ ДЕЙСТВИЙ ====== */
.def, .mini {
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  background: rgb(128, 75, 148);
  display: inline-block;
  border: 0;
  color: #fff;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.def { padding: 7px 25px; }
.mini { padding: 2px 10px; border-radius: 2px; }

.def:hover, .mini:hover { background: rgb(135, 75, 148); }

/* ====== ПОЛЬЗОВАТЕЛЬ ====== */
.user img.ava {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 5px;
}

.user {
  display: inline-block;
  background: #eef3ec;
  color: #fff;
  padding: 4px 9px;
  border-radius: 2px;
  margin-bottom: 4px;
  margin-right: 8px;
  position: relative;
  font-size: 12px;
}

/* ====== ФОРМА ПОИСКА ====== */
.search_form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.search_form input[type="search"] {
  flex: 1 1 55%;
  min-width: 120px;
}

.search_form select {
  flex: 1 1 25%;
  min-width: 80px;
}

.search_form input[type="submit"] {
  flex: 1 1 15%;
  min-width: 70px;
  color: white;
  background-color: rgb(153, 82, 181);
  cursor: pointer;
}

/* ====== СЕТКА КОНТЕНТА ====== */
.content_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 6px 0;
}

.content_grid .cat {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.content_grid .cat .image {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}

.content_grid .cat .screen {
  width: 150px;
  height: 87px;
  flex-shrink: 0;
  object-fit: cover;
}

.content_grid .cat .dur {
  position: absolute;
  top: 68px;
  left: 0;
  width: 100%;
}

/* ====== КОНТЕЙНЕР ====== */
.main_container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* =========================================
   АДАПТИВ: ПЛАНШЕТ (769px+)
   ========================================= */
@media (min-width: 769px) {
  body {
    max-width: 900px;
    font-size: 14px;
  }

  .content_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .td_title {
    padding: 12px 8px;
  }
}

/* =========================================
   АДАПТИВ: ПК (1025px+)
   ========================================= */
@media (min-width: 1025px) {
  body {
    max-width: 1200px;
    font-size: 14px;
  }

  .content_grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .td_title {
    padding: 14px 10px;
    font-size: 15px;
  }

  .search_form input[type="search"] {
    flex: 1 1 50%;
  }

  .search_form select {
    flex: 1 1 20%;
  }

  .search_form input[type="submit"] {
    flex: 1 1 10%;
  }

  .li_title h1 {
    font-size: 19px;
  }
}

/* =========================================
   АДАПТИВ: БОЛЬШОЙ ПК (1440px+)
   ========================================= */
@media (min-width: 1440px) {
  body {
    max-width: 1400px;
  }

  .content_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================
   МОБИЛЬНЫЙ (до 480px) — уточнения
   ========================================= */
@media (max-width: 480px) {
  .screen {
    width: 100px;
    height: 67px;
  }

  .content_grid .cat .screen {
    width: 100px;
    height: 67px;
  }

  .content_grid .cat .dur {
    top: 48px;
  }

  .dur span {
    font-size: 13px;
  }

  .search_form {
    flex-direction: column;
  }

  .search_form input[type="search"],
  .search_form select,
  .search_form input[type="submit"] {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 390px) {
  .screen {
    width: 100px;
    height: 67px;
  }
}