#comment-editor .bb-pane,#dlereplypopup .bb-pane{display:none}#dle-comments-list{margin-top:-.25rem}

.comment{margin-top:.25rem;padding:1.5rem;background-color:var(--spoiler);position:relative}.comment-head{position:relative;font-size:.875rem;min-height:2.5rem;padding-left:3.25rem;margin-top:-.25rem;margin-bottom:1rem;display:flex;flex-direction:column}@media(min-width:640px){#dle-comments-list{margin-top:-.5rem}.comment{margin-top:.5rem;border-radius:.75rem}.comment-head{padding-bottom:1.25rem;padding-right:9.25rem;margin-bottom:1.25rem}.comment-head::after{content:"";position:absolute;left:0;right:0;top:100%;margin:0 -1.5rem;height:0;border-bottom:1px solid var(--line)}}.comment-head .name{font-weight:700;margin-top:-.25rem;margin-bottom:.125rem}.comment-head .name a{color:inherit}.comment-head .name a:hover{color:#4ccb70}.comment-meta{display:flex;align-items:center;font-size:.75rem}.comment-meta .group-label{margin-right:.75rem}.group-label{background-color:#172b3d;font-size:.625rem;color:#fff!important;font-weight:700;height:1.25rem;line-height:1rem;padding:.125rem .5rem;border-radius:1rem}.group-label span{color:inherit!important}.group-label.g-adm{background-color:#30a7da}.group-label.g-guest{background-color:rgba(23,43,61,.5)}
.com-likes{display:flex;text-align:center;font-size:.75rem;font-weight:700}.com-likes a,.comment-tools a{color:var(--coms-meta)}.com-like-plus svg{color:#4ccb70}.com-like-minus svg{color:#f9563d}.comment-foot{margin-top:1rem}.comment-tools{display:flex;font-size:.875rem;font-weight:700;margin:-.25rem}.comment-tools a{display:flex;align-items:center;padding:.25rem}.comment-title{font-size:1.125rem;line-height:1.3}.comment-title a{color:inherit}.comment-text{word-wrap:break-word}@media(max-width:639px){.com5preply>a>span{display:none}.com-like-plus,.com-like-minus,.comment-foot{display:flex;align-items:center}.comment-tools{margin-right:auto}.com-likes a{margin-left:1rem}.com-like-plus,.com-like-minus{padding:.25rem;margin:-.25rem}.com-likes svg{margin-right:.25rem}}@media(min-width:640px){.com5preply{margin-right:auto}.com-likes{position:absolute;right:0;top:0;margin-top:.5rem;margin-right:.25rem}.com-likes svg{display:block;margin:0 auto .25rem;opacity:.8;transition:opacity .2s ease}.com-likes a{padding:.5rem .25rem;width:4.5rem}}@media(min-width:992px){.com-likes a:hover svg{opacity:1}.comment-tools a:hover,.com-likes a:hover{color:var(--coms-meta-h)}.comment-title a:hover{color:#4ccb70}}.comment-head .avatar-status{position:absolute;left:0}.avatar-status::after{position:absolute;left:0;top:0;z-index:1;pointer-events:none;background-color:#172b3d;width:.375rem;height:.375rem;border-radius:50%;margin:.1875rem}.avatar-status.online::after{background-color:#4ccb70;content:""}.avatar-status{position:relative;width:2.5rem;height:2.5rem}.avatar-status>label,.avatar-status>label i{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center}.avatar-status>label{position:absolute;left:0;top:0;cursor:pointer;z-index:1;margin:0}.avatar-status>label+i>a{pointer-events:none}.avatar-status>label input{position:absolute;opacity:0;visibility:hidden}.avatar-status>label i{color:#fff;opacity:0;background-color:rgba(76,203,112,.8);transition:opacity .2s ease}.avatar-status>label i svg{display:block;transform:translateY(.25rem);transition:transform .2s ease}.avatar-status>label input:checked~i{opacity:1}.avatar-status>label input:checked~i svg{transform:translateY(0)}.avatar-status .avatar.fit-cover{width:100%;height:100%}.avatar-status .avatar.fit-cover img[src*="noavatar.png"]{background-color:#eaeaea}.comment.pos-comm{background-color:rgba(76,203,112,.1)}.comment.pos-comm .comment-head::after{border-bottom-color:rgba(76,203,112,.12)}.comment.pos-comm .avatar-status .avatar.fit-cover img[src*="noavatar.png"]{background-color:#dcf0e1}.comment.neg-comm{background-color:rgba(249,86,61,.1)}.comment.neg-comm .comment-head::after{border-bottom-color:rgba(249,86,61,.12)}.comment.neg-comm .avatar-status .avatar.fit-cover img[src*="noavatar.png"]{background-color:#f2d2cd}.comments-tree-list .comment{margin-top:0}.comments-tree-list .comments-tree-list{padding-left:.75rem}.comments-tree-list .comments-tree-list .comments-tree-item:first-child .comment{border-top-left-radius:0}.comments-tree-item{margin-top:.25rem}.comments-tree-list .comments-tree-list .comments-tree-item{margin-top:.25rem}.mass_comments_action{display:flex;font-size:.75rem;align-items:center;margin-top:2rem}.mass_comments_action select{margin:0 .5rem}@media(min-width:640px){.comments-tree-item{margin-top:.5rem}.comments-tree-list .comments-tree-list{padding-left:1.5rem}.comments-tree-list .comments-tree-list .comment-head::after{display:none}.comments-tree-list .comments-tree-list .comment-head{margin-bottom:0}}

/* Низ комментария */
.comment.com-item .comment-foot{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 flex-wrap:wrap;
}

/* КНОПКА ОТВЕТИТЬ — БЕЗ ВЫДЕЛЕНИЯ */
.comment .comment-tools{
 margin:0;
 padding:0;
 list-style:none;
}
.comment .comment-tools a{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding:0; /* убрали padding */
 border-radius:0; /* убрали скругление */
 background:none !important;
 box-shadow:none !important;
 text-decoration:none;
 opacity:.8;
 transition:.15s ease;
}
.comment .comment-tools a:hover{
 opacity:1;
 background:none !important;
}

/* ЛЁГКИЙ НЕОН ЗА АВАТАРКОЙ */
.comment i.avatar.fit-cover{
 position:relative;
 z-index:1;
}

.comment i.avatar.fit-cover::before{
 content:"";
 position:absolute;
 inset:-6px;
 border-radius:inherit;
 background: radial-gradient(circle, rgba(76,203,112,.45), rgba(76,203,112,.15), transparent 70%);
 z-index:-1;
 filter: blur(6px);
 opacity:.6;
 transition:.3s ease;
}

/* Если комментарий положительный — усиливаем неон */
.comment.com-item.pos-comm i.avatar.fit-cover::before{
 opacity:.85;
}

/* Если отрицательный — красный неон */
.comment.com-item.neg-comm i.avatar.fit-cover::before{
 background: radial-gradient(circle, rgba(243,72,63,.45), rgba(243,72,63,.15), transparent 70%);
 opacity:.85;
}

/* Реакции (как были) */
.com-likes.reactions-container{
 display:flex;
 align-items:center;
 gap:8px;
 margin:0 !important;
 padding:0 !important;
 background:none !important;
 box-shadow:none !important;
}

a.like-btn.reaction-btn,
a.dislike-btn.reaction-btn{
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 gap:6px;
 padding:10px 12px !important;
 border-radius:999px;
 background: rgba(0,0,0,.10) !important;
 border:0 !important;
 box-shadow:none !important;
 width:auto !important;
 text-decoration:none;
}

a.like-btn.reaction-btn:hover:not(.voted),
a.dislike-btn.reaction-btn:hover:not(.voted){
 background: rgba(0,0,0,.16) !important;
}

/* Мобилка */
@media (max-width:739px){
 .com-likes.reactions-container{
 width:100%;
 justify-content:space-between;
 }
 a.like-btn.reaction-btn,
 a.dislike-btn.reaction-btn{
 flex:1 1 auto;
 }
} 
 /* ===== Мягкий неон вокруг аватарки ===== */

.comment i.avatar.fit-cover{
 position: relative;
 border-radius: 50%;
 box-shadow:
 0 0 10px rgba(76,203,112,.35),
 0 0 20px rgba(76,203,112,.15);
 transition: box-shadow .25s ease;
}

/* Чуть усиливается при наведении */
.comment i.avatar.fit-cover:hover{
 box-shadow:
 0 0 14px rgba(76,203,112,.45),
 0 0 28px rgba(76,203,112,.25);
}

/* Для отрицательных — красный неон */
.comment.com-item.neg-comm i.avatar.fit-cover{
 box-shadow:
 0 0 10px rgba(243,72,63,.35),
 0 0 20px rgba(243,72,63,.15);
}
 /* ===== Топовая разделительная полоса ===== */

.comment.com-item{
 position: relative;
 padding-bottom: 18px;
 margin-bottom: 18px;
}

/* Убираем старые линии если есть */
.comment.com-item::after{
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 2px;
 border-radius: 999px;
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(76,203,112,.6) 20%,
 rgba(76,203,112,.9) 50%,
 rgba(76,203,112,.6) 80%,
 transparent 100%
 );
 box-shadow: 0 0 8px rgba(76,203,112,.35);
 opacity: .7;
}

/* Если комментарий отрицательный — красная полоса */
.comment.com-item.neg-comm::after{
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(243,72,63,.6) 20%,
 rgba(243,72,63,.9) 50%,
 rgba(243,72,63,.6) 80%,
 transparent 100%
 );
 box-shadow: 0 0 8px rgba(243,72,63,.35);
}
 /* ===================================
 NATIVE META REACTIONS + DIFFERENT HOVER
=================================== */

