* { margin: 0; padding: 0; }
image { border: 0; }
a img, :link img, :visited img, :hover img { border: 0; }
a { color: #505050; font-size: 12px; text-decoration: underline; }
a:hover { color: #000; text-decoration: none; }
h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 12px; }
textarea { border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ccc; }
input:focus, button:focus { outline: none; }
html { padding: 0px; background: #000; }
body { font-family: "Arial", Tahoma, sans-serif; font-size: 12px; height: 100%; color: #ccc; }
#container { width: 1000px; margin: 0px auto; padding: 0; position: relative; }
#header { background: radial-gradient(40em 25em at top, purple, black); width: 1000px; height: 150px; position: relative; }
.logo { width: 300px; height: 80px; float: left; margin: 20px 0 15px 0; }
.seo { margin: 10px; padding: 7px; border-radius: 5px; font-size: 14px; background: #101010; text-align: justify; color: #B8B8B8; }

a.button8 { display: inline-block; color: white; font-weight: 200; text-decoration: none; user-select: none; padding: .2em 2em; border: 2px solid; border-radius: 1px; transition: 0.2s; } 
a.button8:hover { background: rgba(255,255,255,.2); }
a.button8:active { background: white; }

/* LOGIN */
.loginbar { height: 30px; bottom: 0; right: 0; clear: both; }
.loginpanel { line-height: 20px; min-width: 140px; position: static; color: #909090; height: 20px; padding: 5px 0; float: right; text-align: right; }
.loginpanel a { font-size: 16px; text-decoration: none; padding: 1px 0 2px 0; color: #fff; background: url(../images/grey.png) repeat-x; border-radius: 8px; padding: 2px 10px; line-height: 16px; }
.loginpanel a:hover { background: url(../images/color.png) repeat-x; }
#loginb { color: #fff; min-width: 200px; min-height: 220px; display: none; background: #101010; position: absolute; top: 100px; left: 50%; margin-left: -90px; z-index: 20000; border: 1px solid #202020; box-shadow: 0px 0px 10px #000; padding: 0 0 10px 0; border-radius: 10px; }
#loginb a { color: #fff; text-decoration: underline; }
#loginb a:hover { color: #ccc; text-decoration: none; }
.logintitle { line-height: 35px; height: 35px; text-align: center !important; background: url(../images/color.png) left bottom repeat-x; border-radius: 10px 10px 0 0; }
.logintitle span { font-size: 14px; color: #fff; }
.login-close { position: absolute; background: url(../images/login-close.png) 0 0 no-repeat; width: 25px; height: 25px; cursor: pointer; top: -15px; right: -15px; }
.login-close:hover { background-position: 0 -25px; }
.profile { width: 160px; margin: 15px auto 5px auto; }
.profile ul { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #303030; }
.profile li { position: relative; height: 29px; line-height: 20px; margin: 0; }
.profile li a { text-align: left; padding: 0 10px 0 15px; line-height: 24px; font-size: 13px; color: #fff !important; text-decoration: none !important; display: block; font-weight: normal; background: #202020 url(../images/dot.png) 5px 10px no-repeat; border-radius: 12px; }
.profile li a:hover { color: #eee !important; }
.login_input { width: 200px; height: 70px; margin: 25px; text-align: center; }
.login_field { width: 200px; height: 30px; line-height: 35px; vertical-align: middle; font-size: 15px; padding: 0; color: #fff; background: #505050; margin-top: 5px; border-radius: 3px; }
.field { padding: 5px; width: 190px; height: 20px; color: #fff; font-size: 15px; background: none; border: 1px solid #202020; vertical-align: middle; border-radius: 3px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }
.field:hover, .field:active, .field:focus { border: 1px solid #707070; }
.enter { width: 200px; height: 30px; background: #fff url(../images/color.png) repeat-x; border: 1px solid #ff3c3c; cursor: pointer; margin: 0 0 15px 0; font-weight: bold; color: #fff; font-size: 16px; line-height: 30px; border-radius: 3px; }
.enter:hover { color: #000; border: 1px solid #303030; }
.not_save { font-size: 12px; padding: 0; margin: 10px 0 5px 0; width: 200px; height: 20px; }
#login_overlay { background-color: #000; height: 100%; left: 0; opacity: 0.50; position: fixed; top: 0; width: 100%; z-index: 10000; display: none; }

/* НАВИГАЦИЯ */
.nav { width: 100%; max-width: 1000px; height: 40px; background: url(../images/navi.png) no-repeat; margin-bottom: 10px; }
.nav ul { font-size: 14px; list-style: none; display: inline; width: 730px; float: left; }
.nav li { float: left; position: relative; z-index: 100; text-align: left; height: 40px; }
.nav li a { font-size: 14px; font-weight: bold; color: #fff; line-height: 20px; padding: 10px; display: block; text-decoration: none; border-right: 1px solid #ff8e8e; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.nav li a:hover, .nav li.drop:hover .link1 { color: #fff; background: #505050 url(../images/grey.png) repeat-x; text-shadow: none; }
.nav li a.first { border-radius: 3px 0 0 3px; }
.nav li.drop { display: block; }
.nav li ul { z-index: 500; display: none; position: absolute; width: auto; background: #303030; border-bottom: 2px solid #ff3c3c; }
.nav li li { clear: both; height: 25px; border-top: 1px solid #202020; }
.nav li li a { min-width: 130px; padding: 0 10px; font-size: 12px; line-height: 25px; border-radius: 0; border-right: none; height: 25px; text-shadow: none; }
.nav li li a:hover { background: #ff3c3c; }
.nav li:hover ul { display: block; }

/* ПОИСК */
.searchblock { width: 250px; height: 24px; float: right; margin: 8px 10px 0 10px; background: #f9f9f9; border-radius: 12px; }
.searchblock ul { height: 30px; list-style: none; width: 250px; display: inline; }
.searchblock li { float: left; position: relative; border: 0; display: block; height: 24px; }
.searchblock li a { float: left; position: relative; text-align: center; }
.searchblock .searchbt input { width: 36px; height: 24px; background: url(../images/searchbt.png) 0 0 no-repeat; cursor: pointer; border: none; }
.searchblock .searchbt input:hover { background-position: 0 -24px; }
.searchform { color: #505050; width: 200px; height: 20px; line-height: 20px; padding: 2px 7px; border: 0px; font-size: 12px; font-family: Verdana, Geneva, sans-serif; background: transparent; }

/* КАРКАС */
#content { width: 1000px; position: relative; margin-bottom: 10px; }
#left { float: left; width: 200px; padding: 10px 0 0 0; background: #101010; border-radius: 3px; }
#right { margin: 0 0 0 212px; width: 788px; padding-top: 10px; background: #101010; border-radius: 3px; }

/* САЙДБАР */
.sideblock { width: 180px; margin: 0 10px 10px 10px; background: #202020; padding-bottom: 5px; }
.sideheader { background: #404040 url(../images/grey.png) repeat-x; color: #ff3c3c; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 3px 3px 0 0; border-bottom: 1px solid #151515; text-shadow: 0 1px 1px #000; }
.sideheader a { color: #fff; text-decoration: underline; }
.sideheader a:hover { color: #ccc; text-decoration: none; }
.menu ul { width: 180px; font-size: 12px; list-style: none; }
.menu li a { width: 155px; padding: 0 5px 0 20px; line-height: 20px; font-size: 13px; color: #fff; text-decoration: none; display: block; font-weight: bold; background: url(../images/dot.png) 8px 8px no-repeat; margin: 2px 0 0 0; }
.menu li a:hover { color: #ff3c3c; background: #101010 url(../images/dot.png) 8px 8px no-repeat; }

/* ==================================================== */
/* СЕТКА ВИДЕО (CSS GRID)                               */
/* ==================================================== */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 0 10px 10px 10px; /* Отступы от краев блока */
}

/* Карточки фильмов */
.short-story {
    background: #202020;	
    border: 1px solid #303030;
    border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    padding: 5px 5px 0 5px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.short-story a {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    color: #F14949;
}
.short-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px inset rgb(97, 93, 95);
    display: block;
    transition: 0.2s;
}
.short-story a:hover .short-img {
    opacity: 0.9;
    border: 1px outset rgb(167, 158, 162);	
}
.short-title {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 8px 0;
    line-height: 1.3;
    min-height: 40px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.short-story a:hover .short-title { color: #fff; }
.short-time {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Пагинация внутри сетки */
.movies-grid .navigation {
    grid-column: 1 / -1;
    margin-top: 20px;
    height: auto;
}
/* ==================================================== */

/* ФУТЕР */
.footer-wrap { width: 100%; }
.ftmenu-wrap { width: 100%; background: #101010; height: 20px; padding: 10px 0; }
.ftmenu { width: 1000px; height: 20px; margin: 0 auto; }
.ftmenu ul { list-style: none; font-size: 14px; display: inline; }
.ftmenu li { float: left; height: 20px; }
.ftmenu li a { font-size: 12px; color: #909090; line-height: 20px; padding: 0 10px; display: block; text-decoration: none; border-right: 1px solid #404040; }
.ftmenu li a:hover { color: #fff; }
.footer { margin: 0 auto; width: 1000px; padding: 15px 0 10px 0; color: #909090; position: relative; border-radius: 0 0 5px 5px; }
.slogo { width: 150px; height: 50px; float: left; margin: -5px 0 0 0; }
.slogo img { width: 150px; height: 50px; }
.sub-footer { text-align: left; color: #707070; padding: 0 5px; font-size: 12px; float: left; }
.sub-footer a { color: #ff3c3c; text-decoration: none; }
.sub-footer a:hover { color: #fff; }
.counters { height: 31px; float: right; }
.counters span { margin-left: 10px; }

/* ПОЛНАЯ НОВОСТЬ И ПЛЕЕР */
.story { width: 788px; padding-bottom: 1px; margin-bottom: 10px; }
.post-title { font-size: 18px !important; color: #fff; line-height: 20px; margin-bottom: 10px; font-weight: bold; font-family: "Arial"; padding: 0 10px; }
.post-title a { color: #ff3c3c; text-decoration: underline; }
.post-title a:hover { color: #aaa; }
.full-story { width: 768px; padding: 0 10px 10px 10px; color: #aaa; font-size: 13px; line-height: 1.5; }
.full-story a { color: #ff3c3c; }
.full-story a:hover { color: #fff; text-decoration: none; }
.post-info { border: 1px solid #303030; background: #252525; font-size: 12px; color: #909090; margin: 10px 0; clear: both; }
.info1 { padding: 10px; line-height: 25px; }
.info1 span { display: block; }
.info1 span b { color: #fff; font-weight: normal; }
.info1 a { color: #ff3c3c; text-decoration: none; }
.info1 a:hover { color: #fff; }
.player { background: #000; border: 1px solid #202020; margin: 10px 0; width: 100%; text-align: center; }

/* ПОХОЖИЕ НОВОСТИ (GRID) */
.related-block {
    padding: 15px;
    color: #303030;
    width: 100%; /* Убираем жесткие 788px, чтобы блок не вылезал за края */
    box-sizing: border-box;
    background: #202020;
    border-radius: 3px;
    margin-top: 15px;
}
.related-title {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Умная сетка */
    gap: 15px;
}
.related-card {
    display: flex;
    flex-direction: column;
    position: relative;
}
.related-card a {
    text-decoration: none;
    color: #ff3c3c;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.related-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px inset rgb(97, 93, 95);
    transition: 0.2s;
    margin-bottom: 8px;
    display: block;
}
.related-card a:hover .related-img {
    opacity: 0.9;
    border: 1px outset rgb(167, 158, 162);
}
.rltd {
    font-weight: bold;
    line-height: 1.3;
    font-size: 12px;
    text-align: left;
}
.related-card a:hover .rltd {
    color: #fff;
}
.related-time {
    position: absolute;
    top: 5px; /* Привязываем время жестко к верхнему углу картинки */
    right: 5px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 2;
}

/* ХЛЕБНЫЕ КРОШКИ И ПАГИНАЦИЯ */
.speedbar { font-size: 12px; color: #909090; margin: 0 10px 10px 10px; line-height: 15px; }
.speedbar a { color: #ff3c3c; text-decoration: underline; }
.speedbar a:hover { color: #ccc; text-decoration: none; }
.navigation { width: 100%; margin: 10px auto; padding: 15px 0; text-align: center; clear: both; }
.navigation a, .navigation span { display: inline-block; padding: 5px 10px; margin: 2px; border-radius: 3px; border: 1px solid #303030; text-decoration: none; font-size: 14px; }
.navigation a { color: #ff3c3c; background: #202020; }
.navigation a:hover { color: #fff; background: #ff3c3c; }
.navigation span { color: #aaa; background: #151515; }

/* УТИЛИТЫ И ПРОЧЕЕ */
.clear { clear: both; height: 0; width: 100%; }
.info { margin: 10px; color: #fff; background: #030303; padding: 10px; text-align: center; border: 1px solid #303030; font-size: 18px; }
.info a { color: #ff3c3c; text-decoration: none; font-size: 25px; }

/* ==================================================== */
/* СТИЛИ ДЛЯ ВКЛАДОК (TABS)                             */
/* ==================================================== */
.tabs {
	min-width: 220px;
	max-width: 770px;
	padding: 0;
	margin: 0 auto;
}
.tabs>section {
	display: none;
	padding: 0;
	background: #000;
	border: 1px solid #ddd;
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #000;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tabs>input {
	display: none;
	position: absolute;
}
.tabs>label {
	display: inline-block;
	margin: 0 0 -1px;
	padding: 15px 25px;
	font-weight: 600;
	text-align: center;
	color: #101010;
	border: 0px solid #ddd;
	border-width: 1px 1px 1px 1px;
	background: #fff;
	border-radius: 3px 3px 0 0;
}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
}
.tabs>input:checked+label {
	color: #555;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background: #000;
}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
	display: block;
}

/* ==================================================== */
/* СТИЛИ ДЛЯ ФОРМ (Обратная связь, профиль, комментарии)*/
/* ==================================================== */
.line {
    margin: 5px 0;
    padding: 5px 15px;
    border: 1px solid #202020;
    background: #151515;
    min-height: 20px;
    text-align: left;
    font-size: 13px;
    clear: both;
    overflow: hidden; /* Очистка флоатов, чтобы фон растягивался по высоте */
}
.sline {
    font-weight: bold;
    min-width: 100px;
    min-height: 20px;
    line-height: 20px;
    float: left;
    padding: 2px 0;
    text-align: left;
}
textarea, .txsh, .input1, .input2, .input3 {
    border: 1px solid #ccc;
    height: 22px;
    background: #fff;
    color: #000;
    padding: 0 5px;
    box-sizing: border-box;
}
textarea {
    height: 100px;
    padding: 5px;
    font-family: inherit;
    resize: vertical; /* Позволяет пользователю тянуть поле только по высоте */
}
.input3 { 
    width: 223px; 
}

/* Кнопка отправки */
.cbutton {
    font-family: Arial, sans-serif;
    background: #ff3c3c url(../images/color.png) repeat-x;
    cursor: pointer;
    width: 100px;
    height: 25px !important;
    line-height: 25px !important;
    border: 0 !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    display: block;
    margin: 10px 0;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #000;
    text-align: center;
}
.cbutton:hover {
    color: #fff;
    background: #303030 url(../images/grey.png) repeat-x;
}
/* ==================================================== */



/* ==================================================== */

/* ==================================================== */
/* АДАПТИВНОСТЬ (СТРУКТУРНЫЕ МЕДИА-ЗАПРОСЫ ШАБЛОНА)     */
/* ==================================================== */

@media all and (max-width: 1023px) {
    #container, #header, .nav, #content, .footer, .ftmenu, .hblock, .story, .full-story, .related-block, #dle-content {
        width: 100%; max-width: 1000px; box-sizing: border-box;
    }
    .logo { margin: 25px 0 10px 5px; }
    .nav ul { width: auto; }
    #right { width: 100%; margin: 0; }
    
    /* Мобильное меню (Гамбургер) */
    #left { display: block; position: absolute; top: -48px; left: 0; z-index: 999; width: 75px; height: 20px; overflow: hidden; border: 2px solid #DA4646; }
    #left:before { content: 'Категории'; display: block; text-align: center; cursor: pointer; line-height: 10px; font-size: 14px; }
    #left div { display: none; }
    #left.open { width: 200px !important; height: auto !important; border-color: transparent; }
    #left.open div { display: block; }
    #left.open:before { content: 'Закрыть'; text-align: right; padding: 0 10px 10px 10px; color: red; font-weight: bold; }
    
    .player { width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; }
    .related-block { text-align: center; max-height: 1500px; }
    .related-block table { width: 100% !important; max-height: 1500px; }
    .related { display: inline-block !important; vertical-align: top; float: none; }
    
    .n-full-story { display: block; height: 420px; overflow: hidden; }
    .n-full-story:before { content: 'Читать полностью'; display: block; position: absolute; text-align: center; background: transparent url("../images/navi.png") no-repeat scroll 0% 0%; padding: 5px 5px; width: 80%; color: #fff; border-radius: 5px; margin: 396px 0 0 0; box-shadow: 0 5px 10px 10px #000; cursor: pointer; }
    .n-full-story.open { height: auto; }
    .n-full-story.open:before { display: none; }
    .n-full-story img { width: 600px; height: auto; margin: 0 auto; float: none; display: block; }
    #header { background: radial-gradient(35em 30em at top, purple, black); }
}

@media all and (max-width: 786px) {
    .info1 { width: 80%; }
    .shots img { width: 24%; height: auto; }
}

@media all and (max-width: 724px) {
    .nav { height: auto; overflow: hidden; text-align: center; }
    .nav ul { display: inline-block; float: none; }
    .searchblock { width: 38%; margin: 10px 7px 10px 700px; }
    .searchblock ul { width: 100%; }
    .searchblock li:first-of-type { width: 80%; }
    .searchblock li:last-of-type { float: right; }
    .searchblock li input[type="text"] { width: 100%; }
    
    .logo { width: 100%; text-align: center; box-sizing: border-box; padding: 0; margin: 30px 0 15px 0; }
    .logo img { display: block; width: 300px; margin: 0 auto; padding: 0; }
    #header { height: 0px; }
    
    .mob-loginbar.open:before { background-image: none; content: 'X'; line-height: 2; color: red; }
    .mob-loginbar.open { width: 100px; height: auto; overflow: hidden; z-index: 8888; }
    .mob-loginbar.open a { display: block; clear: both; height: 20px; font-size: 11px; text-decoration: none; color: #FFF; background: none; border-radius: 8px; padding: 5px 10px; line-height: 1px !important; }
    .mob-loginbar.open .loginpanel { display: block; line-height: 1 !important; height: auto; overflow: hidden; min-width: 100px; text-align: left; }
    .info1 { width: 80%; box-sizing: border-box; }
}

@media all and (max-width: 600px) {
    .movies-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 5px; } /* Сетка в 2 колонки на мобильных */
    
    .related-block table td:first-child { display: none; }
    .shots img { width: 23%; height: auto; }
    .post-info { height: auto; }
    .info1 { width: 90%; }
    ins { display: block; width: 95%; overflow: hidden; margin: 0 auto; box-sizing: border-box; float: none; }
    ins iframe { display: block; width: 100% !important; }
    
    .n-full-story { height: 250px; }
    .n-full-story:before { width: 98%; margin: 226px 0 0 0; }
    .n-full-story img { width: 300px; }
}

@media all and (max-width: 510px) {
    .nav li a { font-size: 16px; padding: 10px 5px; }
    .c1data { display: none; }
    .searchblock { width: 58%; }
}

@media all and (max-width: 440px) {
    .searchblock { width: 62%; }
    .nav li a { font-size: 16px; padding: 10px 5px; }
    .related-block table td:nth-child(2) { display: none; }
    .addcomment { display: none; }
    .info1 { width: 98%; }
}

@media all and (max-width: 300px) {
    .logo img { width: 100%; } 
    .nav li a { font-size: 15px; }
}

/* Заставляем все внутренние страницы (фуллстори, профиль, ошибки) занимать всю ширину */
.movies-grid > * {
    grid-column: 1 / -1 !important;
}

/* А карточкам фильмов строго разрешаем выстраиваться в колонки */
.movies-grid > .short-story {
    grid-column: span 1 !important;
}

/* Возвращаем правый отступ и запрещаем блокам вылезать за края экрана */
.story, .full-story, .post-info, .related-block, .player-container, #player {
    box-sizing: border-box !important;
    max-width: 100% !important;
}