:root{
  --bg:#eef1f6;
  --card:#ffffff;
  --text:#2b2f36;
  --muted:#6b7280;
  --primary:#2962ff;
  --radius:12px;
}

/* RESET */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  font:14px 'Segoe UI', Tahoma, sans-serif;
  color:var(--text);
  max-width:1100px;
  margin:0 auto;
  padding:12px;
  line-height:1.35;
}

/* TEXT RESET */
p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

/* HEADER */
.head{
  background:linear-gradient(135deg,#2962ff,#5c6bc0);
  text-align:center;
  padding:10px;
  border-radius:var(--radius);
}

.head img{
  max-height:42px;
  max-width:80%;
}

/* TITLE */
.title{
  background:#fff;
  padding:8px 12px;
  margin:8px 0;
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.title h1{
  font-size:18px;
  font-weight:700;
}

/* SEARCH */
.menu{
  background:#fff;
  padding:12px;
  border-radius:var(--radius);
  margin:10px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* INPUTS */
input,textarea{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #d7dbe7;
  display:block;
}

input[type=submit]{
  margin-top:6px;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px;
  font-weight:600;
  border-radius:10px;
}

/* LINKS */
.link a{
  display:block;
  background:#fff;
  padding:10px 12px;
  margin:6px 0;
  border-radius:10px;
  text-decoration:none;
  color:var(--primary);
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}

/* ================= VIDEO CARD ================= */
.video-card{
  display:flex;
  gap:10px;
  background:#fff;
  border-radius:12px;
  padding:8px;
  margin-bottom:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  align-items:stretch;
}

.video-thumb{
  flex:0 0 240px;
  display:flex;
}

.video-thumb img{
  width:240px;
  height:100%;
  min-height:150px;
  object-fit:cover;
  border-radius:10px;
}

.video-info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

.video-title{
  font-size:15px;
  font-weight:700;
  color:var(--primary);
  text-decoration:none;
  margin-bottom:4px;
}

.video-desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.3;
  margin:0 !important;
}

/* TAGS */
.video-tags{
  margin-top:6px;
  font-size:12px;
}

.video-tags b{
  display:block;
  margin-bottom:4px;
}

.tag{
  display:inline-block;
  background:#eef3ff;
  color:var(--primary);
  padding:3px 7px;
  border-radius:6px;
  margin:2px 3px 0 0;
  font-size:12px;
  text-decoration:none;
}

/* ================= PAGINATION ================= */
.page{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:16px 0;
  padding:10px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.page a,
.page span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
}

.page a{
  background:#eef3ff;
  color:#2962ff;
  text-decoration:none;
  transition:.2s;
}

.page a:hover{
  background:#2962ff;
  color:#fff;
}

.page span{
  background:#2962ff;
  color:#fff;
}

/* ================= RELATED ================= */
.related-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.related-item{
  display:flex;
  gap:10px;
  background:#fff;
  padding:8px;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  align-items:flex-start;
}

.related-thumb{
  flex:0 0 140px;
}

.related-thumb img{
  width:140px;
  height:90px;
  object-fit:cover;
  border-radius:10px;
}

.related-info{
  flex:1;
  min-width:0;
}

.related-title{
  font-size:14px;
  font-weight:700;
  color:#2962ff;
  text-decoration:none;
  display:block;
  margin-bottom:4px;
}

.related-desc{
  font-size:12px;
  color:#6b7280;
  line-height:1.3;
  margin:0;
}

/* ================= MOBILE ================= */
@media(max-width:700px){

  .video-card{
    flex-direction:column;
  }

  .video-thumb img{
    width:100%;
    height:220px;
  }

  .video-title{
    font-size:16px;
  }

  .page{
    gap:4px;
    padding:8px;
  }

  .page a,
  .page span{
    min-width:30px;
    height:30px;
    font-size:12px;
  }

  .related-item{
    flex-direction:column;
  }

  .related-thumb img{
    width:100%;
    height:180px;
  }

  .title h1{
    font-size:16px;
  }

  .menu{
    padding:10px;
  }
}

/* FOOTER */
.foot{
  margin-top:15px;
  text-align:center;
  padding:12px;
  background:#111827;
  color:#fff;
  border-radius:12px;
}


/* =========================
   FINAL FIX (LEFT TEXT / RIGHT IMAGE)
========================= */

.item-row{
  display:flex;
  gap:12px;
  background:#fff;
  padding:10px;
  margin:10px 0;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);

  /* ВАЖНО */
  align-items:flex-start;
  justify-content:space-between;
}

/* ТЕКСТ СЛЕВА */
.item-content{
  flex:1;
  min-width:0;
  padding-right:10px;
}

/* КАРТИНКА СПРАВА */
.item-image{
  flex:0 0 180px;
  display:flex;
  justify-content:flex-end;
}

/* фикс картинки */
.item-image img{
  width:180px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

/* =========================
   TAG FIX (СТАБИЛЬНЫЙ БЛОК)
========================= */

.tags,
.video-tags{
  margin-top:8px;
  font-size:12px;
}

/* заголовок "Теги:" */
.tags b,
.video-tags b{
  display:block;
  margin-bottom:6px;
}

/* контейнер ВСЕХ тегов (универсальный) */
.tag-list,
.video-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* сам тег */
.tag{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  padding:4px 8px;
  border-radius:999px;

  background:#eef3ff;
  color:#2962ff;

  text-decoration:none;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

/* hover */
.tag:hover{
  background:#2962ff;
  color:#fff;
}

/* =========================
   MOBILE FIX
========================= */

@media(max-width:700px){

  .item-row{
    flex-direction:column;
  }

  .item-image{
    width:100%;
    justify-content:flex-start;
  }

  .item-image img{
    width:100%;
    height:200px;
  }
}

.video-player{
  width:100%;
  max-width:800px;   /* ⬅ ограничение ширины */
  margin:10px auto;
}

.player{
  width:100%;
  height:auto;
  max-height:420px;  /* ⬅ главный фикс высоты */
  border-radius:10px;
  background:#000;
}

/* мобильный фикс */
@media(max-width:700px){
  .player{
    max-height:240px;
  }
}