.alert{position:fixed;top:60px;right:20px;padding:15px 25px;border-radius:8px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;transform:translateY(-20px);transition:all .3s ease;max-width:300px;font-size:14px;display:flex;align-items:center}
.alert.show{opacity:1;transform:translateY(0)}
.alert-success{background:#4CAF50;color:white;border-left:4px solid #2E7D32}
.dark-theme .alert-success{background:#408442}
.alert-error{background:#F44336;color:white;border-left:4px solid #C62828}
.dark-theme .alert-error{background:#b3332a}
.alert-icon{margin-right:10px;font-size:20px}
.post{background:#fff;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:0 1px 5px rgba(0,0,0,0.15);position:relative;scroll-margin-top:70px}
.post-author{border:1px solid transparent}
.post-author:hover{transition:.2s;border-bottom:1px solid;opacity:.75}
.dark-theme .post{background:#2d2d2d}
.post-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px!important;cursor:pointer!important;box-shadow:unset!important;object-fit:cover;vertical-align:middle;transition:.3s}
.post-avatar:hover{opacity:.75}
.post-content{margin:5px 0!important;font-size:1em!important;max-height:3500px;overflow:auto;position:relative;transition:max-height .5s ease-out;padding-bottom:5px;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}
.post-content img{transition:.2s}
.post-content img:hover{cursor:zoom-in;opacity:.75}
.comment .post-content{border-bottom:1px solid #e5e5e5;max-height:5000px!important}
.dark-theme .comment .post-content{border-bottom:1px solid #555}
.post-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e0e0e0;padding-top:10px}
.dark-theme .post-footer{border-color:#444}
.comments-container{max-height:0;overflow:hidden;transition:max-height .3s ease-out;margin-top:0}
.comments-container.show{max-height:fit-content;transition:max-height .5s ease-in}
.comment{background:#f7f7f7;border-radius:8px;padding:10px;margin:20px 0;border:1px solid #eee;box-shadow:0 1px 4px rgba(0,0,0,.1);position:relative;transition:max-height .3s cubic-bezier(0.4,0,0.2,1),opacity .3s cubic-bezier(0.4,0,0.2,1),margin .3s cubic-bezier(0.4,0,0.2,1),padding .3s cubic-bezier(0.4,0,0.2,1),border-width .3s cubic-bezier(0.4,0,0.2,1);overflow:hidden;scroll-margin-top:70px}
.comment:first-child{margin-top:10px}
.delete-comment-form{text-align:right}
.comment-children{margin-left:30px;padding-left:15px;border-left:2px solid #ddd}
.comment-level-0{margin-left:0}
.comment-level-1{margin-left:20px}
.comment-level-2{margin-left:40px}
.comment-level-3{margin-left:60px}
.comment-level-4{margin-left:80px}
.comment-level-5{margin-left:100px}
.comment-level-6{margin-left:120px}
.comment-level-7{margin-left:140px}
.comment-level-8{margin-left:160px}
.comment-level-9{margin-left:180px}
@media (max-width:768px) {
.comment-level-1{margin-left:10px}
.comment-level-2{margin-left:20px}
.comment-level-3{margin-left:30px}
.comment-level-4{margin-left:40px}
.comment-level-5{margin-left:50px}
.comment-level-6{margin-left:50px}
.comment-level-7{margin-left:50px}
.comment-level-8{margin-left:50px}
.comment-level-9{margin-left:50px}
}
.comment-form-nested{margin:10px 0;padding-left:10px;border-left:2px solid #ddd}
.dark-theme .comment-form-nested{border-left-color:#666}
.dark-theme .comment{background:#3d3d3d;border-color:#555}
.dark-theme .comment-children{border-left-color:#666}
.reply-to{font-size:.85em;color:#555;margin-bottom:8px;padding:2px 8px;background:rgba(0,0,0,0.05);border-radius:4px}
.dark-theme .reply-to{color:#bbb;background:rgba(255,255,255,0.05)}
.reply-to:before{content:"→";margin-right:5px}
.reply-btn{background:none;border:none;color:#777;cursor:pointer;margin-left:10px;font-size:1em}
.reply-btn:hover{text-decoration:underline}
.active-reply-form{border-left-color:#4CAF50}
.comment-header{display:flex;align-items:center;margin-bottom:5px;justify-content:space-between;border-bottom:1px solid #e5e5e5}
.comment-avatar{width:30px;height:30px;border-radius:50%;margin-right:10px;object-fit:cover}
.comment-form{margin-top:15px}
.comment-form textarea{width:100%;min-height:60px;margin-bottom:10px;padding:5px}
.new-post-form textarea{width:100%;min-height:100px;margin-bottom:10px}
.allow-comments-checkbox{margin:20px 0;display:flex;justify-content:space-between;align-items:center;flex-direction:row;padding:0 30px;flex-wrap:wrap;gap:15px}
.comments-count{color:#777}
.comments-disabled{color:#999;font-style:italic;font-size:.9em}
.comments-toggle{cursor:pointer;color:#777;transition:all .3s ease;display:inline-flex;align-items:center}
.comments-toggle:hover{color:#4CAF50}
.comments-toggle:after{content:"▼";font-size:.8em;margin-left:5px;transition:transform .3s ease}
.comments-toggle.hide::after{transform:rotate(180deg)}
.comments-container.show ~ .post-footer .comments-toggle:after{transform:rotate(180deg)}
.comments-loading{display:inline-block;width:12px;height:12px;border:2px solid rgba(0,0,0,0.2);border-radius:50%;border-top-color:#4CAF50;animation:spin 1s ease-in-out infinite;margin-left:5px}
.comment-loading{padding:10px;text-align:center;color:#777;font-style:italic}
@keyframes spin {
to{transform:rotate(360deg)}
}
.reply-form-wrapper{position:relative}
.cancel-comment-btn{background:none;border:none;color:#777;cursor:pointer;font-size:24px;padding:5px;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}
.cancel-comment-btn:hover{color:#ff4444;background:rgba(255,68,68,0.1)}
.dark-theme .cancel-comment-btn{color:#bbb}
.dark-theme .cancel-comment-btn:hover{color:#ff6666;background:rgba(255,102,102,0.1)}
.dark-theme .reply-btn{color:#ccc}
.delete-post-btn,.delete-comment-btn,.hard-delete-comment-btn{background:#ffa8a8!important;color:white!important;border:none;padding:2px 8px;border-radius:50%;cursor:pointer;margin-left:10px;transition:.2s}
.delete-post-btn{padding:2px 11px}
/* .delete-post-btn:hover,.delete-comment-btn:hover,.hard-delete-comment-btn:hover{opacity:.5} */
.dark-theme .delete-post-btn,.dark-theme .delete-comment-btn{background:rgb(154 52 52 / 45%)!important;color:#ccc!important}
.dark-theme .delete-post-btn:hover,.dark-theme .delete-comment-btn:hover{background:#aa0000;color:#fff}
.deleted-comment{opacity:.6}
.deleted-comment .comment{opacity:1}
.dark-theme .deleted-comment .comment{opacity:1}
.deleted-text{color:#777;font-style:italic}
.dark-theme .deleted-comment{opacity:.5}
.dark-theme .deleted-text{color:#999}
.reply-reference{display:inline-block;background:#f0f0f0;padding:2px 8px;border-radius:14px;font-size:.85em;color:#555;margin-bottom:8px;cursor:pointer;transition:background .2s}
.reply-reference:hover{background:#e0e0e0}
.dark-theme .reply-reference{background:#555;color:#ddd}
.dark-theme .reply-reference:hover{background:#666}
.post-id,.comment-id{margin-left:auto;font-size:.9em;color:#777;cursor:pointer;padding:2px 6px;border-radius:4px;transition:background 0.2s,color .2s}
.post-id:hover,.comment-id:hover{background:#e0e0e0;color:#333}
.dark-theme .post-id,.dark-theme .comment-id{color:#bbb}
.dark-theme .post-id:hover,.dark-theme .comment-id:hover{background:#555;color:#fff}
.post-header{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-bottom:10px}
.comment-header-left{display:flex;align-items:center;margin-bottom:5px}
.post-author{font-weight:bold;margin-right:10px}
blockquote{border-left:4px solid #a9a8db;margin:16px 0;padding:12px 20px;background-color:#f8f9fa;font-style:italic;color:#555;position:relative;border-radius:8px;transition:none;max-height:150px;overflow-y:auto;word-wrap:break-word}
.dark-theme .post-author{color:#ccc}
.post-date{color:#777;font-size:.9em;margin-top:4px}
.edit-comment-btn,.delete-comment-btn{background:none;border:none;color:#777;cursor:pointer;font-size:1em}
.dark-theme .edit-comment-btn,.dark-theme .delete-comment-btn{color:#aaa}
.edit-comment-btn:hover,.delete-comment-btn:hover{text-decoration:underline}
.edit-comment-textarea{width:100%;min-height:60px;margin-bottom:10px;padding:5px;border:1px solid #ddd;border-radius:16px}
.save-comment-btn,.save-post-btn,.cancel-edit-post-btn,.cancel-edit-comment-btn{background:#4CAF50;color:white;border:none;padding:5px 10px;border-radius:16px;cursor:pointer;font-size:16px;margin-top:5px;transition:.2s}
.cancel-edit-post-btn,.cancel-edit-comment-btn{background:#a65151}
.cancel-edit-post-btn:hover,.cancel-edit-comment-btn:hover{opacity:.7}
.save-comment-btn:hover{background:#45a049;opacity:.7}
.dark-theme .ans-btns,.dark-theme .edit-btns{opacity:.95}
.dark-theme .edit-comment-textarea{border-color:#555;background:#3d3d3d;color:#ccc}
.dark-theme .save-comment-btn{background:#438045;opacity:.8}
.dark-theme .save-comment-btn:hover{opacity:1}
.dark-theme .cancel-edit-post-btn,.dark-theme .cancel-edit-comment-btn{opacity:.8}
.dark-theme .cancel-edit-post-btn:hover,.dark-theme .cancel-edit-comment-btn:hover{opacity:1}
.post-actions{padding:10px 0;display:flex;gap:10px;border-top:1px solid #e0e0e0}
.dark-theme .post-actions{border-color:#414141}
.edit-post-btn{background:none;border:none;color:#da4949;cursor:pointer;font-size:1em;padding:5px 10px;border-radius:16px;transition:all .2s}
.edit-post-btn:hover{background:#f0f0f0;color:#333}
.dark-theme .edit-post-btn:hover{background:#444;color:#fff}
.edit-post-control{transition:all .2s ease}
.edit-post-control.hidden{opacity:0;pointer-events:none;height:0;padding:0;margin:0;overflow:hidden;transition:all .2s ease}
/* Цвет заглушки — из общей палитры .ava-* (style.css), здесь только размеры */
.post-header .avatar-initial,.comment-header .avatar-initial{width:40px;height:40px;font-size:18px;margin-right:10px;flex-shrink:0}
.dark-theme .button-85{opacity:.75}
.btn-send-comm{border:0;font-size:16px;float:right}
.edit-btns{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;justify-content:space-between;padding:10px 0}
.ans-btns{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}
.ql-editor p{font-size:16px!important}
.ql-container{min-height:200px}
.ql-editor img{max-width:100%;cursor:pointer}
.dark-theme .ql-container{background:#2d2d2d;color:#fff;border-color:#777!important}
.dark-theme .ql-toolbar{background:#1a1a1a!important;border-color:#777!important}
.dark-theme .ql-action,.dark-theme .ql-remove{color:#a8a8b2}
.ql-editor ol{list-style-type:decimal!important;margin-left:20px}
.ql-editor li{margin:5px 0;display:list-item}
.ql-editor h1{font-size:2em;margin:.5em 0}
.ql-editor h2{font-size:1.5em;margin:.5em 0}
.ql-editor h3{font-size:1.3em;margin:.5em 0}
.ql-editor h4{font-size:1.2em;margin:.5em 0}
.ql-editor h5{font-size:1.1em;margin:.5em 0}
.ql-editor .ql-align-center{text-align:center!important}
.ql-editor .ql-align-right{text-align:right!important}
.ql-editor .ql-align-justify{text-align:justify!important}
.post-content .ql-align-center{text-align:center!important}
.post-content .ql-align-right{text-align:right!important}
.post-content .ql-align-justify{text-align:justify!important}
.post-content .ql-align-center img{margin:5px auto!important}
.post-content div.spoiler-block,.ql-editor div.spoiler-block{display:block;width:100%;min-height:24px;padding:5px}
.post-content .spoiler-container.spoiler{display:block;padding:5px}
.post-content .spoiler-block{margin:0;min-height:1.5em}
.edit-editor-container .ql-container{min-height:100px;border:1px solid #ccc}
.edit-editor-container .ql-toolbar{border-bottom:1px solid #ccc}
.dark-theme .edit-editor-container .ql-container{border-color:#444!important}
.dark-theme .edit-editor-container .ql-toolbar{border-bottom-color:#444}
@keyframes highlightPost {
0%{background-color:#fff}
15%{background-color:#fff3cd}
35%{background-color:#fff}
55%{background-color:#fff3cd}
85%{background-color:#fff}
100%{background-color:#fff}
}
@keyframes highlightComment {
0%{background-color:#f7f7f7}
15%{background-color:#fff3cd}
35%{background-color:#f7f7f7}
55%{background-color:#fff3cd}
85%{background-color:#f7f7f7}
100%{background-color:#f7f7f7}
}
@keyframes highlightPostDark {
0%{background-color:#2d2d2d}
15%{background-color:#664d03}
35%{background-color:#2d2d2d}
55%{background-color:#664d03}
85%{background-color:#2d2d2d}
100%{background-color:#2d2d2d}
}
@keyframes highlightCommentDark {
0%{background-color:#3d3d3d}
15%{background-color:#664d03}
35%{background-color:#3d3d3d}
55%{background-color:#664d03}
85%{background-color:#3d3d3d}
100%{background-color:#3d3d3d}
}
.post.highlight{animation:highlightPost 3s ease-in-out forwards}
.comment.highlight{animation:highlightComment 3s ease-in-out forwards}
.dark-theme .post.highlight{animation:highlightPostDark 3s ease-in-out forwards}
.dark-theme .comment.highlight{animation:highlightCommentDark 3s ease-in-out forwards}
.post-content sub{vertical-align:sub;font-size:smaller}
.post-content sup{vertical-align:super;font-size:smaller}
.post-content pre{background:#f5f5f5;padding:10px;font-family:monospace}
.dark-theme .post-content pre{background:#333;color:#fff}
.character-counter{font-size:12px;color:#666}
.comment-char-counter{margin-left:auto;padding-right:4px;font-size:12px;color:#888;pointer-events:none;font-weight:500}
.dark-theme .comment-char-counter{color:#aaa}
.dark-theme .character-counter{color:#ccc}
.dark-theme .ql-editor.ql-blank::before{color:#ddd}
.dark-theme .ql-formats .ql-script{color:#ddd}
/* .dark-theme .ql-snow .ql-formats button{filter:brightness(2.5)} 
.dark-theme .ql-snow .ql-formats span svg{filter:brightness(2.5)}*/
.dark-theme .ql-snow .ql-formats button:hover,.dark-theme .ql-snow .ql-formats span svg:hover{filter:brightness(1.25) contrast(.5) hue-rotate(50deg)!important}
.ql-toolbar.ql-snow{border-radius:12px 12px 0 0}
.ql-container.ql-snow{border-radius:0 0 12px 12px}
.ql-snow .ql-tooltip{left:50%!important;transform:translateX(-50%)!important;max-width:95%;box-sizing:border-box;white-space:normal;overflow-wrap:break-word}
.dark-theme .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{background-color:#222;color:#eee;border-color:#777}
.dark-theme .ql-editor{background:#2d2d2d!important;color:#dbdbdb!important;border-radius:0 0 12px 12px}
.comment-editor,.edit-comment-editor{margin-bottom:10px}
.comment-editor .ql-container{min-height:80px;border-radius:4px}
.comment-editor .ql-toolbar{border-radius:4px 4px 0 0;margin-bottom:0}
.edit-comment-editor .ql-container{min-height:60px}
.dark-theme .comment-editor .ql-container,.dark-theme .edit-comment-editor .ql-container{background:#3d3d3d;color:#fff;border-color:#555}
.dark-theme .comment-editor .ql-toolbar,.dark-theme .edit-comment-editor .ql-toolbar{background:#2d2d2d;border-color:#555}
.dark-theme .ql-upload{opacity:.75!important}
/* Постраничная навигация оформляется в style.css: тот же вид на страницах
   постов, комментариев и участников, а style.css подключён на всех трёх. */
@media (max-width:480px) {
.post-date{font-size:.75em}
}
.upload-image-btn{background:none;border:none;color:#777;cursor:pointer;font-size:.8em;margin-left:10px;padding:5px 10px;border-radius:4px;transition:all .2s;display:inline-flex;align-items:center;gap:5px}
.upload-image-btn:hover{background:#f0f0f0;color:#333}
.dark-theme .upload-image-btn:hover{background:#444}
/* Скрепка нарисована сплошным силуэтом (path без fill), а не обводкой — прежнее
   правило со stroke на неё не действовало, и в тёмной теме значок оставался
   чёрным на тёмном. Цвет берём у кнопки, чтобы работало и наведение. */
.upload-image-btn svg{width:24px;height:24px;opacity:.7;transition:.2s}
.upload-image-btn svg path{fill:currentColor}
.dark-theme .upload-image-btn{color:#a8a8b2}
.dark-theme .upload-image-btn:hover{color:#cec7fa}
.upload-image-btn svg:hover{opacity:1}
.comment-textarea-wrapper{position:relative}
.comment-image-preview{margin:10px 5px;text-align:center;display:inline-block}
.comment-image-preview img{max-width:200px;max-height:150px;border-radius:8px;border:2px solid #e0e0e0}
.dark-theme .comment-image-preview img{border-color:#555}
.dark-theme .comment-header{border-bottom:1px solid #555}
.dark-theme .remove-image-btn{background:#ce4a4a}
.remove-image-btn{background:#ff4444;color:white;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:24px;display:inline-flex;align-items:center;justify-content:center;vertical-align:super;transition:.2s}
.remove-image-btn:hover{background:#cc0000}
.comment-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:5px;flex-direction:row-reverse;overflow:auto}
.comment-action-buttons{display:flex;gap:10px;flex-direction:row-reverse;width:100%;justify-content:space-between}
.comment-manage-buttons{display:flex}
.image-modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease}
.image-modal.show{opacity:1;animation:none}
.image-modal-content{margin:auto;display:block;max-width:90%;max-height:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5);opacity:0;transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275)}
.image-modal.show .image-modal-content{opacity:1;transform:translate(-50%,-50%) scale(1)}
.image-modal-close{position:absolute;top:15px;right:35px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;z-index:1010;transition:color 0.3s,opacity .3s;opacity:0;filter:drop-shadow(0px 0px 1px black)}
.image-modal.show .image-modal-close{opacity:1}
.image-modal-close:hover{color:#ccc}
.image-modal-caption{position:absolute;bottom:20px;left:0;width:100%;text-align:center;color:#fff;font-size:16px;padding:10px;background:rgba(0,0,0,0.7);transition:opacity .3s;opacity:0}
.image-modal.show .image-modal-caption{opacity:1}
.image-modal.fade-out{opacity:0}
.image-modal.fade-out .image-modal-content{opacity:0;transform:translate(-50%,-50%) scale(0.8)}
.image-modal.fade-out .image-modal-close,.image-modal.fade-out .image-modal-caption{opacity:0}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}

.post-content img{max-width:calc(100% - 10px);height:auto;border-radius:8px;margin:10px 5px 5px 5px;display:block;cursor:zoom-in;transition:.2s}
.post-content p{margin:0;text-indent:2em}
.post-content a{color:#897ece;transition:.2s}
.post-content a:hover{opacity:.75}
.post-content img:hover{transform:scale(0.98);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.post-avatar:hover,.comment-avatar:hover{transform:none!important}
.post-content.collapsed-content{max-height:600px;overflow:hidden;position:relative;padding-bottom:0!important;transition:.5s}
.post-polls-wrapper.collapsed-content{max-height:300px;overflow:hidden;position:relative;padding-bottom:0!important;transition:.5s}
.post-content.collapsed-content.expanded, .post-polls-wrapper.collapsed-content.expanded{max-height:fit-content;overflow:visible;padding-bottom:10px!important;transition:.5s}
.post-content-overlay{position:relative;bottom:7.5em;height:120px;pointer-events:none;z-index:2;transition:.5s;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);opacity:1}
.dark-theme .post-content-overlay{background:linear-gradient(to bottom,rgba(45,45,45,0) 0,#2d2d2d 100%)}
/* Потолок 9000px убран. Он стоял с !important, то есть перебивал и inline-высоту,
   которую на время анимации выставляет togglePostContent, и правило ниже. Длинный
   пост (много текста плюс несколько картинок легко перебирают 9000px) после
   «Развернуть» упирался в этот потолок: сам блок обрезался, а из-за overflow:visible
   хвост вылезал поверх кнопки «Свернуть пост» и обрубался уже границей карточки.
   Высотой распахнутого поста управляет содержимое, промежуточные значения — JS. */
.post-content.expanded, .post-polls-wrapper.expanded{max-height:none;transition:.5s}
.post-content.expanded + .post-content-overlay, .post-polls-wrapper.expanded + .post-content-overlay{opacity:0;display:none}
.post-toggle-wrapper{text-align:center;margin-top:-140px;padding-top:30px;padding-bottom:15px;position:relative;z-index:3;transition:.5s}
.post-toggle-wrapper.expanded{padding-top:130px;position:unset}
.dark-theme .post-toggle-wrapper{border-color:#444}
.post-toggle-btn, .poll-toggle-btn-expand{background:none;border:none;color:#7f7f7f;cursor:pointer;font-size:1.15em;padding-top:10px;margin:0;display:inline-block;font-weight:bold}
.post-toggle-btn:hover, .poll-toggle-btn-expand:hover{text-decoration:underline}
.loading-comments{text-align:center;padding:20px;color:#666;font-style:italic}
.comment-image{box-shadow:0 2px 4px rgba(0,0,0,0.1);cursor:zoom-in;transition:.2s}
.comment-image:hover{transform:scale(0.98);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.admin-notice{background:#e3f2fd;border:1px solid #2196f3;border-radius:5px;padding:10px;margin-bottom:15px;text-align:center}
.loading-posts{text-align:center}
.admin-notice p{margin:0;color:#1976d2;font-size:14px}
#toggle-create-post-form{margin:0 auto;display:flex}
/* Переходы перечислены явно: сокращённое transition:.5s анимировало ВСЁ подряд,
   включая появление рамки, и добавляло к сворачиванию лишнее подёргивание. */
#create-post-form-content{padding-top:0;border-top:none;margin-top:0;transition:max-height .5s ease,opacity .5s ease,padding-top .5s ease,margin-top .5s ease;max-height:0;overflow:hidden;opacity:0}
.dark-theme #create-post-form-content{border-top:1px solid #444!important}
#create-post-form-content.expanded{max-height:none;height:auto;opacity:1;padding-top:15px;margin-top:15px;border-top:1px solid #eee}
.btn-post{font-size:16px}
.btn-post:after{background:#ac6fdf}
.btn-pub:after{background:#7449c6}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Заголовок'!important}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Заголовок 1'!important}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Заголовок 2'!important}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Заголовок 3'!important}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Заголовок 4'!important}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Заголовок 5'!important}
.ql-snow .ql-picker.ql-header{width:110px!important}
blockquote{border-left:4px solid #a9a8db;margin:16px 0;padding:12px 20px;background-color:#f8f9fa;font-style:italic;color:#555;position:relative;border-radius:8px;transition:none}
blockquote:has(+ blockquote){margin-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;padding-bottom:0}
.dark-theme blockquote{border-left-color:#595cbb;background-color:#2d3748;color:#e2e8f0}
blockquote + blockquote{margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important;padding-top:6px}
blockquote blockquote{border-left-color:#7cb342;background-color:#f1f8e9;margin:10px 0}
.dark-theme blockquote blockquote{border-left-color:#9ccc65;background-color:#1b2a32}
.ql-editor blockquote{border-left:4px solid #a9a8db;margin:16px 0;padding:12px 20px;background-color:#f8f9fa;font-style:italic;color:#555;border-radius:8px}
.dark-theme .ql-editor blockquote{border-left-color:#595cbb;background-color:#2d3748;color:#e2e8f0}
blockquote:not(blockquote + blockquote)::before{content:'"';font-size:38px;color:#4a90e2;position:absolute;right:8px;top:-8px;font-family:serif;opacity:.3}
blockquote + blockquote::before{content:none}
.dark-theme blockquote:not(blockquote + blockquote)::before{color:#64b5f6}
.dark-theme blockquote::before{color:#64b5f6}
blockquote cite{display:block;margin-top:8px;font-size:14px;color:#666;font-style:normal;text-align:right}
.dark-theme blockquote cite{color:#a0aec0}
.dark-theme .admin-notice{filter:invert(.85)}
.upload-progress-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .3s ease}
.upload-progress-overlay.show{opacity:1}
.upload-progress-container{background:white;border-radius:12px;padding:30px;min-width:300px;max-width:400px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transform:scale(0.9);transition:transform .3s ease}
.upload-progress-overlay.show .upload-progress-container{transform:scale(1)}
.dark-theme .upload-progress-container{background:#2d2d2d;color:#ccc}
.upload-progress-title{font-size:18px;font-weight:bold;margin-bottom:15px;text-align:center;color:#333}
.dark-theme .upload-progress-title{color:#ccc}
.upload-progress-bar-container{width:100%;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:10px}
.dark-theme .upload-progress-bar-container{background:#444}
.upload-progress-bar{height:100%;background:linear-gradient(90deg,#4CAF50,#8BC34A);border-radius:4px;width:0;transition:width .3s ease;position:relative;overflow:hidden}
.upload-progress-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer {
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
.upload-progress-text{text-align:center;color:#666;font-size:14px;margin-bottom:15px}
.dark-theme .upload-progress-text{color:#ccc}
.upload-progress-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(76,175,80,0.3);border-radius:50%;border-top-color:#4CAF50;animation:spin 1s ease-in-out infinite;margin-right:10px;vertical-align:middle}
.upload-cancel-btn{background:#f44336;color:white;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s;width:100%;margin-top:10px}
.upload-cancel-btn:hover{background:#d32f2f;transform:translateY(-1px);box-shadow:0 2px 8px rgba(244,67,54,0.3)}
.dark-theme .upload-cancel-btn{background:#c62828}
.dark-theme .upload-cancel-btn:hover{background:#b71c1c}
.like-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;color:#777;font-size:14px;padding:5px 8px;border-radius:4px;transition:all .2s}
.like-btn:hover{background:#0000000d;color:#555}
.dark-theme .like-btn{opacity:.85}
.dark-theme .like-btn:hover{background:#ffffff0d;color:#ccc}
.like-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:all .2s cubic-bezier(0.175,0.885,0.32,1.275)}
.like-btn.active{color:#e91e63}
.like-btn.active svg{fill:#e91e63;stroke:#e91e63;transform:scale(1.1)}
.like-count{font-weight:bold}
.like-btn.animating svg{transform:scale(1.4)}
.post-actions-left{display:flex;align-items:center;gap:15px;width:100%;justify-content:space-between;flex-direction:row-reverse}
.comment-toggle{cursor:pointer;margin-right:4px;margin-left:-6px;color:#999;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;transition:color .2s;border-radius:50%}
.comment-toggle svg{transition:transform .3s ease;width:18px;height:18px;pointer-events:none}
.comment.collapsed > .comment-header > .comment-header-left > .comment-toggle svg{transform:rotate(180deg)}
.comment-toggle:hover{color:#333;background-color:rgba(0,0,0,0.05)}
.dark-theme .comment-toggle:hover{color:#fff;background-color:rgba(255,255,255,0.1)}
.comment.collapsed .reply-reference, .comment.collapsed .comment-id { display: none !important; }
.comment-collapsed-info{display:none;color:#777;font-size:.9em;margin-left:8px;margin-top:4px;cursor:pointer;font-style:italic}
.comment.collapsed .comment-collapsed-info{display:inline}
.comment.collapsed .post-avatar{width:20px;height:20px}
.comment.collapsed .avatar-initial{width:20px;height:20px;font-size:10px}
.comment.child-hidden{max-height:0!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;border-width:0!important;pointer-events:none!important}
.post-content,.comment-buttons{transition:max-height .3s cubic-bezier(0.4,0,0.2,1),opacity .3s cubic-bezier(0.4,0,0.2,1),margin .3s cubic-bezier(0.4,0,0.2,1),padding .3s cubic-bezier(0.4,0,0.2,1)}
.comment.collapsed .post-content,.comment.collapsed .comment-buttons{max-height:0!important;opacity:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;border:none!important;pointer-events:none!important}
.pinned-indicator{color:#c8577d;font-size:.85em;margin-bottom:8px;display:flex;align-items:center;gap:5px;font-weight:700}
.pinned-indicator svg{width:16px;height:16px;fill:currentColor}
.local-unpin-btn{background:none;border:none;color:inherit;margin-left:auto;cursor:pointer;font-size:16px;opacity:.7;transition:.2s;padding:0 5px}
.local-unpin-btn:hover{opacity:1;color:#e91e63}
.post.is-pinned{border:1px solid #f1b6ca;box-shadow:0 0 10px #e91e631a;background:#faf6f7}
.dark-theme .post.is-pinned{border-color:#7f425d;background:#332b2e}
.pin-post-btn{background:none;border:none;cursor:pointer;margin-left:10px;color:#ffa522;transition:.2s}
.pin-post-btn:hover{color:#e91e63;text-decoration:underline}
.pin-post-btn.active{color:#e91e63;font-weight:700}
.scroll-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:#ab90db;color:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(20px);transition:all .3s cubic-bezier(0.4,0,0.2,1);z-index:4}
.scroll-to-top.show{opacity:.75;pointer-events:auto;transform:translateY(0)}
.scroll-to-top:hover{background:#a381e1;transform:translateY(-3px);box-shadow:0 6px 16px #0006;opacity:1}
.scroll-to-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(0.4,0,0.2,1)}
/* Направление задаёт scroll-nav.js: пока страница в начале, кнопка ведёт вниз,
   дальше — обратно наверх. Тот же значок переворачивается. */
.scroll-to-top.scroll-nav-down svg{transform:rotate(180deg)}
@media (max-width: 768px) {
.scroll-to-top{bottom:5px;right:5px;width:35px;height:35px}
}
.dark-theme .scroll-to-top{background:#614f81;box-shadow:0 4px 12px #00000080}
.dark-theme .scroll-to-top:hover{background:#45375d}
.post-content hr,.ql-editor hr{border:0;height:1px;background-image:linear-gradient(to right,#0000,#0003,#0000);margin:20px 0}
.dark-theme .post-content hr,.dark-theme .ql-editor hr{background-image:linear-gradient(to right,#fff0,#fff3,#fff0)}
.spoiler{border-radius:3px;padding:2px 5px;cursor:pointer;transition:all .2s ease}
.ql-editor .spoiler{background-color:#f0f0f0;color:#333;border:1px dashed #bbb}
.dark-theme .ql-editor .spoiler{background-color:#3a3b55;color:#e0e0e0;border:1px dashed #7a7a9e}
.post-content .spoiler{background-color:#ebdff1;color:transparent;text-shadow:none;position:relative;user-select:none;display:inline-block;min-width:80px;max-width:calc(100% - 5px);vertical-align:bottom;box-sizing:border-box;word-break:break-word;line-height:1.4;transition:background-color 0.2s,opacity .2s}
.dark-theme .post-content .spoiler{background-color:#52435b}
.post-content .spoiler::before{content:'СПОЙЛЕР';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#888;font-size:.75em;font-weight:700;letter-spacing:1px;pointer-events:none;opacity:1;transition:opacity .2s;font-family:sans-serif;text-transform:uppercase;white-space:nowrap}
.dark-theme .post-content .spoiler::before{color:#ccc}
.post-content .spoiler:not(.visible):hover{opacity:.75;cursor:pointer}
.post-content .spoiler:not(.visible) *{opacity:0;visibility:hidden;pointer-events:none}
.post-content .spoiler.visible{background-color:#0000000d;color:inherit;user-select:text;outline:1px dashed #bbb;opacity:1;cursor:text}
.post-content .spoiler.visible::before{opacity:0}
.dark-theme .post-content .spoiler.visible{background-color:#ffffff1a;color:inherit;outline:1px dashed #666}
/* .ql-spoiler svg,.ql-divider svg{width:18px;height:18px;opacity:.8} */
.ql-spoiler{font-weight:700;font-family:monospace}
.ql-spoiler:hover{opacity:.5}
.dark-theme .ql-spoiler{opacity:.75!important}
.post-title-input{width:100%;padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:12px;font-size:16px;box-sizing:border-box;height:auto}
.dark-theme .post-title-input{background:#2d2d2d;border-color:#777;color:#ccc}
.comment-toolbar{display:flex;gap:5px;margin-bottom:5px;padding:5px;background:#f7f7f7;border:1px solid #eee;border-radius:4px;align-items:center}
.dark-theme .comment-toolbar{background:#3d3d3d;border-color:#555}
.format-btn{background:none;border:1px solid transparent;cursor:pointer;font-size:14px;padding:2px 8px;border-radius:4px;color:#555;transition:all .2s;font-weight:700;min-width:24px}
.dark-theme .format-btn{color:#ccc}
.format-btn:hover{background:rgba(0,0,0,0.05);border-color:#ddd}
.dark-theme .format-btn:hover{background:rgba(255,255,255,0.05);border-color:#666}
.stats-container{display:grid;grid-template-columns:0.8fr 1.3fr 1fr;gap:20px;margin-bottom:20px;justify-content:center}
.stat-column{background:#fff;border-radius:12px;padding:15px;box-shadow:0 1px 5px rgba(0,0,0,0.15);min-width:0}
.dark-theme .stat-column{background:#2d2d2d;border:1px solid #444}
.stat-title{font-size:16px;font-weight:700;margin-bottom:15px;border-bottom:2px solid #f0f0f0;padding-bottom:10px;color:#333}
.dark-theme .stat-title{color:#ccc;border-bottom-color:#444}
.stat-list{list-style:none;padding:0;margin:0}
.stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f5f5f5;font-size:14px;gap:10px}
.dark-theme .stat-item{border-bottom-color:#3d3d3d}
.stat-item:last-child{border-bottom:none}
.stat-item a{color:#333;text-decoration:none;transition:.2s;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.dark-theme .stat-item a{color:#ddd}
.stat-item a:hover{color:#7f4caf}
.stat-count{background:#f0f0f0;padding:2px 8px;border-radius:10px;font-size:12px;color:#666;font-weight:600;white-space:nowrap}
.dark-theme .stat-count{background:#444;color:#ccc}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;max-height:275px;overflow:auto}
.tag-chip{background:#f0f0f0;padding:4px 10px;border-radius:15px;font-size:12px;color:#555;text-decoration:none;transition:.2s;cursor:pointer;text-transform:capitalize}
.dark-theme .tag-chip{background:#3d3d3d;color:#bbb}
.tag-chip:hover{background:#e0e0e0;color:#333}
.dark-theme .tag-chip:hover{background:#4a4a4a;color:#ccc}
.post-tags-input-container{margin-top:15px;border:1px solid #ccc;border-radius:12px;padding:5px;display:flex;flex-wrap:wrap;gap:5px;background:#fff;min-height:32px}
.dark-theme .post-tags-input-container{background:#2d2d2d;border-color:#777}
.post-tag-badge{background:#e8e3fd;color:#8550c3;padding:4px 8px;border-radius:16px;font-size:14px;display:flex;align-items:center;gap:5px;text-transform:capitalize}
.dark-theme .post-tag-badge{background:#6d478c;color:#e9e9e9}
.post-tag-remove{cursor:pointer;font-weight:bold;opacity:.7;font-size:26px}
.post-tag-remove:hover{opacity:1}
#post-tags-input{border:none;outline:none;padding:8px;flex:1;min-width:120px;font-size:14px;background:transparent;color:inherit}
.post-tags-display{padding:10px 0;border-top:1px solid #eee;display:flex;flex-wrap:wrap;gap:8px}
.dark-theme .post-tags-display{border-top-color:#444}
.post-tag-link{color:#633ea4;text-decoration:none;font-size:16px;background:#f0f0f0;padding:3px 8px;border-radius:16px;transition:.2s;text-transform:capitalize}
.post-tag-link:hover{background:#e0e0e0;text-decoration:underline}
.dark-theme .post-tag-link{background:#3d3d3d;color:#ad92e1}
.dark-theme .post-tag-link:hover{background:#4a4a4a}
#alerts-container{position:fixed;top:60px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.alert{padding:15px 25px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;transform:translateY(-20px);transition:all .3s ease;max-width:300px;font-size:14px;display:flex;align-items:center;position:relative;top:auto;right:auto}
.alert.show{opacity:1;transform:translateY(0)}
@media (max-width:900px) {
.stats-container{grid-template-columns:1fr}
.stat-item a{white-space:normal}
}
.edit-tags-container{margin-top:10px;border:1px solid #ccc;border-radius:16px;padding:5px;display:flex;flex-wrap:wrap;gap:5px;background:#fff;min-height:42px;transition:background-color 0.3s,border-color .3s}
.edit-tags-input{border:none;outline:none;padding:8px;flex:1;min-width:120px;font-size:14px;background:transparent;color:inherit}
.dark-theme .edit-tags-container{background:#2d2d2d;border-color:#444;color:#ccc}
.dark-theme .edit-tags-input{color:#ccc}
.dark-theme .edit-tags-input::placeholder{color:#888}
@media (max-width:768px) {
.posts-pagination{margin:10px 0}
.post{padding:10px}
.upload-progress-container{min-width:250px;padding:20px}
.allow-comments-checkbox{justify-content:center}
.post-tags-input-container{min-height:32px}
.post-tag-badge{padding:0 8px}
}
.guest-blurred{filter:blur(5px);pointer-events:none;user-select:none;opacity:.7}
.guest-overlay-container{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);z-index:2000;width:90%;max-width:400px;animation:slideUp .5s ease-out}
.guest-auth-banner{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:12px;padding:20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.1)}
.dark-theme .guest-auth-banner{background:rgba(45,45,45,0.95);border-color:rgba(255,255,255,0.1)}
.guest-auth-banner h3{margin:0 0 10px;color:#333}
.dark-theme .guest-auth-banner h3{color:#ccc}
.guest-auth-banner p{margin:0 0 15px;color:#666;font-size:14px}
.dark-theme .guest-auth-banner p{color:#ccc}
.guest-login-btn{display:inline-block;background:#633ea4;color:white;padding:10px 25px;border-radius:25px;text-decoration:none;font-weight:700;transition:.2s}
.guest-login-btn:hover{background:#503285;transform:translateY(-2px)}
.post.hidden-post{display:none!important}
.active-filters-container{display:none;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:0 5px;animation:fadeIn .3s ease}
.active-filters-container.show{display:flex}
.filter-chip{background:#9c81cb;color:white;padding:6px 12px;border-radius:20px;font-size:14px;display:flex;align-items:center;gap:8px;cursor:default;box-shadow:0 2px 5px rgba(0,0,0,0.1);transition:all .2s}
.dark-theme .filter-chip{background:#7f5caf}
.filter-chip:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.filter-chip-remove{cursor:pointer;font-weight:700;font-size:18px;line-height:1;opacity:.8;transition:opacity .2s;display:flex;align-items:center}
.filter-chip-remove:hover{opacity:1;color:#ffcccc}
.post.filtered-out{display:none!important}
.dark-theme .active-filters-container{opacity:.75}
@keyframes fadeIn {
from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp {
from{transform:translate(-50%,100%);opacity:0}
to{transform:translate(-50%,0);opacity:1}
}
.comments-hint-box{background:#f8f9fa;border:1px dashed #ccc;border-radius:8px;padding:10px 15px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;color:#555;animation:fadeIn .3s ease}
.dark-theme .comments-hint-box{background:#3d3d3d;border-color:#555;color:#ddd}
.comments-hint-btn{background:#ab90db;color:white;border:none;padding:6px 15px;border-radius:16px;cursor:pointer;font-weight:700;transition:background .2s;white-space:nowrap}
.comments-hint-btn:hover{background:#9c81cb}
.dark-theme .comments-hint-btn{background:#614f81}
.dark-theme .comments-hint-btn:hover{background:#7f5caf}
.posts-header-wrapper{display:flex;justify-content:center;align-items:center;position:relative;margin-bottom:20px}
.posts-header-wrapper h1{margin:0}
.search-container{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;width:100%}
.search-input-wrapper{width:0;overflow:hidden;transition:width .3s ease,opacity .3s ease;opacity:0}
.search-input-wrapper.active{width:100%;opacity:1;margin-right:10px}
.posts-search-input{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:20px;outline:none;font-size:14px;background:#fff;color:#333;box-sizing:border-box}
.dark-theme .posts-search-input{background:#2d2d2d;border-color:#555;color:#ccc}
.posts-search-btn{background:none;border:none;cursor:pointer;color:#777;padding:5px;display:flex;align-items:center;justify-content:center;transition:.2s;border-radius:50%}
.posts-search-btn:hover{color:#633ea4;background:#0000000d}
.dark-theme .posts-search-btn{color:#ccc}
.dark-theme .posts-search-btn:hover{color:#ad92e1;background:#ffffff0d}
.ql-container.drag-over,textarea.drag-over{border:2px dashed #633ea4!important;background-color:rgba(99,62,164,0.05)!important;border-radius:0 0 12px 12px;transition:all .2s ease;outline:none!important}
textarea.drag-over{border-radius:8px}
.dark-theme .ql-container.drag-over,.dark-theme textarea.drag-over{border-color:#ad92e1!important;background-color:rgba(173,146,225,0.1)!important}
.ql-editor .ql-video, .post-content .ql-video{min-width:320px;object-fit:cover;aspect-ratio:16 / 9;border:0}
.poll-creator-toggle-wrapper {margin-top: 15px; margin-bottom: 10px;}
.poll-toggle-btn {display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid #ccc; padding: 8px 15px; border-radius: 20px; font-size: 14px; cursor: pointer; color: #555; transition: 0.2s;}
.poll-toggle-btn:hover {background: #f0f0f0; color: #333;}
.dark-theme .poll-toggle-btn {border-color: #555; color: #ccc;}
.dark-theme .poll-toggle-btn:hover {background: #3d3d3d; color: #fff;}

.poll-creator-container {background: #f9f9f9; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-bottom: 15px;}
.dark-theme .poll-creator-container {background: #2a2a2a; border-color: #444;}
.poll-question-input {width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-weight: bold; margin-bottom: 15px; background: #fff; box-sizing: border-box;}
.dark-theme .poll-question-input {background: #333; border-color: #555; color: #fff;}

.poll-duration-wrapper{margin-top:15px}
.poll-duration-label{display:block;margin-bottom:10px;font-weight:700;color:inherit}
/* Галочки опций опроса в форме создания */
.poll-option-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;font-size:14px;color:inherit}
.poll-option-toggle input{flex:0 0 auto;cursor:pointer}
/* Множественный выбор: варианты-чекбоксы и подтверждение */
.poll-multi-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:1px solid rgba(0,0,0,.12);border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s}
.poll-multi-opt:hover{background:rgba(121,80,242,.08);border-color:rgba(121,80,242,.45)}
.dark-theme .poll-multi-opt{border-color:rgba(255,255,255,.16)}
.poll-multi-opt input{flex:0 0 auto;cursor:pointer}
.poll-multi-opt span{min-width:0;word-break:break-word}
.poll-multi-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:10px}
.poll-multi-submit{background:#7950f2;color:#fff;border:none;padding:8px 20px;border-radius:16px;cursor:pointer;font-weight:700;transition:background .2s}
.poll-multi-submit:hover{background:#6741d9}
.poll-multi-submit:disabled{opacity:.6;cursor:default}
.poll-multi-hint{font-size:12px;opacity:.6}
/* Ссылки управления голосом в готовом опросе */
.poll-link-btn{background:none;border:none;padding:4px 0;cursor:pointer;font-size:13px;font-weight:600;color:#7950f2;white-space:nowrap}
.poll-link-btn:hover{text-decoration:underline}
.btn-poll-revoke{color:#c0392b}
.dark-theme .poll-link-btn{color:#9775fa}
.dark-theme .btn-poll-revoke{color:#ff8787}
.poll-select,.poll-input-number{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:15px;box-sizing:border-box;outline:none;font-family:inherit;transition:.2s ease}
.poll-select:focus,.poll-input-number:focus,.poll-option-input:focus{border-color:#8c73b1}
.dark-theme .poll-select,.dark-theme .poll-input-number{background:#333;border-color:#555;color:#ccc}
#poll-duration-type{margin-bottom:10px;cursor:pointer}
.poll-custom-duration{gap:10px}
.poll-option-input-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:relative}
.poll-option-input{flex:1;padding:10px 55px 10px 12px;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:15px;box-sizing:border-box;outline:none}
.poll-char-counter{position:absolute;right:40px;color:#888;font-size:13px;pointer-events:none;font-weight:500}
.poll-status-badge{color:#fff;padding:4px 8px;border-radius:14px;font-size:.85em;display:inline-block;margin:5px auto}
.poll-status-badge.ended-badge{background:rgb(201 74 74 / 50%)}
.poll-status-badge.timer-badge{background:rgb(102 69 181 / 65%);opacity:.75}
.poll-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:15px;font-size:12px;color:#888}
.btn-close-poll{padding:5px 12px}

.dark-theme .poll-option-input {background: #333; border-color: #555; color: #ccc;}
.remove-poll-option-btn {background: none; border: none; color: #ff4444; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 5px;}
.remove-poll-option-btn:hover {color: #cc0000;}

.add-poll-option-btn {background: none; border: none; color: #633ea4; font-weight: bold; cursor: pointer; padding: 5px 0;}
.dark-theme .add-poll-option-btn {color: #ad92e1;}

.post-poll-container {margin: 0; padding: 15px; border: 1px solid #eaeaea; border-radius: 12px; background: #fafafa;}
.dark-theme .post-poll-container {border-color: #444; background: #2a2a2a;}
.poll-question {font-weight: bold; font-size: 16px; margin-bottom: 15px;}
.poll-options {display: flex; flex-direction: column; gap: 10px;}

.poll-vote-btn {width: 100%; text-align: left; background: #fff; border: 1px solid #ccc; padding: 12px 15px; border-radius: 8px; cursor: pointer; font-size: 15px; transition: 0.2s;}
.poll-vote-btn:hover {border-color: #633ea4; background: #f5f0ff;}
.dark-theme .poll-vote-btn {background: #333; border-color: #555; color: #ccc;}
.dark-theme .poll-vote-btn:hover {border-color: #ad92e1; background: #3d3450;}

.poll-result-bar-container {position: relative; background: #eee; border-radius: 8px; overflow: hidden; min-height: 44px;}
.dark-theme .poll-result-bar-container {background: #333;}
.poll-result-fill {position: absolute; top: 0; left: 0; height: 100%; background: #e0d4f5; transition: width 0.5s ease-out;}
.dark-theme .poll-result-fill {background: #4a3b69;}
.poll-result-text {position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; box-sizing: border-box; z-index: 1;transform: translateY(-50%);}
.poll-option-name {font-weight: 500;max-width: 95%;overflow: auto;text-overflow: ellipsis;max-height: 40px;}
.poll-option-percent {font-weight: bold;white-space: nowrap;}

.poll-footer {margin-top: 15px; font-size: 12px; color: #888;}
.dark-theme .poll-footer {color: #aaa;}

.poll-rel-wrap { position: relative; margin-bottom: 10px; }
.poll-q-wrap { padding-right: 25px; } 
.poll-input-full { width: 100%; box-sizing: border-box; padding-right: 32px; }
.poll-counter-badge { position: absolute; right: 10px; top: 21px; transform: translateY(-50%); font-size: 12px; color: var(--text-color); pointer-events: none; }
.poll-q-wrap .poll-counter-badge { right: 35px; }

.post-polls-wrapper { display: flex; flex-direction: column; gap: 15px; margin: 15px 0; }
.poll-creator-item { background: #f9f9f9; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-bottom: 15px; position: relative; }
.dark-theme .poll-creator-item { background: #2a2a2a; border-color: #444; }
.remove-poll-btn { position: absolute; top: 15px; right: 10px; background: none; border: none; color: #ff4444; font-size: 40px; cursor: pointer; padding: 0 5px; line-height: 1; transition: 0.2s; }
.remove-poll-btn:hover { color: #cc0000; }
.poll-opt-rm-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #ff4444; font-size: 30px; cursor: pointer; padding: 0 5px; line-height: 1; transition: 0.2s; }
.poll-opt-rm-btn:hover { color: #cc0000; }
.poll-opt-wrap .poll-input-full { padding-right: 50px; }
.poll-opt-wrap .poll-counter-badge { right: 30px; }

.user-link{overflow:hidden;max-width:fit-content;text-overflow:ellipsis}

#hash-nav-loader {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dark-theme #hash-nav-loader {background:rgba(45,45,45,0.8)}
.hash-nav-spinner {width:40px;height:40px;border:4px solid #ccc;border-top-color:#633ea4;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}
.dark-theme .hash-nav-spinner {border-color:#555;border-top-color:#8670af}
.hash-nav-text {font-size:16px;color:#333;font-weight:500}
.dark-theme .hash-nav-text {color:#ccc}

.quote-comment-btn{background:none;border:none;color:#777;cursor:pointer;font-size:1.2em;padding:0 4px;margin-left:4px;transition:color .2s;line-height:1}
.quote-comment-btn:hover{color:#633ea4}
.dark-theme .quote-comment-btn{color:#bbb}
.dark-theme .quote-comment-btn:hover{color:#8670af}
.quoted-comment{border-left:4px solid #ad87f1;background-color:#f5f0ff;margin:4px 0 8px 0;padding:8px 12px;border-radius:8px 16px 16px 8px;max-height:150px;overflow-y:auto;cursor:pointer;transition:background-color .2s}
.quoted-comment:hover{background-color:#ede4ff}
.dark-theme .quoted-comment{border-left-color:#8670af;background-color:#443b56}
.dark-theme .quoted-comment:hover{background-color:#463b5a}
.quote-header{font-size:.85em;margin-bottom:5px;color:#666;display:flex;justify-content:space-between;font-weight:500}
.dark-theme .quote-header{color:#aaa}
.quote-author{font-weight:700}
.quote-text{font-style:italic;color:#444;font-size:.95em;white-space:pre-wrap;word-break:break-word}
.dark-theme .quote-text{color:#ccc}
.quote-comment-btn svg{pointer-events:none}
.active-quote-preview{background-color:#f5f0ff;border-left:4px solid #a48ad0;padding:8px 30px 8px 12px;margin-bottom:8px;border-radius:4px 8px 8px 4px;position:relative;font-size:.9em;display:none}
.dark-theme .active-quote-preview{background-color:#443b56;border-left-color:#8670af}
.cancel-quote-btn{position:absolute;top:5px;right:8px;background:none;border:none;color:#999;cursor:pointer;font-size:24px;padding:0;line-height:1;transition:color .2s}
.cancel-quote-btn:hover{color:#ff4444}
.active-quote-header{font-weight:700;margin-bottom:4px;color:#666}
.dark-theme .active-quote-header{color:#aaa}
.active-quote-text{color:#444;white-space:pre-wrap;word-break:break-word;font-style:italic;max-height:100px;overflow-y:auto}
.dark-theme .active-quote-text{color:#ccc}

/* container-* — чтобы заглушка внутри подстраивалась под размер встраивания */
.youtube-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;margin-top:5px;border-radius:8px;background:#e5e5e5;container-type:size;container-name:youtube-embed}
.dark-theme .youtube-wrapper{background:#222}

.youtube-wrapper::before {content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 4px solid rgba(0,0,0,0.1); border-top-color: #633ea4; border-radius: 50%; animation: spin 1s linear infinite; z-index: 1;}
.dark-theme .youtube-wrapper::before {border-color: rgba(255,255,255,0.1); border-top-color: #ad92e1;}
.youtube-wrapper.loaded::before, .youtube-wrapper.blocked::before {display: none;}

.youtube-wrapper iframe {position: relative; z-index: 2; opacity: 0; transition: opacity 0.3s ease; width: 100% !important; height: 100% !important; border: 0 !important; margin: 0 !important;border-radius:8px}
.youtube-wrapper.loaded iframe, .youtube-wrapper.force-load iframe {opacity: 1;}

/* Заглушка «видео грузится слишком долго».
   Показывается ТОЛЬКО у своей обёртки (дочерний комбинатор) и только пока висит
   класс .blocked — он снимается, как только iframe загрузился. Размеры тянутся
   за шириной встраивания через контейнерные запросы, а перед каждым таким
   правилом стоит обычное значение в px — браузеры без поддержки cqw просто
   оставят его. */
.youtube-placeholder{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;text-align:center;background:#f9f9f9;border:1px solid #ddd;border-radius:8px;color:#333;z-index:5;overflow:auto;overscroll-behavior:contain}
.dark-theme .youtube-placeholder{background:#1e1e1e;border-color:#444;color:#eee}
.youtube-wrapper.blocked > .youtube-placeholder{display:flex}
.youtube-wrapper.loaded > .youtube-placeholder,
.youtube-wrapper.force-load > .youtube-placeholder{display:none!important}
.youtube-wrapper.blocked iframe{display:none}

.youtube-placeholder-icon{font-size:32px;font-size:min(9cqw,34px);margin:0 0 6px;line-height:1;flex-shrink:0;animation:pulse-warn 2s infinite}
.youtube-placeholder-title{font-weight:700;font-size:15px;font-size:min(4.2cqw,16px);line-height:1.25;margin:0 0 5px}
.youtube-placeholder-text{font-size:12.5px;font-size:min(3.4cqw,13px);color:#666;margin:0 0 12px;max-width:90%;line-height:1.35}
.dark-theme .youtube-placeholder-text{color:#aaa}
.youtube-placeholder br{display:none!important}
.youtube-placeholder-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:100%}

.youtube-placeholder-btn,.youtube-force-load-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;padding:8px 16px;padding:min(2.2cqw,8px) min(4.5cqw,16px);border-radius:20px;font-size:12.5px;font-size:min(3.4cqw,13px);font-weight:700;line-height:1.2;transition:background .2s,transform .1s;border:none;cursor:pointer;white-space:nowrap}
.youtube-placeholder-btn{background:#ff0000;color:#fff!important}
.youtube-placeholder-btn:hover{background:#cc0000;transform:scale(1.02)}
.youtube-force-load-btn{background:#e6e6e6;color:#333!important}
.youtube-force-load-btn:hover{background:#d5d5d5;transform:scale(1.02)}
.youtube-placeholder-btn:active,.youtube-force-load-btn:active{transform:scale(.98)}
.dark-theme .youtube-force-load-btn{background:#444;color:#ccc!important}
.dark-theme .youtube-force-load-btn:hover{background:#555}

/* Низкие встраивания (узкие экраны, комментарии): убираем лишнее, чтобы
   содержимое не вылезало за пределы плашки */
@container youtube-embed (max-height:170px){.youtube-placeholder-text{display:none}}
@container youtube-embed (max-height:120px){.youtube-placeholder-icon{display:none}.youtube-placeholder-title{margin-bottom:8px}}

@keyframes pulse-warn {
0%{transform:scale(1);opacity:.9}
50%{transform:scale(1.08);opacity:1}
100%{transform:scale(1);opacity:.9}
}

.filtered-content-wrapper.revealed .filtered-placeholder{display:none}
.filtered-content-wrapper.revealed .filtered-actual-content{display:block!important;animation:fadeIn .3s ease-in-out}
@keyframes fadeIn {
from{opacity:0}
to{opacity:.6}
}

.subscribe-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 50%; transition: all .2s; color: #777; margin-left: 5px; }
.subscribe-btn:hover { background: #0000000d; color: #555; }
.subscribe-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: all .2s; }
.subscribe-btn.active { color: #8c73b1; }
.subscribe-btn.active svg { fill: #8c73b1; stroke: #8c73b1; }
.dark-theme .subscribe-btn { color: #aaa; }
.dark-theme .subscribe-btn:hover { background: #ffffff0d; color: #ccc; }
.dark-theme .subscribe-btn.active { color: #ad92e1; }
.dark-theme .subscribe-btn.active svg { fill: #ad92e1; stroke: #ad92e1; }

@media (max-width: 768px) {
/* .posts-header-wrapper{justify-content:flex-start} */
.search-container{right:0}
.comment-header-left{flex-wrap:wrap}
}
@media (max-width: 480px) {
.comments-hint-box{flex-direction:column;align-items:flex-start;gap:10px}
.comments-hint-btn{align-self:flex-end;width:100%}
.post-actions-left{gap:2px}
.comments-toggle{white-space:nowrap;width:100%}
.subscribe-btn{margin-left:0}
}
/* Модалка ввода URL (вместо системного prompt) */
.url-modal-overlay{position:fixed;inset:0;z-index:10010;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.url-modal-overlay.show{opacity:1}
.url-modal{background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:20px;width:min(420px,92vw);transform:scale(.95);transition:transform .2s ease}
.url-modal-overlay.show .url-modal{transform:scale(1)}
.url-modal-title{font-weight:600;font-size:15px;color:#333;margin-bottom:12px}
.url-modal-input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;color:#333;background:#fafafa;outline:none;transition:border-color .2s}
.url-modal-input:focus{border-color:#b393d3}
.url-modal-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.url-modal-btns button{border:none;border-radius:16px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.url-modal-cancel{background:#eee;color:#555}
.url-modal-cancel:hover{background:#e0e0e0}
.url-modal-ok{background:#abadff;color:#fff}
.url-modal-ok:hover{background:#918bfb}
.dark-theme .url-modal{background:#232326;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.dark-theme .url-modal-title{color:#e0e0e0}
.dark-theme .url-modal-input{background:#2c2c30;border-color:#45454b;color:#d0d0d0}
.dark-theme .url-modal-input:focus{border-color:#8865ad}
.dark-theme .url-modal-cancel{background:#3a3a3f;color:#bbb}
.dark-theme .url-modal-cancel:hover{background:#454549}
.img-resize-presets{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.img-resize-presets button{flex:1;border:1px solid #ddd;background:#fafafa;color:#555;border-radius:8px;padding:6px 0;font-size:13px;cursor:pointer;transition:.2s}
.img-resize-presets button:hover{background:#b393d3;border-color:#b393d3;color:#fff}
.dark-theme .img-resize-presets button{background:#2c2c30;border-color:#45454b;color:#bbb}
.dark-theme .img-resize-presets button:hover{background:#8865ad;border-color:#8865ad;color:#fff}
/* Код-блок Quill в ленте: вне .ql-editor стили quill.snow.css не действуют */
.post-content .ql-code-block-container{background:#f4f2f8;border:1px solid #e4e0ec;border-radius:8px;padding:10px 14px;margin:8px 0;overflow-x:auto;font-family:Consolas,Monaco,'Courier New',monospace;font-size:13px;line-height:1.5;white-space:pre}
.post-content .ql-code-block{white-space:pre}
.dark-theme .post-content .ql-code-block-container{background:#26242c;border-color:#3a3742;color:#cfcadb}
#draft-saved-hint{margin-left:10px;color:#7bb47b;opacity:0;transition:opacity .3s;font-size:12px}
#draft-saved-hint.show{opacity:1}
.post-preview-modal{width:min(720px,94vw);max-height:86vh;display:flex;flex-direction:column}
.post-preview-body{overflow-y:auto;flex:1;min-height:80px;padding:4px 2px;text-align:left}
.post-preview-body img,.post-preview-body video{max-width:100%}

/* Bubble-панель форматирования над выделением */
.quill-bubble-bar{position:absolute;z-index:100;display:flex;gap:2px;background:#2b2b30;border-radius:8px;padding:4px 6px;box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .15s;transform:translateY(2px)}
.quill-bubble-bar.show{opacity:1;pointer-events:auto;transform:none}
.quill-bubble-bar button{background:none;border:none;color:#ddd;width:30px;height:28px;border-radius:5px;cursor:pointer;font-size:14px;line-height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.quill-bubble-bar button b,.quill-bubble-bar button i,.quill-bubble-bar button u,.quill-bubble-bar button s{line-height:1}
.quill-bubble-bar button:hover{background:rgba(255,255,255,.12)}
.quill-bubble-bar button.active{background:#8865ad;color:#fff}

/* Полноэкранная форма создания поста */
.post-form-fullscreen{position:fixed;inset:0;z-index:9000;background:#fff;overflow-y:auto;padding:16px;margin:0}
.dark-theme .post-form-fullscreen{background:#1c1c20}
.post-form-fullscreen #create-post-form-content{max-height:none!important}
.post-form-fullscreen #editor-container{min-height:50vh}
body.no-scroll-post-fs{overflow:hidden}
.post-scheduled-badge{color:#c9a04c;font-weight:600;font-size:12px}

/* Автокомплит @упоминаний */
.mention-box{position:absolute;z-index:130;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);min-width:180px;max-width:min(260px,80vw);overflow:hidden}
.mention-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:14px}
.mention-item.active,.mention-item:hover{background:#f0ebf7}
.mention-item img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.mention-ava-ph{width:24px;height:24px;border-radius:50%;background:#b393d3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.mention-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}
.dark-theme .mention-box{background:#232326;border-color:#45454b}
.dark-theme .mention-item.active,.dark-theme .mention-item:hover{background:#33303b}
.dark-theme .mention-name{color:#d0d0d0}

/* Кнопка и модалка отложенной публикации */
.schedule-post-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd;background:#fafafa;color:#777;border-radius:16px;padding:6px 14px;font-size:13px;cursor:pointer;transition:.2s}
.schedule-post-btn:hover{border-color:#b393d3;color:#8865ad}
.schedule-post-btn.scheduled{background:#f0ebf7;border-color:#b393d3;color:#6b4d8f;font-weight:600}
.dark-theme .schedule-post-btn{background:#2c2c30;border-color:#45454b;color:#aaa}
.dark-theme .schedule-post-btn:hover{border-color:#8865ad;color:#b9a7f5}
.dark-theme .schedule-post-btn.scheduled{background:#33303b;border-color:#8865ad;color:#c9b8f0}
.post-form-actions{display:flex;justify-content:space-around;align-items:center;gap:15px;flex-wrap:wrap;margin:0 0 20px}
.sched-presets{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sched-presets button{flex:1;min-width:100px;border:1px solid #ddd;background:#fafafa;color:#555;border-radius:8px;padding:7px 4px;font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap}
.sched-presets button:hover{background:#b393d3;border-color:#b393d3;color:#fff}
.dark-theme .sched-presets button{background:#2c2c30;border-color:#45454b;color:#bbb}
.dark-theme .sched-presets button:hover{background:#8865ad;border-color:#8865ad;color:#fff}
.sched-selects{display:flex;gap:8px}
.sched-selects select{flex:1;border:1px solid #ddd;border-radius:8px;padding:8px 10px;font-size:14px;color:#333;background:#fafafa;outline:none;cursor:pointer}
.sched-selects select:focus{border-color:#b393d3}
.dark-theme .sched-selects select{background:#2c2c30;border-color:#45454b;color:#d0d0d0}
.preview-post-btn{border:1px solid #ddd;background:#fafafa;color:#777;border-radius:24px;padding:.6em 1.6em;font-size:15px;cursor:pointer;transition:.2s}
.preview-post-btn:hover{border-color:#b393d3;color:#8865ad;background:#f6f2fa}
.dark-theme .preview-post-btn{background:#2c2c30;border-color:#45454b;color:#aaa}
.dark-theme .preview-post-btn:hover{border-color:#8865ad;color:#b9a7f5;background:#33303b}
.scheduled-posts-bar{text-align:center;margin:0 0 12px}

/* Таблицы Quill: в редакторе и в ленте */
.ql-editor table,.post-content table{border-collapse:collapse;width:100%;margin:10px 0;table-layout:fixed}
.ql-editor td,.post-content td,.post-content th{border:1px solid #d5cfe0;padding:6px 10px;word-break:break-word;vertical-align:top}
.post-content th{background:#f4f2f8;font-weight:600}
.dark-theme .ql-editor td,.dark-theme .post-content td,.dark-theme .post-content th{border-color:#45424f}
.dark-theme .post-content th{background:#2c2933}
.post-content table{display:block;overflow-x:auto}
.tbl-hint{font-size:12px;color:#888;text-align:center;margin-top:6px}
.tbl-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbl-actions button{border:1px solid #ddd;background:#fafafa;color:#555;border-radius:8px;padding:8px 6px;font-size:13px;cursor:pointer;transition:.2s}
.tbl-actions button:hover{background:#b393d3;border-color:#b393d3;color:#fff}
.tbl-actions .tbl-danger{color:#b05252}
.tbl-actions .tbl-danger:hover{background:#c0564f;border-color:#c0564f;color:#fff}
.dark-theme .tbl-actions button{background:#2c2c30;border-color:#45454b;color:#bbb}
.dark-theme .tbl-actions button:hover{background:#8865ad;border-color:#8865ad;color:#fff}
.dark-theme .tbl-actions .tbl-danger{color:#e08a84}
.dark-theme .tbl-actions .tbl-danger:hover{background:#c0564f;border-color:#c0564f;color:#fff}

/* Отложенный пост в режиме «Отложенные»: мягкая янтарная подсветка целиком */
.post.is-scheduled{background-color:#fdf7ea;border-left:3px solid #c9a04c}
.dark-theme .post.is-scheduled{background-color:#332e24;border-left-color:#a8823a}
.post.is-scheduled .post-scheduled-badge{background:rgba(201,160,76,.15);padding:2px 8px;border-radius:10px}

/* Кнопка «Отложенные» — крупнее кнопки «Отложить» в форме */
#show-scheduled-btn{font-size:15px;padding:9px 20px;gap:8px}
/* Редактор внутри отложенного поста не должен просвечивать подсветкой */
.post.is-scheduled .ql-toolbar,.post.is-scheduled .ql-container,.post.is-scheduled .ql-editor{background:#fff}
.post.is-scheduled .edit-tags-container{background:#fff}
/* Тёмная тема: правила выше специфичнее базовых .dark-theme-правил, поэтому дублируем их */
.dark-theme .post.is-scheduled .ql-toolbar{background:#1a1a1a}
.dark-theme .post.is-scheduled .ql-container,.dark-theme .post.is-scheduled .ql-editor{background:#2d2d2d}
.dark-theme .post.is-scheduled .edit-tags-container{background:#2d2d2d;border-color:#444;color:#ccc}



/* Сохранённая OG-карточка (блот редактора): div > a > span'ы.
   Такая вложенность валидна — вариант с div внутри <a> purifier расформировывал. */
.ve-og-card .ve-og-link{display:flex;max-width:460px;border:1px solid rgba(0,0,0,.12);border-radius:10px;overflow:hidden;text-decoration:none!important;color:#1f2024!important;background:rgba(0,0,0,.02)}
.ve-og-card .ve-og-link:hover{background:rgba(0,0,0,.05)}
.ve-og-card .ve-og-link *{color:inherit!important}
.ve-og-card img.ve-og-img{flex:0 0 96px;width:96px;height:auto;min-height:80px;max-height:120px;object-fit:cover;margin:0}
.ve-og-card .ve-og-body{display:flex;flex-direction:column;gap:3px;padding:9px 12px;min-width:0}
.ve-og-card .ve-og-site{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;opacity:.6}
.ve-og-card .ve-og-title{display:block;font-weight:600;font-size:14px;line-height:1.25}
.ve-og-card .ve-og-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.35;opacity:.75}
div.ve-og-card{margin:8px 0}
.dark-theme .ve-og-card .ve-og-link{border-color:rgba(255,255,255,.16);color:#dcdce0!important;background:rgba(255,255,255,.04)}
/* Выравнивание блока карточки */
div.ve-og-card.ql-align-center .ve-og-link{margin-left:auto;margin-right:auto}
div.ve-og-card.ql-align-right .ve-og-link{margin-left:auto}

/* Модалка истории правок */
.history-modal{width:min(860px,95vw)}
.history-layout{display:flex;gap:12px;max-height:60vh}
.history-list{flex:0 0 210px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.history-item{text-align:left;border:1px solid #ddd;background:#fafafa;border-radius:8px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:.2s}
.history-item:hover{border-color:#b393d3}
.history-item.active{background:#f0ebf7;border-color:#b393d3}
.history-when{font-size:13px;color:#444;font-weight:600}
.history-who{font-size:11px;color:#888}
.history-preview{flex:1;min-width:0;overflow-y:auto;border:1px solid #eee;border-radius:8px;padding:10px 14px;text-align:left;background:#fff}
.history-preview img,.history-preview video{max-width:100%}
.dark-theme .history-item{background:#2c2c30;border-color:#45454b}
.dark-theme .history-item.active{background:#33303b;border-color:#8865ad}
.dark-theme .history-when{color:#d0d0d0}
.dark-theme .history-preview{background:#232326;border-color:#3a3a3f;color:#c8c8c8}
@media (max-width:640px){.history-layout{flex-direction:column;max-height:70vh}.history-list{flex:0 0 auto;max-height:150px}}

/* Кнопки действий над постом — значки вместо подписей.
   Прежние правила (.edit-post-btn, .pin-post-btn, .delete-post-btn) переопределяем
   точечно: они задавали текстовые отступы, цвета и круглый фон. */
.post-actions-icons{gap:4px;align-items:center}
.post-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0!important;margin:0!important;border:none;border-radius:10px;background:transparent!important;color:#8a8a99!important;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .12s ease}
.post-icon-btn svg{display:block;pointer-events:none}
.post-icon-btn:hover{background:rgba(179,147,211,.16)!important;color:#7a52a8!important}
.post-icon-btn:active{transform:scale(.92)}
.post-icon-btn:focus-visible{outline:2px solid #b393d3;outline-offset:2px}
/* Закреплено — состояние подсвечено постоянно */
.post-icon-btn.pin-post-btn.active{color:#e08a2e!important;background:rgba(224,138,46,.14)!important}
.post-icon-btn.pin-post-btn.active:hover{color:#c8761f!important}
/* Удаление — красный только при наведении, чтобы не пугать раньше времени */
.post-icon-btn.delete-post-btn:hover{background:rgba(214,76,76,.14)!important;color:#d64c4c!important}
.dark-theme .post-icon-btn{color:#9a9aa8!important}
.dark-theme .post-icon-btn:hover{background:rgba(136,101,173,.28)!important;color:#c9b8f0!important}
.dark-theme .post-icon-btn.pin-post-btn.active{color:#e0a14e!important;background:rgba(224,161,78,.18)!important}
.dark-theme .post-icon-btn.delete-post-btn:hover{background:rgba(214,76,76,.22)!important;color:#ef8b8b!important}
@media (max-width:480px){.post-icon-btn{width:38px;height:38px}}
/* Старые правила .delete-post-btn заданы через .dark-theme и с !important —
   переопределяем с той же силой, иначе в тёмной теме остаётся красная плашка. */
.dark-theme .post-icon-btn.delete-post-btn{background:transparent!important;color:#9a9aa8!important}
.dark-theme .post-icon-btn.delete-post-btn:hover{background:rgba(214,76,76,.22)!important;color:#ef8b8b!important}

/* Кнопки комментариев — те же значки, чуть компактнее постовых.
   Прежние текстовые правила (.reply-btn, .edit-comment-btn, .delete-comment-btn)
   гасим: они задавали подчёркивание и отступы под подпись. */
.post-icon-btn.reply-btn,.post-icon-btn.edit-comment-btn,.post-icon-btn.delete-comment-btn,
.post-icon-btn.hard-delete-comment-btn,.post-icon-btn.restore-comment-btn{width:30px;height:30px;margin-left:0!important;text-decoration:none!important}
.post-icon-btn.reply-btn:hover,.post-icon-btn.edit-comment-btn:hover{text-decoration:none!important}
.post-icon-btn svg{width:16px;height:16px}
.post-actions-icons .post-icon-btn svg{width:18px;height:18px}
.post-icon-btn.delete-comment-btn:hover,.post-icon-btn.hard-delete-comment-btn:hover{background:rgba(214,76,76,.14)!important;color:#d64c4c!important}
.dark-theme .post-icon-btn.delete-comment-btn,.dark-theme .post-icon-btn.hard-delete-comment-btn{background:transparent!important;color:#9a9aa8!important}
.dark-theme .post-icon-btn.delete-comment-btn:hover,.dark-theme .post-icon-btn.hard-delete-comment-btn:hover{background:rgba(214,76,76,.22)!important;color:#ef8b8b!important}
.post-icon-btn.restore-comment-btn:hover{background:rgba(76,175,80,.16)!important;color:#3f9243!important}
.dark-theme .post-icon-btn.restore-comment-btn:hover{background:rgba(76,175,80,.24)!important;color:#7bc47f!important}
.comment-manage-buttons{gap:2px;align-items:center}
@media (max-width:480px){.post-icon-btn.reply-btn,.post-icon-btn.edit-comment-btn,.post-icon-btn.delete-comment-btn,
.post-icon-btn.hard-delete-comment-btn,.post-icon-btn.restore-comment-btn{width:34px;height:34px}}
/* Цитирование стоит в шапке комментария рядом с номером — размер как у прочих
   кнопок комментария, с небольшим отступом от номера. */
.post-icon-btn.quote-comment-btn{width:30px;height:30px;margin-left:4px!important;font-size:inherit!important}
@media (max-width:480px){.post-icon-btn.quote-comment-btn{width:34px;height:34px}}

/* ================= Компактный режим ленты постов =================
   Полный режим (.post/.posts-pagination) этими правилами не затрагивается. */
.view-switch{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:#f0eef7;border:1px solid #e0dcec;flex-shrink:0;box-sizing:border-box;max-width:100%}
.dark-theme .view-switch{background:#2b2b33;border-color:#3d3d48}
.view-switch-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;min-width:0;box-sizing:border-box;border:none;background:transparent;color:#6b6b7b;font-size:12.5px;font-weight:600;border-radius:9px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;line-height:1;white-space:nowrap}
.view-switch-btn svg{flex-shrink:0;width:16px;height:16px}
.view-switch-btn span{overflow:hidden;text-overflow:ellipsis}
.view-switch-btn:hover{color:#633ea4;background:rgba(99,62,164,.08)}
.view-switch-btn.active{background:#fff;color:#633ea4;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dark-theme .view-switch-btn{color:#9a9aa8}
.dark-theme .view-switch-btn:hover{color:#c9b8f0;background:rgba(136,101,173,.2)}
.dark-theme .view-switch-btn.active{background:#3a3a45;color:#c9b8f0;box-shadow:none}
.view-switch-btn[disabled]{opacity:.55;cursor:progress}

.compact-notice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#f4f1fb;border:1px solid #e2dcf3;color:#5b5b6b;font-size:13px}
.dark-theme .compact-notice{background:#2c2b36;border-color:#3f3d4d;color:#b8b8c6}
.compact-notice-link{color:#633ea4;font-weight:600;text-decoration:underline}
.dark-theme .compact-notice-link{color:#c9b8f0}

.compact-feed-wrapper{margin-top:10px}
.compact-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:768px){.compact-feed{grid-template-columns:1fr;gap:12px}}

.cpost{display:flex;flex-direction:column;background:#fff;border:1px solid #ececf2;border-radius:14px;padding:14px 16px 12px;box-shadow:0 1px 5px rgba(0,0,0,.08);position:relative;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;scroll-margin-top:70px;min-width:0}
.cpost:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);border-color:#d9d2ef}
.dark-theme .cpost{background:#2d2d2d;border-color:#3c3c46;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.dark-theme .cpost:hover{box-shadow:0 6px 18px rgba(0,0,0,.5);border-color:#4d4560}
.cpost.is-pinned{border-color:#e0c08a}
.dark-theme .cpost.is-pinned{border-color:#6b5326}
.cpost-pin{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-bottom:8px;padding:3px 9px;border-radius:20px;background:rgba(224,161,78,.14);color:#a9711d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.cpost-pin svg{width:12px;height:12px;fill:currentColor}
.dark-theme .cpost-pin{background:rgba(224,161,78,.18);color:#e0a14e}

.cpost-head{display:flex;align-items:center;gap:10px;min-width:0}
.cpost-author{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:inherit}
.cpost-author:hover .cpost-author-name{color:#633ea4}
.dark-theme .cpost-author:hover .cpost-author-name{color:#c9b8f0}
.cpost-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
/* Градиент убран: вид заглушки общий для всего сайта (палитра .ava-* в style.css) */
.cpost-avatar-initial{font-size:16px}
.cpost-author-info{display:flex;flex-direction:column;min-width:0;gap:2px}
.cpost-author-name{font-weight:600;font-size:14px;color:#2c2c34;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.dark-theme .cpost-author-name{color:#e6e6ee}
.cpost-time{font-size:12px;color:#8b8b98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpost-edited{color:#a0a0ad}
.cpost-copy{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:none;border-radius:9px;background:transparent;color:#9a9aa8;cursor:pointer;transition:background .2s,color .2s}
.cpost-copy svg{width:17px;height:17px;pointer-events:none}
.cpost-copy:hover{background:rgba(99,62,164,.1);color:#633ea4}
.dark-theme .cpost-copy:hover{background:rgba(136,101,173,.24);color:#c9b8f0}
.cpost-copy.copied{color:#3f9243;background:rgba(76,175,80,.14)}

.cpost-body{flex:1;margin-top:10px;min-width:0}
.cpost-text{margin:0;font-size:14px;line-height:1.55;color:#4a4a56;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;white-space:pre-line}
.dark-theme .cpost-text{color:#c2c2ce}
.cpost-empty{color:#a0a0ad;font-style:italic}
/* Плашки вложений — общие (.mchip в style.css), размер задан там же */
.cpost-more{display:inline-block;margin-top:8px;font-style:italic;font-size:13.5px;color:#633ea4;text-decoration:none;border-bottom:1px dashed currentColor}
.cpost-more:hover{opacity:.75}
.dark-theme .cpost-more{color:#c9b8f0}

.cpost-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #eeeef3}
.dark-theme .cpost-foot{border-color:#3c3c46}
.cpost-stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#8b8b98;text-decoration:none;padding:4px 8px;border-radius:8px;transition:background .2s,color .2s}
.cpost-stat svg{width:16px;height:16px}
.cpost-stat:hover{background:rgba(99,62,164,.08);color:#633ea4}
.dark-theme .cpost-stat{color:#9a9aa8}
.dark-theme .cpost-stat:hover{background:rgba(136,101,173,.2);color:#c9b8f0}
.cpost-stat-likes.liked{color:#d64c4c}
.cpost-stat-likes.liked svg{fill:currentColor}
.cpost-stat-likes:hover{background:rgba(214,76,76,.1);color:#d64c4c}
.dark-theme .cpost-stat-likes:hover{background:rgba(214,76,76,.2);color:#ef8b8b}

.compact-loader{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;color:#8b8b98;font-size:14px}
.compact-spinner{width:18px;height:18px;border:2px solid #d9d9e2;border-top-color:#633ea4;border-radius:50%;animation:spin 1s linear infinite}
.dark-theme .compact-spinner{border-color:#4a4a55;border-top-color:#c9b8f0}
.compact-sentinel{height:1px}
.compact-end,.compact-empty{text-align:center;padding:20px;color:#9a9aa8;font-size:13.5px}

/* Появление подгруженных карточек */
@keyframes cpostIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cpost.cpost-new{animation:cpostIn .32s ease-out both}
@media (prefers-reduced-motion:reduce){.cpost,.cpost.cpost-new{transition:none;animation:none}}
/* Строка над формой создания: переключатель вида слева, «Добавить пост» справа.
   Кнопке нужен точечный сброс — общее правило #toggle-create-post-form центрирует её auto-отступами. */
.post-create-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.post-create-head-solo{justify-content:center}
.post-create-head #toggle-create-post-form{margin:0;justify-content:center}
@media (max-width:768px){
.post-create-head{flex-direction:column;align-items:stretch;gap:10px}
.post-create-head .view-switch{order:-1;align-self:center}
.post-create-head #toggle-create-post-form{margin:0 auto}
}
/* На узких экранах переключатель занимает всю ширину блока создания поста,
   поэтому кнопки ужимаются: меньше отступы, значок и текст. */
@media (max-width:480px){
.post-create-head .view-switch{width:100%;align-self:auto;gap:2px;padding:2px}
.view-switch-btn{flex:1 1 0;padding:6px 6px;gap:4px;font-size:12px}
.view-switch-btn svg{width:15px;height:15px}
}
@media (max-width:360px){
.view-switch-btn{padding:6px 4px;gap:3px;font-size:11.5px}
.view-switch-btn svg{width:14px;height:14px}
}
/* keyframes spin инжектится скриптом только при переходе по якорю — дублируем для лоадера */
@keyframes spin{to{transform:rotate(360deg)}}

/* Статистика — один блок с общим сворачиванием (localStorage posts_stats_collapsed).
   Карточкой теперь является сама панель, а прежние колонки внутри неё разделены линиями. */
.stats-container.stats-panel{position:relative;display:block;grid-template-columns:none;background:#fff;border-radius:12px;padding:15px;box-shadow:0 1px 5px rgba(0,0,0,.15)}
.dark-theme .stats-container.stats-panel{background:#2d2d2d;border:1px solid #444}
/* Кнопка ВСЕГДА абсолютная: так она не участвует в потоке и при сворачивании
   ничего не смещается. Между состояниями меняется только её ширина — свойство
   анимируемое, в отличие от position/display, на которых раньше был рывок. */
.stats-panel-toggle{position:absolute;z-index:2;top:10px;right:10px;width:24px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;white-space:nowrap;background:none;border:none;text-align:left;font-family:inherit;font-size:16px;font-weight:700;color:#333;cursor:pointer;padding:4px;border-radius:8px;transition:width .35s ease,background .2s,color .2s}
.stats-panel-toggle:hover{color:#633ea4;background:rgba(99,62,164,.08)}
.dark-theme .stats-panel-toggle{color:#ccc}
.dark-theme .stats-panel-toggle:hover{color:#c9b8f0;background:rgba(136,101,173,.2)}
.stat-chevron{flex-shrink:0;width:16px;height:16px;transition:transform .3s ease}
/* Подпись позиционируется абсолютно ВНУТРИ кнопки: так она не занимает место
   в её flex-строке и не может вытолкнуть шеврон за край overflow:hidden
   (из-за этого значок пропадал в развёрнутом виде). */
.stats-panel-title{position:absolute;left:8px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .2s ease}
.stats-panel.collapsed .stats-panel-title{opacity:1;transition:opacity .25s ease .1s}
/* Ширина, а не left: у кнопок ширина от left+right ведёт себя непредсказуемо
   (сжимается по содержимому). Кнопка прижата вправо и разъезжается влево. */
.stats-panel.collapsed .stats-panel-toggle{width:calc(100% - 20px)}
.stats-panel.collapsed .stat-chevron{transform:rotate(-90deg)}
/* Свёрнутая панель пуста, а кнопка выведена из потока — высоту задаём сами
   и анимируем её вместе со схлопыванием содержимого. ВАЖНО: без box-sizing
   min-height считается по контенту, и к ней прибавляются 15px паддингов сверху
   и снизу — панель получалась заметно выше кнопки. */
.stats-container.stats-panel{box-sizing:border-box;min-height:0;transition:min-height .35s ease}
.stats-panel.collapsed{min-height:47px}
/* Место под кнопку у верхнего заголовка — постоянное в обоих состояниях,
   иначе текст дёргался бы в момент переключения. */
.stats-grid .stat-column:last-child .stat-title{padding-right:32px}
.stats-panel-body{overflow:hidden;transition:max-height .35s ease,opacity .25s ease}
.stats-panel.collapsed .stats-panel-body{max-height:0;opacity:0}
.stats-grid{display:grid;grid-template-columns:0.8fr 1.3fr 1fr;gap:20px}
/* Колонки внутри панели — без собственных карточек, только вертикальные разделители */
.stats-panel .stat-column{background:none;box-shadow:none;border:none;border-radius:0;padding:0}
.dark-theme .stats-panel .stat-column{background:none;border:none}
.stats-grid .stat-column + .stat-column{border-left:1px solid #ececf2;padding-left:20px}
.dark-theme .stats-grid .stat-column + .stat-column{border-left-color:#444}
h3.stat-title{margin-top:0}
@media (max-width:768px){
.stats-grid{grid-template-columns:1fr;gap:16px}
/* В одну колонку сверху оказывается первая — место под кнопку нужно ей */
.stats-grid .stat-column:first-child .stat-title{padding-right:32px}
.stats-grid .stat-column:last-child .stat-title{padding-right:0}
.stats-grid .stat-column + .stat-column{border-left:none;padding-left:0;border-top:1px solid #ececf2;padding-top:16px}
.dark-theme .stats-grid .stat-column + .stat-column{border-top-color:#444}
}
@media (prefers-reduced-motion:reduce){.stats-panel-body,.stat-chevron,.stats-panel-toggle,.stats-panel-title,.stats-container.stats-panel{transition:none}}

/* Открепление поста в компактной карточке */
.cpost-unpin{margin-left:4px;padding:0 4px;border:none;background:none;color:inherit;font-size:12px;line-height:1;cursor:pointer;opacity:.7;border-radius:6px}
.cpost-unpin:hover{opacity:1;background:rgba(0,0,0,.08)}
.dark-theme .cpost-unpin:hover{background:rgba(255,255,255,.12)}

/* Кнопка комментариев в полном режиме — значок + число (подпись в title/aria-label).
   Прежние текстовые правила .comments-toggle остаются, здесь их дополняем/перебиваем. */
button.comments-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:none;background:transparent;border-radius:9px;font-size:16px;font-weight:600;font-family:inherit;color:#777;cursor:pointer;transition:background .2s,color .2s}
button.comments-toggle svg{width:24px;height:24px;pointer-events:none}
button.comments-toggle:hover{background:rgba(99,62,164,.08);color:#633ea4}
button.comments-toggle:disabled{opacity:.6;cursor:progress}
button.comments-toggle:after{content:"▾";font-size:.9em;margin-left:2px;transition:transform .3s ease;line-height:1}
button.comments-toggle.hide{background:rgba(99,62,164,.1);color:#633ea4}
button.comments-toggle.hide:after{transform:rotate(180deg)}
.dark-theme button.comments-toggle{color:#9a9aa8}
.dark-theme button.comments-toggle:hover,.dark-theme button.comments-toggle.hide{background:rgba(136,101,173,.22);color:#c9b8f0}
.comments-toggle-count{min-width:10px}
@media (max-width:480px){button.comments-toggle{width:auto}}

/* Крутилки: один вид у компактной ленты, полной ленты и загрузки комментариев */
.loading-posts{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;color:#8b8b98;font-size:14px}
.comments-loading{border-color:#d9d9e2;border-top-color:#633ea4;animation:spin 1s linear infinite}
.dark-theme .comments-loading{border-color:#4a4a55;border-top-color:#c9b8f0}

/* Компактная лента: раскладка колонками, чтобы короткие карточки подтягивались
   и не оставляли пустот под длинными. Колонки строит JS (CompactFeed.layout),
   до этого работает обычная сетка — так нет скачка при загрузке страницы. */
.compact-feed.masonry{display:flex;gap:16px;align-items:flex-start}
.compact-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
@media (max-width:768px){.compact-feed.masonry{gap:12px}.compact-col{gap:12px}}

/* Номера поста/комментария заменены на кнопку копирования прямой ссылки.
   Классы прежние (.post-id/.comment-id) — на них завязаны обработчики копирования. */
button.post-id,button.comment-id{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:9px;color:#9a9aa8;cursor:pointer;transition:background .2s,color .2s}
button.post-id svg,button.comment-id svg{width:17px;height:17px;pointer-events:none}
button.post-id:hover,button.comment-id:hover{background:rgba(99,62,164,.1);color:#633ea4}
button.post-id.copied,button.comment-id.copied{color:#3f9243;background:rgba(76,175,80,.14)}
.dark-theme button.post-id,.dark-theme button.comment-id{color:#9a9aa8}
.dark-theme button.post-id:hover,.dark-theme button.comment-id:hover{background:rgba(136,101,173,.24);color:#c9b8f0}
button.comment-id{width:30px;height:30px}
button.comment-id svg{width:15px;height:15px}
@media (max-width:480px){button.comment-id{width:34px;height:34px}}

/* Шеврон у кнопки комментариев — крупнее, чтобы состояние читалось сразу */
button.comments-toggle:after{font-size:1.5em;margin-left:1px;opacity:.85}

/* Кнопка «Добавить пост» — свой вид вместо радужного свечения .button-85.
   Правим ТОЛЬКО по id: класс .button-85 используется на других страницах.

   ВАЖНО про плавность. Градиенты в браузерах НЕ интерполируются: переход
   background-image просто не создаётся (проверено — в getAnimations его нет),
   поэтому цвет менялся рывком. Решение слоями: собственный фон кнопки — тёмный
   вариант (наведение), поверх него ::after со светлым градиентом, у которого
   плавно гасится opacity. Прозрачность анимируется всегда и везде.
   Текст поэтому вынесен в .btn-label и поднят над слоями.
   Сила свечения — переменная --btn-glow (@property, иначе не интерполируется),
   её читают keyframes пульсации: анимацию при наведении НЕ выключаем, иначе
   box-shadow опять спрыгивал бы рывком. */
@property --btn-glow{syntax:'<number>';inherits:false;initial-value:0.22}
#toggle-create-post-form{--btn-glow:.22;--btn-glow-rgb:99,62,164;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#7d5cb5,#5a349b);color:#fff;font-size:16px;font-weight:600;letter-spacing:.01em;padding:.65em 1.9em;border:none;border-radius:24px;box-shadow:0 4px 14px rgba(99,62,164,.22);animation:postBtnPulse 3.4s ease-in-out infinite;transition:transform .35s cubic-bezier(.22,.61,.36,1),--btn-glow .4s ease,box-shadow .35s ease}
/* Светлый слой поверх тёмного фона: при наведении плавно исчезает */
#toggle-create-post-form:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(135deg,#a58ad8,#7f5cbe);background-size:100% 100%;filter:none;animation:none;opacity:1;transition:opacity .4s ease;z-index:0;pointer-events:none;display:block}
#toggle-create-post-form:hover:after{opacity:0}
/* Блик пробегает только при наведении. Обратный переход отключён (transition:none
   в базовом состоянии), иначе при уводе курсора блик проезжал обратно. */
#toggle-create-post-form:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:100% 100%;filter:none;animation:none;transform:translateX(-130%);transition:none;z-index:1;pointer-events:none}
#toggle-create-post-form:hover:before{transform:translateX(130%);transition:transform .8s ease}
#toggle-create-post-form .btn-label{position:relative;z-index:2}
#toggle-create-post-form:hover{transform:translateY(-2px);--btn-glow:.42}
#toggle-create-post-form:active{transform:translateY(0) scale(.985);transition-duration:.12s}
#toggle-create-post-form:focus-visible{outline:2px solid #c9b8f0;outline-offset:3px}
@keyframes postBtnPulse{
0%,100%{box-shadow:0 4px 14px rgba(var(--btn-glow-rgb),var(--btn-glow))}
50%{box-shadow:0 7px 24px rgba(var(--btn-glow-rgb),calc(var(--btn-glow) + .2))}
}
.dark-theme #toggle-create-post-form{--btn-glow-rgb:136,101,173;background:linear-gradient(135deg,#7f5caf,#4d2f85);box-shadow:0 4px 14px rgba(136,101,173,.26);opacity:1}
.dark-theme #toggle-create-post-form:after{background:linear-gradient(135deg,#9a7ccf,#6b4aa8)}
@media (prefers-reduced-motion:reduce){
#toggle-create-post-form{animation:none;transition:box-shadow .2s ease}
#toggle-create-post-form:hover{box-shadow:0 8px 26px rgba(var(--btn-glow-rgb),.45)}
#toggle-create-post-form:before{display:none}
}
/* Подсветка найденных слов в карточке компактной ленты */
.cpost-mark{background:rgba(255,214,102,.55);color:inherit;border-radius:3px;padding:0 2px}
.dark-theme .cpost-mark{background:rgba(224,161,78,.38);color:#f3e6cf}

/* ===== Страница /comments: подвал комментария ===== */
.comment-footer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid #ececf2}
.dark-theme .comment-footer-row{border-top-color:#3c3c46}
.comment-footer-actions{display:flex;align-items:center;gap:4px;min-height:30px}
.comment-footer-actions .delete-comment-form{display:flex;align-items:center;gap:4px;text-align:left;margin:0}
/* «Стереть навсегда» отличается и значком (корзина с крестом), и постоянным
   красным тоном: действие необратимо, случайно перепутать со скрытием нельзя.
   Правила старых текстовых кнопок заданы с !important — перебиваем так же. */
.comment-footer-actions .post-icon-btn.hard-delete-comment-btn{color:#d64c4c!important;background:rgba(214,76,76,.10)!important}
.comment-footer-actions .post-icon-btn.hard-delete-comment-btn:hover{background:rgba(214,76,76,.22)!important}
.dark-theme .comment-footer-actions .post-icon-btn.hard-delete-comment-btn{color:#ef8b8b!important;background:rgba(214,76,76,.18)!important}
.dark-theme .comment-footer-actions .post-icon-btn.hard-delete-comment-btn:hover{background:rgba(214,76,76,.3)!important}
.comment-likes{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font-size:13px;font-weight:600;color:#8b8b98;white-space:nowrap}
.comment-likes svg{width:16px;height:16px}
.comment-likes.liked{color:#d64c4c}
.comment-likes.liked svg{fill:currentColor}
.dark-theme .comment-likes{color:#9a9aa8}
.dark-theme .comment-likes.liked{color:#ef8b8b}

/* Три поля не показывали фокус вовсе: системную обводку снимает общее правило
   textarea,button,input{outline:none} в style.css, а своей подсветки у них
   не было. Делаем как у остальных полей проекта — меняем цвет рамки, а не
   рисуем кольцо: кольцо поверх поля с собственной рамкой даёт двойной контур.
   У полей ввода тегов рамки нет, поэтому им — мягкая подложка. */
.posts-search-input:focus{border-color:var(--brand)}
#post-tags-input:focus,.edit-tags-input:focus{background:var(--brand-soft);border-radius:6px}

/* Кнопка «Показать все комментарии». Появляется, когда сервер отрисовал только
   начало ветки (COMMENTS_INITIAL_RENDER в posts.php) — остальное догружается
   по клику. Цвета из токенов, поэтому тема отдельного правила не требует. */
.comments-show-all{display:block;width:100%;margin:6px 0 10px;padding:8px 14px;font:inherit;
    font-size:var(--fs-sm);cursor:pointer;color:var(--brand);background:var(--brand-soft);
    border:1px solid transparent;border-radius:var(--r-full);transition:background-color .2s}
.comments-show-all:hover{background:var(--brand-fill)}
.comments-show-all:disabled{opacity:.6;cursor:default}

/* «Назад» стал <button> вместо <div> (клавиатурная доступность) — снимаем
   кнопочные умолчания, чтобы вид остался прежним.
   box-sizing обязателен: у <button> он по умолчанию border-box, и заданные
   в .backpage-btn 100px начинали включать отступы .back-btn — ширины на
   «← Назад» не хватало, стрелка уезжала на отдельную строку. У <div> те же
   100px были шириной содержимого. nowrap — страховка на случай, если
   отступы или кегль ещё изменятся. */
button.backpage-btn{display:block;box-sizing:content-box;white-space:nowrap;
    font:inherit;font-size:20px;border:none;
    -webkit-appearance:none;appearance:none;cursor:pointer}
@media (max-width:768px){button.backpage-btn{font-size:18px}}

/* Закрытие просмотра стало <button> вместо <span> (клавиатурный доступ):
   снимаем рамку и фон, вид прежний. */
button.image-modal-close{background:none;border:none;padding:0;line-height:1;font-family:inherit}
button.image-modal-close:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px;opacity:1}

/* ===== Чужие цвета текста в сохранённом контенте ============================
   Показываем только те цвета, что есть в палитре редактора (список исключений
   ниже). Любой другой инлайновый цвет гасим и возвращаем текст к цвету темы.

   Причина: цвет попадает в пост не только из палитры. Он приезжает вместе с
   текстом, скопированным откуда угодно — из другого редактора, из документа,
   с сайта, — и рассчитан на чужой фон. Чаще всего это почти чёрный на белом:
   в тёмной теме такой текст пропадает совсем. Палитра же подобрана под обе темы,
   поэтому её цвета и только их оставляем как есть.

   Три отличия от прежнего правила, каждое — по разбору живого поста:
     — любой элемент, а не только span: вставленный текст несёт цвет на абзацах,
       заголовках, b/i — на чём угодно;
     — обе темы: чужой светлый цвет так же пропадает на белой карточке;
     — вместе с полем ввода, чтобы автор видел то, что получится после публикации,
       а не терял цвет уже в опубликованном посте.

   Спойлеры, OG-карточки и подсветку кода это не задевает: у них цвет задан
   классами, а не inline-стилем. */
.post-content [style*="color"], .ql-editor [style*="color"]{color:inherit!important}
/* Заливка фона в уже опубликованных постах. Новые проходят через очистку на
   сохранении (см. CSS.AllowedProperties в posts.php), но написанное раньше лежит
   в базе как есть. Правило было только для тёмной темы и только для span — а
   заливка приезжает из Word и Google Docs на чём угодно, чаще всего на абзацах,
   и белые плашки поверх текста портят вид в обеих темах. Гасим у любого элемента.
   Собственные фоны — спойлер, блок кода, карточки ссылок — заданы классами,
   а не inline-стилем, и под это правило не попадают. */
.post-content [style*="background-color"]{background-color:transparent!important}
/* И в самом редакторе — чтобы автор сразу видел то, что сохранится: вставленная
   из Word заливка иначе доживает в поле ввода до сохранения и пропадает уже
   в опубликованном посте. */
.ql-editor [style*="background-color"]{background-color:transparent!important}

/* Исключение: цвета из палитры редактора (POST_TEXT_COLORS в posts_scripts.js).
   Правило выше гасит инлайновый цвет без разбора, поэтому свои возвращаем
   поимённо — это и есть весь список того, что посту разрешено показывать.

   Вариантов записи четыре, потому что цвет успевает пройти через две нормализации:
   браузер при сериализации innerHTML переводит его в rgb(r, g, b) с пробелами,
   а HTMLPurifier на сохранении — в rgb(r,g,b) без них. Исходную шестнадцатеричную
   запись тоже держим: она приходит из черновиков и из истории правок.
   При смене палитры этот список нужно пересобрать вместе с POST_TEXT_COLORS. */
.post-content [style*="color:#cf5b5b"],
.ql-editor [style*="color:#cf5b5b"],
.post-content [style*="color: #cf5b5b"],
.ql-editor [style*="color: #cf5b5b"],
.post-content [style*="color:rgb(207,91,91)"],
.ql-editor [style*="color:rgb(207,91,91)"],
.post-content [style*="color: rgb(207, 91, 91)"],
.ql-editor [style*="color: rgb(207, 91, 91)"]{color:#cf5b5b!important}
.post-content [style*="color:#c36738"],
.ql-editor [style*="color:#c36738"],
.post-content [style*="color: #c36738"],
.ql-editor [style*="color: #c36738"],
.post-content [style*="color:rgb(195,103,56)"],
.ql-editor [style*="color:rgb(195,103,56)"],
.post-content [style*="color: rgb(195, 103, 56)"],
.ql-editor [style*="color: rgb(195, 103, 56)"]{color:#c36738!important}
.post-content [style*="color:#a07a2e"],
.ql-editor [style*="color:#a07a2e"],
.post-content [style*="color: #a07a2e"],
.ql-editor [style*="color: #a07a2e"],
.post-content [style*="color:rgb(160,122,46)"],
.ql-editor [style*="color:rgb(160,122,46)"],
.post-content [style*="color: rgb(160, 122, 46)"],
.ql-editor [style*="color: rgb(160, 122, 46)"]{color:#a07a2e!important}
.post-content [style*="color:#838326"],
.ql-editor [style*="color:#838326"],
.post-content [style*="color: #838326"],
.ql-editor [style*="color: #838326"],
.post-content [style*="color:rgb(131,131,38)"],
.ql-editor [style*="color:rgb(131,131,38)"],
.post-content [style*="color: rgb(131, 131, 38)"],
.ql-editor [style*="color: rgb(131, 131, 38)"]{color:#838326!important}
.post-content [style*="color:#6a8a28"],
.ql-editor [style*="color:#6a8a28"],
.post-content [style*="color: #6a8a28"],
.ql-editor [style*="color: #6a8a28"],
.post-content [style*="color:rgb(106,138,40)"],
.ql-editor [style*="color:rgb(106,138,40)"],
.post-content [style*="color: rgb(106, 138, 40)"],
.ql-editor [style*="color: rgb(106, 138, 40)"]{color:#6a8a28!important}
.post-content [style*="color:#3b922a"],
.ql-editor [style*="color:#3b922a"],
.post-content [style*="color: #3b922a"],
.ql-editor [style*="color: #3b922a"],
.post-content [style*="color:rgb(59,146,42)"],
.ql-editor [style*="color:rgb(59,146,42)"],
.post-content [style*="color: rgb(59, 146, 42)"],
.ql-editor [style*="color: rgb(59, 146, 42)"]{color:#3b922a!important}
.post-content [style*="color:#2a915d"],
.ql-editor [style*="color:#2a915d"],
.post-content [style*="color: #2a915d"],
.ql-editor [style*="color: #2a915d"],
.post-content [style*="color:rgb(42,145,93)"],
.ql-editor [style*="color:rgb(42,145,93)"],
.post-content [style*="color: rgb(42, 145, 93)"],
.ql-editor [style*="color: rgb(42, 145, 93)"]{color:#2a915d!important}
.post-content [style*="color:#298e8e"],
.ql-editor [style*="color:#298e8e"],
.post-content [style*="color: #298e8e"],
.ql-editor [style*="color: #298e8e"],
.post-content [style*="color:rgb(41,142,142)"],
.ql-editor [style*="color:rgb(41,142,142)"],
.post-content [style*="color: rgb(41, 142, 142)"],
.ql-editor [style*="color: rgb(41, 142, 142)"]{color:#298e8e!important}
.post-content [style*="color:#3488b1"],
.ql-editor [style*="color:#3488b1"],
.post-content [style*="color: #3488b1"],
.ql-editor [style*="color: #3488b1"],
.post-content [style*="color:rgb(52,136,177)"],
.ql-editor [style*="color:rgb(52,136,177)"],
.post-content [style*="color: rgb(52, 136, 177)"],
.ql-editor [style*="color: rgb(52, 136, 177)"]{color:#3488b1!important}
.post-content [style*="color:#577fce"],
.ql-editor [style*="color:#577fce"],
.post-content [style*="color: #577fce"],
.ql-editor [style*="color: #577fce"],
.post-content [style*="color:rgb(87,127,206)"],
.ql-editor [style*="color:rgb(87,127,206)"],
.post-content [style*="color: rgb(87, 127, 206)"],
.ql-editor [style*="color: rgb(87, 127, 206)"]{color:#577fce!important}
.post-content [style*="color:#8272d6"],
.ql-editor [style*="color:#8272d6"],
.post-content [style*="color: #8272d6"],
.ql-editor [style*="color: #8272d6"],
.post-content [style*="color:rgb(130,114,214)"],
.ql-editor [style*="color:rgb(130,114,214)"],
.post-content [style*="color: rgb(130, 114, 214)"],
.ql-editor [style*="color: rgb(130, 114, 214)"]{color:#8272d6!important}
.post-content [style*="color:#a464d2"],
.ql-editor [style*="color:#a464d2"],
.post-content [style*="color: #a464d2"],
.ql-editor [style*="color: #a464d2"],
.post-content [style*="color:rgb(164,100,210)"],
.ql-editor [style*="color:rgb(164,100,210)"],
.post-content [style*="color: rgb(164, 100, 210)"],
.ql-editor [style*="color: rgb(164, 100, 210)"]{color:#a464d2!important}
.post-content [style*="color:#ca49ca"],
.ql-editor [style*="color:#ca49ca"],
.post-content [style*="color: #ca49ca"],
.ql-editor [style*="color: #ca49ca"],
.post-content [style*="color:rgb(202,73,202)"],
.ql-editor [style*="color:rgb(202,73,202)"],
.post-content [style*="color: rgb(202, 73, 202)"],
.ql-editor [style*="color: rgb(202, 73, 202)"]{color:#ca49ca!important}
.post-content [style*="color:#cd549a"],
.ql-editor [style*="color:#cd549a"],
.post-content [style*="color: #cd549a"],
.ql-editor [style*="color: #cd549a"],
.post-content [style*="color:rgb(205,84,154)"],
.ql-editor [style*="color:rgb(205,84,154)"],
.post-content [style*="color: rgb(205, 84, 154)"],
.ql-editor [style*="color: rgb(205, 84, 154)"]{color:#cd549a!important}
.post-content [style*="color:#7f7f7f"],
.ql-editor [style*="color:#7f7f7f"],
.post-content [style*="color: #7f7f7f"],
.ql-editor [style*="color: #7f7f7f"],
.post-content [style*="color:rgb(127,127,127)"],
.ql-editor [style*="color:rgb(127,127,127)"],
.post-content [style*="color: rgb(127, 127, 127)"],
.ql-editor [style*="color: rgb(127, 127, 127)"]{color:#7f7f7f!important}

/* ===== Наведение порядка в карточке поста и комментария =====================
   Правила идут в конце файла намеренно: они переопределяют объявления выше,
   не трогая их — так видно, что именно и почему изменено.

   1. Разделители. Свою верхнюю линию имели блок тегов, полоса действий автора
      и футер, а у комментария добавлялась ещё линия под текстом. Под текстом
      поста получалась лесенка из четырёх тонких линий, дробившая карточку на
      полосы. Оставляем одну — перед футером; остальное разделяют отступы. */
.post-tags-display{border-top:none;padding:12px 0 0}
.post-actions{border-top:none;padding:6px 0 0}
.comment .post-content{border-bottom:none;padding-bottom:6px}
.dark-theme .comment .post-content{border-bottom:none}

/* 2. Действия автора (правка, закрепление, удаление) занимали собственную
      полосу во всю ширину ради трёх значков. Прижимаем вправо — они перестают
      конкурировать за внимание с основными действиями в футере. */
.post-actions{justify-content:flex-end;gap:4px}

/* 3. Удаление больше не выглядит как соседние действия: подкрашивается при
      наведении и с клавиатуры. Раньше корзина ничем не отличалась от карандаша. */
.post-actions .delete-post-btn:hover,
.post-actions .delete-post-btn:focus-visible{color:var(--alert)!important;background:var(--alert-tint)!important}

/* 4. Футер. Было width:100% + space-between + row-reverse: три кнопки
      разъезжались по всей ширине, и подписка зависала ровно посередине без
      связи с соседями. Теперь комментарии и подписка — группой слева,
      «нравится» прижато вправо. Порядок задаётся order, а не обратным
      направлением флекса: так он читается прямо из стилей. */
.post-actions-left{flex-direction:row;justify-content:flex-start;gap:8px}
.post-actions-left .comments-toggle{order:1}
.post-actions-left .subscribe-btn{order:2}
.post-actions-left .comments-disabled{order:1}
.post-actions-left .like-btn{order:3;margin-left:auto}

/* 5. Контраст. #8a8a99 на белом — 3.4:1, для значка это нижняя граница нормы,
      а выглядело бледно. #6b6b7a даёт 5.1:1. Дата: #777 при кегле .75em на
      мобильном читалась тяжело — переводим на токен --muted (5:1) */
.post-icon-btn{color:#6b6b7a!important}
.dark-theme .post-icon-btn{color:#adadbd!important}
.post-date{color:var(--muted)}

/* 6. Поле комментария. Панель форматирования была отдельной плашкой со своей
      рамкой и фоном над полем ввода — вместе с текстовым полем и нижним рядом
      кнопок форма читалась как три склеенных блока. Панель прижата к полю
      сверху: общая рамка, скругление только по внешним углам. */
.comment-toolbar{margin-bottom:0;border-radius:6px 6px 0 0;border-bottom:none}
.comment-textarea-wrapper textarea{border-radius:0 0 6px 6px;margin-top:0}
.format-btn{color:#4a4a55;min-width:28px;padding:2px 6px}
.dark-theme .format-btn{color:#d0d0d8}
.format-btn:hover{background:var(--surface-hover)}
.format-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ===== Разворачивание длинного поста ========================================
   Свёрнутое состояние не трогаем: затемнение поверх низа текста и кнопка,
   поднятая на него отрицательным отступом, — рабочий приём.

   Развёрнутое переписано. Было: margin-top:-140px (остаётся от свёрнутого
   вида) гасился padding-top:130px, а position:unset снимал z-index. Кнопка
   оказывалась поднята в область текста и накладывалась на последние строки.
   Возвращаем обёртку в обычный поток: никаких отрицательных отступов,
   никакой компенсации — кнопка просто идёт следом за текстом. */
.post-toggle-wrapper.expanded{margin-top:0;padding-top:6px;padding-bottom:12px;position:relative}

/* max-height:fit-content убран: интерполировать между пикселями и ключевым
   словом браузер не умеет, из-за чего transition не работал вовсе. Конечную
   высоту в пикселях задаёт JS (togglePostContent), а это правило —
   запасное на случай отключённого JS. */
.post-content.collapsed-content.expanded,
.post-polls-wrapper.collapsed-content.expanded{max-height:none}

/* Плавность и вид кнопки */
.post-content.collapsed-content{transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.post-toggle-btn,.poll-toggle-btn-expand{color:var(--muted);font-weight:600;border-radius:var(--r-full);padding:6px 14px}
.post-toggle-btn:hover,.poll-toggle-btn-expand:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.post-toggle-btn:focus-visible,.poll-toggle-btn-expand:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ===== Пагинация ============================================================
   Была разметка <a href><button>N</button></a> — кнопка внутри ссылки. Это
   невалидная вложенность интерактивных элементов: читалка объявляет «ссылка,
   кнопка», а реакция на Enter/пробел зависит от браузера. Внутренний <button>
   убран, оформление перенесено на саму ссылку — вид прежний.

   Правила для button оставлены: разметку генерируют и PHP, и JS, и если
   где-то остался старый вариант, он не «поплывёт». */
/* Оформление ссылок и кнопок задано выше, одним набором правил на оба вида. */

/* Точка присутствия в углу аватара автора (.ava-host + .ava-online-dot из
   style.css). Здесь только подгонка под этот раздел:

   — внешний отступ переезжает с аватара на обёртку. Он задан у самой картинки
     (margin-right:10px), и точка, привязанная к правому краю обёртки, вставала
     бы через эти десять пикселей от аватара — то есть посреди пустоты;
   — обводка цветом карточки, а не страницы: точка лежит на посте;
   — размер меньше базового: 12px на 30–40px аватаре читается как клякса. */
.post-header .ava-host, .comment-header .ava-host { margin-right: 10px }
.post-header .ava-host .post-avatar,
.post-header .ava-host .comment-avatar,
.post-header .ava-host .avatar-initial,
.comment-header .ava-host .post-avatar,
.comment-header .ava-host .comment-avatar,
.comment-header .ava-host .avatar-initial { margin-right: 0 !important }

.post-header .ava-online-dot, .comment-header .ava-online-dot,
.cpost-head .ava-online-dot {
    width: 10px;
    height: 10px;
    border-color: #fff;
}
.dark-theme .post-header .ava-online-dot,
.dark-theme .comment-header .ava-online-dot,
.dark-theme .cpost-head .ava-online-dot { border-color: #2d2d2d }

/* ===== Наведение на кнопки под постом ======================================
   Раньше и сердечко, и колокольчик при наведении только чуть темнели в сером
   (#555 / #ccc): по подсветке нельзя было понять, на что наведён курсор, и
   значок ничем не намекал на своё действие до нажатия. Даём каждому свой
   приглушённый оттенок — тот же, что у активного состояния, но бледнее, чтобы
   наведение не выглядело как уже поставленный лайк.

   Оба значка есть и под постом, и под комментарием (класс .like-btn общий),
   поэтому правила общие. Только (hover:hover): на тач-экранах :hover залипает
   после нажатия, и кнопка оставалась бы подсвеченной. */
@media (hover: hover) {
    .like-btn:hover { color: #d4547a; background: rgba(233, 30, 99, .07) }
    .like-btn.active:hover { color: #e91e63; background: rgba(233, 30, 99, .1) }
    .dark-theme .like-btn:hover { color: #f099b4; background: rgba(233, 30, 99, .16) }
    .dark-theme .like-btn.active:hover { color: #ff6b96; background: rgba(233, 30, 99, .2) }

    .subscribe-btn:hover { color: #7a63a8; background: var(--brand-soft) }
    .subscribe-btn.active:hover { color: #8c73b1; background: var(--brand-fill) }
    .dark-theme .subscribe-btn:hover { color: #c3aef0; background: var(--brand-soft) }
    .dark-theme .subscribe-btn.active:hover { color: #ad92e1; background: var(--brand-fill) }
}

/* У кнопки «открыть/закрыть комментарии» своей подложки нет. Сначала состояние
   «комментарии закрыты» подсвечивалось серым фоном, но в ряду одинаково плоских
   значков одна залитая кнопка читалась как нажатая или выделенная, хотя это
   просто настройка поста. Состояние несёт сам значок: крестик в облачке —
   комментарии открыты и кнопка их закроет, плюс — наоборот. */

/* ===== Палитра цвета текста в редакторе поста ==============================
   Список задан вручную (POST_TEXT_COLORS в posts_scripts.js): подбирались тона,
   читаемые в обеих темах. Здесь — только вид самого выпадающего списка.

   Пункт сброса («без цвета») Quill отрисовывает как пустой квадратик: у него
   нет data-value, значит и фона тоже. На тёмной подложке он полностью
   пропадал — рисуем ему рамку и косую черту. */
.ql-color .ql-picker-item { border: 1px solid rgba(0, 0, 0, .12) }
.dark-theme .ql-color .ql-picker-item { border-color: rgba(255, 255, 255, .18) }
.ql-color .ql-picker-options .ql-picker-item:not([data-value]) {
    background-image: linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
    color: #d64c4c;
}

/* ===== Тулбар Quill: цвет значков, наведение, состояние =====================
   quill.snow.css подключён в <head> ПОСЛЕ posts.css — порядок задан ради
   самого редактора и менять его нельзя. Из-за этого прежние правила вида
   .dark-theme .ql-stroke{stroke:#fff} не работали вовсе: они в один вес с
   квилловским .ql-snow .ql-stroke{stroke:#444}, а при равном весе побеждает
   тот, кто ниже по каскаду. Значки в тёмной теме так и оставались тёмно-серыми
   на почти чёрном тулбаре, а наведение красило их в синий #06c из коробки.

   Поэтому здесь селекторы заведомо тяжелее: лишний body в начале и обе
   половины пары .ql-toolbar.ql-snow. Укорачивать их нельзя — правило молча
   перестанет действовать. */
body .ql-toolbar.ql-snow .ql-stroke,
body .ql-toolbar.ql-snow .ql-stroke-miter { stroke: #444 }
body .ql-toolbar.ql-snow .ql-fill,
body .ql-toolbar.ql-snow .ql-stroke.ql-fill { fill: #444 }
body .ql-toolbar.ql-snow .ql-picker { color: #444 }

/* Приглушённый серый, а не белый. Тулбар почти чёрный, и светлые штрихи на нём
   выглядят подсвеченными — особенно у значка выбора цвета, где под буквой «А»
   идёт сплошная полоса во всю ширину. #a8a8b2 держит около 7:1 к фону #1a1a1a:
   значки спокойные, но читаемые, а яркость остаётся приметой наведения. */
body.dark-theme .ql-toolbar.ql-snow .ql-stroke,
body.dark-theme .ql-toolbar.ql-snow .ql-stroke-miter { stroke: #a8a8b2 }
body.dark-theme .ql-toolbar.ql-snow .ql-fill,
body.dark-theme .ql-toolbar.ql-snow .ql-stroke.ql-fill { fill: #a8a8b2 }
body.dark-theme .ql-toolbar.ql-snow .ql-picker { color: #a8a8b2 }

/* Часть значков нарисована своими svg без служебных классов ql-fill/ql-stroke
   (скрепка «загрузить» и кружок спойлера): правила выше их не касаются, и такая
   фигура берёт цвет по умолчанию — чёрный. В тёмной теме она пропадала.

   Правило намеренно общее — по любой фигуре без класса, а не по именам кнопок:
   следующий добавленный значок иначе снова окажется чёрным, и искать это будут
   долго. Цвет берётся у кнопки, поэтому фигуре достаётся и наведение тоже.

   Исключение — кнопка «на весь экран»: её значок нарисован обводкой при
   fill="none", и общая заливка превратила бы рамку в сплошной квадрат. */
body .ql-toolbar.ql-snow button { color: #444 }
body.dark-theme .ql-toolbar.ql-snow button { color: #a8a8b2 }
body .ql-toolbar.ql-snow button svg *:not([class]) { fill: currentColor }
body .ql-toolbar.ql-snow button.ql-fullscreen-btn svg *:not([class]) { fill: none; stroke: currentColor }

/* Спойлер и скрепка — поимённо и с !important. Через currentColor их не хватало:
   цвет считался от кнопки, а у неё в разных состояниях (наведение, открытый
   список, фокус) свои правила, в том числе квилловские, — значок то и дело
   оставался тёмным на тёмном. Здесь просто: белый в тёмной теме, чёрный в светлой. */
body .ql-toolbar.ql-snow button.ql-spoiler svg path,
body .ql-toolbar.ql-snow button.ql-upload svg path { fill: #000 !important; stroke: none !important }
body.dark-theme .ql-toolbar.ql-snow button.ql-spoiler svg path,
body.dark-theme .ql-toolbar.ql-snow button.ql-upload svg path { fill: #fff !important }

/* Значок скрепки нарисован в поле 612×612 и объявлен как width="32": Quill задаёт
   svg только высоту (height:100%), ширину браузер берёт из атрибута — 32px против
   28px самой кнопки. Значок вылезал вправо, и подложка при наведении вставала не
   по нему: слева зазор, справа обрез. Растягиваем svg по кнопке. */
body .ql-toolbar.ql-snow button.ql-upload svg { width: 100%; height: 100% }

/* Наведение и включённый формат. Синий #06c из коробки Quill не связан ни с
   одним цветом сайта и в тёмной теме уходит в темноту. Берём цвет темы и
   добавляем подложку: по одному лишь перекрашиванию тонких штрихов трудно
   понять, на какой кнопке курсор. */
body .ql-toolbar.ql-snow button:hover,
body .ql-toolbar.ql-snow button:focus,
body .ql-toolbar.ql-snow button.ql-active,
body .ql-toolbar.ql-snow .ql-picker-label:hover,
body .ql-toolbar.ql-snow .ql-picker-label.ql-active,
body .ql-toolbar.ql-snow .ql-picker-item:hover,
body .ql-toolbar.ql-snow .ql-picker-item.ql-selected { color: #6450c0 }
body .ql-toolbar.ql-snow button:hover .ql-stroke,
body .ql-toolbar.ql-snow button:focus .ql-stroke,
body .ql-toolbar.ql-snow button.ql-active .ql-stroke,
body .ql-toolbar.ql-snow button:hover .ql-stroke-miter,
body .ql-toolbar.ql-snow button.ql-active .ql-stroke-miter,
body .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
body .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: #6450c0 }
body .ql-toolbar.ql-snow button:hover .ql-fill,
body .ql-toolbar.ql-snow button:focus .ql-fill,
body .ql-toolbar.ql-snow button.ql-active .ql-fill,
body .ql-toolbar.ql-snow button:hover .ql-stroke.ql-fill,
body .ql-toolbar.ql-snow button.ql-active .ql-stroke.ql-fill,
body .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
body .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill { fill: #6450c0 }

body.dark-theme .ql-toolbar.ql-snow button:hover,
body.dark-theme .ql-toolbar.ql-snow button:focus,
body.dark-theme .ql-toolbar.ql-snow button.ql-active,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label:hover,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label.ql-active,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-item:hover,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-item.ql-selected { color: #cec7fa }
body.dark-theme .ql-toolbar.ql-snow button:hover .ql-stroke,
body.dark-theme .ql-toolbar.ql-snow button:focus .ql-stroke,
body.dark-theme .ql-toolbar.ql-snow button.ql-active .ql-stroke,
body.dark-theme .ql-toolbar.ql-snow button:hover .ql-stroke-miter,
body.dark-theme .ql-toolbar.ql-snow button.ql-active .ql-stroke-miter,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: #cec7fa }
body.dark-theme .ql-toolbar.ql-snow button:hover .ql-fill,
body.dark-theme .ql-toolbar.ql-snow button:focus .ql-fill,
body.dark-theme .ql-toolbar.ql-snow button.ql-active .ql-fill,
body.dark-theme .ql-toolbar.ql-snow button:hover .ql-stroke.ql-fill,
body.dark-theme .ql-toolbar.ql-snow button.ql-active .ql-stroke.ql-fill,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill { fill: #cec7fa }

/* Подложка. Кнопки Quill плавающие и без своего фона — скругление задаём здесь
   же, иначе подсветка выйдет прямоугольной заплаткой. У выпадающих списков
   (заголовок, выравнивание) подсвечиваем ярлык, а не весь блок. */
body .ql-toolbar.ql-snow button,
body .ql-toolbar.ql-snow .ql-picker-label { border-radius: 6px; transition: background-color .15s ease, color .15s ease }
body .ql-toolbar.ql-snow button:hover,
body .ql-toolbar.ql-snow button.ql-active,
body .ql-toolbar.ql-snow .ql-picker-label:hover,
body .ql-toolbar.ql-snow .ql-picker-label.ql-active { background-color: rgba(100, 80, 192, .10) }
body.dark-theme .ql-toolbar.ql-snow button:hover,
body.dark-theme .ql-toolbar.ql-snow button.ql-active,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label:hover,
body.dark-theme .ql-toolbar.ql-snow .ql-picker-label.ql-active { background-color: rgba(206, 199, 250, .16) }

/* Свотчи палитры фон не берут — у них он и есть выбираемый цвет. Здесь только
   рамка: у Quill она чёрная и в тёмной теме сливается с фоном списка. */
body .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover,
body .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected { border-color: #000 }
body.dark-theme .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover,
body.dark-theme .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected { border-color: #fff }

/* ===== Отступ перед футером карточки =======================================
   Линию футера от содержимого отделял отступ соседнего блока: у панели
   действий автора это padding-top:6px, у блока тегов — только верхний отступ.
   Если действий нет (чужой пост, вышли сроки правки), линия оказывалась
   вплотную под тегами. Отступ теперь у самого футера — он есть всегда;
   там, где над футером стоит панель действий, её собственный отступ лишний. */
.post-footer { margin-top: 12px }
.post-actions + .post-footer { margin-top: 4px }

/* Полоса «Отложенные» вмещает две кнопки: свои отложенные и — у админа с
   модераторами — отложенные всех авторов. При text-align:center они на узком
   экране слипались боками; flex с переносом держит зазор и в одну строку,
   и когда вторая кнопка уходит вниз. */
.scheduled-posts-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }

/* ===== Мобильная шапка публикации =========================================
   На узком экране логин, время и кнопки не помещались в одну строку: время
   вставало рядом с логином, а действия срывались на отдельный ряд — шапка
   расползалась на три этажа с рваными отступами.

   Строение теперь постоянное: слева аватар, рядом логин, под логином время,
   справа — действия. Если и действия не влезают, вниз уходит кнопка слайдера
   (правило порядка — в image-slider.css, там же и объяснение почему она).

   justify-content:flex-end нужен ради перенесённой строки: пока свободное
   место забирает margin-left:auto у ссылки, на выравнивание он не влияет, а
   вот одиночную кнопку на новой строке прижимает к правому краю, а не к
   левому, как это делает перенос по умолчанию. ========================== */
@media (max-width:600px){
    .post-header{align-items:center;justify-content:flex-end;row-gap:2px;column-gap:0;margin-bottom:8px}
    .post-header .ava-host{order:1}
    /* Длинный логин переносится, а не вылезает за карточку: у флекс-элемента
       min-width по умолчанию равен содержимому, и строка выпирала наружу. */
    .post-header > .user-link{order:2;min-width:0}
    .post-header .post-author,.comment-header-left .post-author{overflow-wrap:anywhere;margin-right:8px}
    .post-header .post-id{order:3;margin-left:auto}
    /* Время — отдельной строкой с отступом под логин: аватар 40px + 10px зазор */
    .post-header .post-date{order:5;flex-basis:100%;margin:0 0 0 50px;line-height:1.25}

    .comment-header{align-items:center;justify-content:flex-end;flex-wrap:wrap;row-gap:2px}
    .comment-header-left{flex-wrap:wrap;align-items:center;row-gap:2px;margin-bottom:2px;min-width:0;flex:1 1 0}
    /* У комментария аватар меньше: 30px + 10px зазор */
    .comment-header-left .post-date{flex-basis:100%;margin:0 0 0 40px;line-height:1.25}
    /* Заглушка вместо аватара шире картинки (40px против 30px) — отступ под неё */
    .comment-header-left:has(.avatar-initial) .post-date{margin-left:50px}
    .comment-header .comment-id{order:3;margin-left:auto}
}