@media (min-width: 740px){

 .comment.com-item{ position:relative; }

 /* реакции справа в шапке */
 .comment.com-item .com-likes.reactions-container{
 position:absolute;
 top:12px;
 right:12px;
 display:flex;
 align-items:center;
 gap:12px;

 background:none !important;
 border:0 !important;
 box-shadow:none !important;
 padding:0 !important;
 margin:0 !important;
 }

 /* базовый стиль кнопок */
 .comment.com-item a.like-btn.reaction-btn,
 .comment.com-item a.dislike-btn.reaction-btn{
 display:inline-flex !important;
 align-items:center !important;
 gap:4px;

 padding:2px 4px !important;
 border:0 !important;
 background:transparent !important;
 box-shadow:none !important;

 opacity:.45;
 transition: transform .18s ease, opacity .18s ease;
 }

 /* иконки */
 .comment.com-item a.like-btn svg,
 .comment.com-item a.dislike-btn svg{
 width:18px;
 height:18px;
 transition: transform .18s ease;
 }

 .comment.com-item .like-btn-count,
 .comment.com-item .dislike-btn-count{
 font-size:12px;
 font-weight:700;
 line-height:1;
 }

 /* === ЛАЙК HOVER === */
 .comment.com-item a.like-btn:hover{
 opacity:1;
 transform: translateY(-2px) scale(1.05);
 }

 .comment.com-item a.like-btn:hover svg{
 transform: scale(1.15);
 }

 /* === ДИЗЛАЙК HOVER === */
 .comment.com-item a.dislike-btn:hover{
 opacity:1;
 transform: translateY(-1px);
 }

 .comment.com-item a.dislike-btn:hover svg{
 transform: rotate(-8deg) scale(1.08);
 }

 /* чтобы текст не залезал */
 .comment.com-item .comment-text{
 padding-right:120px;
 }
}

