body {background-color: #fff; margin: 0; padding: 0; line-height: 1.6;font-family:'Roboto'; font-size: 16px;overflow-y: scroll; overflow-x: hidden; }
a { text-decoration: none; color: #000000; display: contents; }
a:hover { text-decoration: none; color:red !important; cursor: pointer; }
div {box-sizing:border-box;}
.speed_test {position: fixed; bottom: 20px; display: block; left: 10px; padding: 5px; border-radius: 6px; border: 1px solid #fff; text-align: center; background:#000000b0; color: #fff; font-weight: bold; font-size: 12px;}

.main {width: 100%; max-width: 1100px;margin:auto;}
.main > div:first-child {}
.main > div:nth-child(2) {width:100%;border-radius:20px;}
@media screen and (max-width:820px){ .main > div:first-child {display:none; } }

.block {color:#000;padding: 0 20px;}
.body_content {color: #000;padding: 10px 5px;}
@media screen and (max-width:820px){ .body_content { padding: 10px 20px; } }
.body_social {padding: 20px 0; display: flex; flex-direction: column; gap: 10px; font-weight: 500; color: #005fab;}

.horizontal_block {display: flex;  gap: 20px;}

.body {display: flex; gap: 10px;}
.body_left {width:100%;max-width:800px;}
.body_right {min-width:300px;width: 300px;}
@media screen and (max-width:820px){ .body_right { display:none;} }

.tx_500 {font-weight:500;}

.body_title {margin:0;padding:0;font-size: 24px; font-weight: bold;}
.body_image {width:100%;aspect-ratio: 16/9; object-fit: cover;}

.body_head {display: flex; gap: 10px; justify-content: space-between;}
.body_category {background-color: gold; font-weight: 500; margin: 10px 0; width: max-content; padding: 2px 10px; border-radius: 5px; color: #000000;}
.body_hits {display: flex; gap: 10px; align-items: center;}
.body_date {display: flex; gap: 10px; align-items: center;}
.body_tags {display:flex;gap:10px; margin-top: 20px; flex-wrap: wrap;}
.body_tags span {border: 1px solid #ffc9c9; border-radius: 10px; padding: 4px 10px; color: #ff0505; background: #ffefef; font-weight: 500; font-size: 14px;}
.body_text {font-size: 18px;}

.search_button {cursor:pointer;}
.search_block {display:none !important;width: 84%; background-color:#f5f5f5 !important;}
.search_block input {width: 100%; border: none; outline: none;font-size: 18px; background-color: transparent;}

.view {border-radius:10px;overflow:hidden;margin-top: 10px;}
@media screen and (max-width:820px){ .view { border-radius:unset; } }

.header {width: 100%;}
.header_content {width:100%;max-width:1100px;margin:auto;padding:20px 0;text-align: center;}
.header_logo {width:150px;filter:invert(1);}
.header_title {font-size: 80px;color:#000;  font-weight: bold; text-align: center; font-family: sans-serif;margin: 0; padding: 0; line-height: 1;}
@media screen and (max-width:820px){ .header_title {font-size: 60px; } }
@media screen and (max-width:820px){ .header_description {margin: 0 10px; } }

.header_description {color:#000;font-family:monospace !important;}

.editor {position: fixed; top: 0; left: 50%; z-index: 99999; width: 100%; margin-top: 20px; padding-right: 20px; max-width: 1100px; transform: translateX(-50%); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 5px;}
.editor div {background: #fff; padding:10px; border-radius: 10px; display: flex; align-items: center; justify-content: center;}
.editor svg {width:25px;height:25px;}

.left {display: flex; gap: 5px; position: sticky; top: 20px; flex-wrap: wrap; padding: 10px 0;}
.left_item {background-color: #e40505; color: #fff; padding: 2px 10px; border-radius: 5px; width: max-content; }

.pagination {display: flex;gap: 10px;justify-content: center;padding:20px 0 20px 0;width:100%;}
.pagination_item {background: #ebf3f7;color: #004377; padding:5px 15px; border-radius: 20px;font-weight: 500;display: flex; align-items: center; gap: 10px;}
.pagination_item:hover{background-color: #0282f1; color: #fff;}
.pagination_select {background-color: #0282f1; color: #fff;}
.rotate190 {transform: rotate(180deg);display:inline-block;}

.floats {display:flex;flex-wrap:wrap;gap:0;color:#000;margin-bottom: 20px;}
.float_item {width:33%;overflow: hidden; position: relative;padding: 10px; border-radius: 10px;}
.float_item:hover {background: #ffeaea; }
@media screen and (max-width:820px){ .float_item { width:100%; border-radius:unset;} }
.feed .float_item {width:100%;}

.float_image_block {aspect-ratio: 16/9; background-color: #000; border-radius: 10px;position:relative;overflow:hidden;}
.float_image {width: 100%;height:100%;object-fit: contain; transition: opacity .2s ease;}
.float_title {color:#000;line-height: 1.4;font-size: 16px;font-weight: 500; margin: 0;margin-bottom:5px;}
@media screen and (max-width:820px){ .float_title {font-size: 18px;} }

.float_date {display:flex;gap:10px;align-items: center;font-size: 14px; color: #717171;}
.float_hits {display:flex;gap:10px;align-items: center;font-size: 14px; color: #717171;}
.float_content {padding: 5px;}



.page_title {color: #ffffff; border-radius: 5px; width: max-content;font-weight: 500; margin: 10px 0; background-color: #000; padding: 3px 10px;}
@media screen and (max-width:820px){ .page_title { margin: 10px 10px; } }
@media screen and (max-width:820px){ .comments .page_title { margin: 10px 0 !important; } }
.float_duration { background-color: #00000073; color: #fff; position: absolute; bottom: 10px; padding: 0px 5px; border-radius: 5px; right: 10px; font-size: 12px; }

.next {background-color: #ffde85; cursor:pointer; color: #000000; width: max-content; margin: auto; padding: 6px 15px; border-radius: 5px;}
.next:hover {background-color:#ffb900;} 

.footer {margin-top:20px;padding:20px;background-color: #f1f1f1; border-top-right-radius: 20px; border-top-left-radius: 20px;}
@media screen and (max-width:820px){ .footer { border-radius:unset; } }

/* ===== добавить в style.css ===== */
.comments {margin-top:20px;}
.comment_form {display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.comment_form input, .comment_form textarea {width:100%;border:none;outline:none;border-radius:5px;padding:10px 20px;font-family:'Roboto';font-size:16px;background:#f5f5f5; box-sizing: border-box;}
.comment_form textarea {min-height:90px;resize:none;}
.comment_form input {width:50%;}
.comment_form .next {border:none;margin:0;font-size:16px;font-family:'Roboto';}
.comment_trap {position:absolute;left:-9999px;}
.comment_error {background:#ffeaea;color:#e40505;padding:8px 10px;border-radius:5px;}

.comment {display:flex;gap:10px;padding:10px 0;}
.comment_avatar {width:40px;height:40px;border-radius:50%;flex-shrink:0;}
.comment_name {font-weight:500;}
.comment_date {font-size:14px;color:#717171;margin:0 10px;}
.comment_text {word-break:break-word;}
.comment_admin {font-size:14px;color:#717171;}
.comment_admin button {border:none;background:none;padding:0;margin-right:10px;font-size:14px;color:#e40505;cursor:pointer;}
.comment_form button.loading { opacity: .6; pointer-events: none; cursor: wait; }
.comment_ok { color: #2e7d32; }
.comment_add_button {background-color: #ffde85; font-size: 16px; cursor: pointer; color: #000000; width: max-content; padding: 6px 15px; border-radius: 5px; border: none; font-weight: 500; font-family: Roboto;}