/* мобилку не трогаем */
@media (max-width:739px){
 .comment.com-item .comment-text{
 padding-right:0 !important;
 }
}
 /* ==================================================
 5PLAY REACTIONS — MOBILE ONLY (LIGHT + DARK)
 ПК НЕ ТРОГАЕМ
 Вставить САМЫМ ПОСЛЕДНИМ
================================================== */
@media (max-width:739px){

 /* --- Сброс того, что мешает мобилке (инлайн width/margins и прошлые стили) --- */
 .comment.com-item .com-likes.reactions-container{
 margin-top: 12px !important;
 margin-right: 0 !important;
 padding: 0 !important;
 width: 100% !important;
 justify-content: space-between !important;
 background: none !important;
 border: 0 !important;
 box-shadow: none !important;
 backdrop-filter: none !important;
 }

 /* перебиваем инлайны width из HTML (4rem/2rem) */
 .comment.com-item a.like-btn.reaction-btn,
 .comment.com-item a.dislike-btn.reaction-btn{
 width: auto !important;
 padding: 10px 12px !important;
 flex: 1 1 0 !important;

 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 gap: 8px !important;

 border-radius: 14px !important;
 border: 1px solid transparent !important;
 box-shadow: none !important;
 text-decoration:none !important;
 }

 /* чтобы +0 и -0 были ровно */
 .comment.com-item .com-like-plus,
 .comment.com-item .com-like-minus{
 display:flex;
 align-items:center;
 justify-content:center;
 gap: 6px;
 line-height: 1;
 font-weight: 700;
 }

 .comment.com-item .like-btn-count,
 .comment.com-item .dislike-btn-count{
 font-weight: 800;
 }

 /* =========================
 DARK THEME (html#h.darktheme)
 (у тебя и так гуд — делаем лишь аккуратнее)
 ========================= */
 html#h.darktheme .comment.com-item a.like-btn.reaction-btn,
 html#h.darktheme .comment.com-item a.dislike-btn.reaction-btn{
 background: rgba(0,0,0,.16) !important;
 border-color: rgba(255,255,255,.08) !important;
 }

 html#h.darktheme .comment.com-item a.like-btn.reaction-btn:active{
 background: rgba(76,203,112,.14) !important;
 border-color: rgba(76,203,112,.22) !important;
 }
 html#h.darktheme .comment.com-item a.dislike-btn.reaction-btn:active{
 background: rgba(243,72,63,.14) !important;
 border-color: rgba(243,72,63,.22) !important;
 }

 /* =========================
 LIGHT THEME (html#h:not(.darktheme))
 убираем серую "плашку" -> делаем чисто и приятно
 ========================= */
 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn,
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn{
 background: #ffffff !important;
 border-color: rgba(0,0,0,.10) !important;
 }

 /* лёгкий “акцентный” бордер (не заливка!) */
 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn{
 border-color: rgba(76,203,112,.22) !important;
 }
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn{
 border-color: rgba(243,72,63,.20) !important;
 }

 /* нажатие пальцем */
 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn:active{
 background: rgba(76,203,112,.08) !important;
 }
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn:active{
 background: rgba(243,72,63,.07) !important;
 }
}
 /* =========================================
 MOBILE TWEAK — цифры ближе + мятный светлый
 ПК НЕ ТРОГАЕМ
========================================= */
@media (max-width:739px){

 /* Цифры максимально рядом с + и - */
 .comment.com-item .com-like-plus,
 .comment.com-item .com-like-minus{
 gap:2px !important; /* было 6-8 — уменьшаем */
 }

 .comment.com-item .like-btn-count,
 .comment.com-item .dislike-btn-count{
 margin-left:0 !important;
 }

 /* ================= LIGHT THEME ================= */
 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn,
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn{
 background: rgba(76,203,112,.08) !important; /* мягкий мятный */
 border: 1px solid rgba(76,203,112,.22) !important;
 box-shadow: none !important;
 }

 /* дизлайк слегка красноватый, но очень мягкий */
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn{
 background: rgba(243,72,63,.06) !important;
 border-color: rgba(243,72,63,.18) !important;
 }

 /* нажатие */
 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn:active{
 background: rgba(76,203,112,.14) !important;
 }
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn:active{
 background: rgba(243,72,63,.12) !important;
 }

}
 /* =====================================
 MOBILE LIGHT — убрать обводку
 ПК НЕ ТРОГАЕМ
===================================== */
@media (max-width:739px){

 html#h:not(.darktheme) .comment.com-item a.like-btn.reaction-btn,
 html#h:not(.darktheme) .comment.com-item a.dislike-btn.reaction-btn{
 border: none !important; /* убрали обводку */
 }

}
 /* =========================================
 MOBILE TOUCH ANIMATION (ONLY MOBILE)
 ПК НЕ ТРОГАЕМ
========================================= */
@media (max-width:739px){

 .comment.com-item a.like-btn.reaction-btn,
 .comment.com-item a.dislike-btn.reaction-btn{
 transition: transform .18s cubic-bezier(.2,.8,.2,1);
 }

 /* --- ЛАЙК НАЖАТИЕ --- */
 html#h .comment.com-item a.like-btn.reaction-btn:active{
 transform: scale(1.06) translateY(-2px);
 }

 html#h .comment.com-item a.like-btn.reaction-btn:active svg{
 animation: mobile-like-pop .25s ease;
 }

 @keyframes mobile-like-pop{
 0% { transform: scale(1); }
 50% { transform: scale(1.25) rotate(-6deg); }
 100% { transform: scale(1); }
 }

 /* --- ДИЗЛАЙК НАЖАТИЕ --- */
 html#h .comment.com-item a.dislike-btn.reaction-btn:active{
 transform: scale(1.04) translateY(1px);
 }

 html#h .comment.com-item a.dislike-btn.reaction-btn:active svg{
 animation: mobile-dislike-shake .25s ease;
 }

 @keyframes mobile-dislike-shake{
 0% { transform: rotate(0deg); }
 30% { transform: rotate(10deg); }
 60% { transform: rotate(-8deg); }
 100% { transform: rotate(0deg); }
 }

}
 /* =========================================
 MOBILE — BEAUTIFUL REPLY BUTTON
 ПК НЕ ТРОГАЕМ
========================================= */
@media (max-width:739px){

 .comment .comment-tools{
 width:100%;
 margin-top:10px;
 }

 .comment .comment-tools a{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;

 padding:8px 14px !important;
 border-radius:999px !important;

 font-weight:600;
 font-size:14px;

 transition: all .18s cubic-bezier(.2,.8,.2,1);
 }

 /* ================= LIGHT ================= */
 html#h:not(.darktheme) .comment .comment-tools a{
 background: rgba(76,203,112,.08) !important;
 color:#16b764 !important;
 }

 html#h:not(.darktheme) .comment .comment-tools a:active{
 transform: scale(.97);
 background: rgba(76,203,112,.16) !important;
 }

 /* ================= DARK ================= */
 html#h.darktheme .comment .comment-tools a{
 background: rgba(255,255,255,.08) !important;
 color:#4ccb70 !important;
 }

 html#h.darktheme .comment .comment-tools a:active{
 transform: scale(.97);
 background: rgba(255,255,255,.14) !important;
 }

 /* иконка аккуратнее */
 .comment .comment-tools a svg{
 width:18px;
 height:18px;
 }

}