html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden;overscroll-behavior-x:none}html{overflow-y:scroll;scrollbar-gutter:stable}.comment-modal-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:20px;background:rgba(10,28,54,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:commentFade .2s ease both}.comment-modal{width:min(900px,100%);max-height:85vh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-sizing:border-box;border-radius:16px;background:#fff;box-shadow:0 20px 60px #0a1c3659;animation:commentPop .22s cubic-bezier(.22,.8,.36,1) both}.comment-modal__media{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#0d1b33}.comment-modal__media img{width:100%;height:100%;max-height:85vh;object-fit:contain;display:block}.comment-modal__panel{min-width:0;min-height:0;display:flex;flex-direction:column}.comment-modal__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #edf0f4}.comment-modal__head strong{color:#092b68;font-size:.98rem}.comment-modal__close{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:#f2f6fb;color:#536274;cursor:pointer;transition:background .18s ease,color .18s ease}.comment-modal__close:hover{background:#fee2e2;color:#b91c1c}.comment-modal__close:focus-visible{outline:2px solid #092b68;outline-offset:2px}.comment-modal__list{flex:1 1 auto;padding:14px 18px;overflow-y:auto;display:grid;gap:12px;align-content:start}.comment-modal__empty{flex:1 1 auto;padding:30px 18px;display:grid;place-items:center;text-align:center;color:#8b9aad;font-size:.85rem}.comment-modal__list .comment-item{display:flex;align-items:flex-start;gap:10px}.comment-modal__list .comment-avatar{width:32px;height:32px;flex:0 0 auto;border:1px solid #e0e7ef;border-radius:50%;object-fit:cover}.comment-modal__list .comment-body{min-width:0;padding:7px 11px;border-radius:12px;background:#f4f7fb;border:1px solid #edf0f4}.comment-modal__list .comment-author{display:block;color:#092b68;font-size:.78rem;font-weight:750;cursor:pointer}.comment-modal__list .comment-author:hover{text-decoration:underline}.comment-modal__list .comment-text{margin:3px 0 0;color:#34465d;font-size:.84rem;line-height:1.5;white-space:pre-line;word-wrap:break-word}.comment-modal__input{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid #edf0f4;background:#fff}.comment-modal__input .comment-input{min-width:0;flex:1 1 auto;padding:9px 13px;border:1px solid #dbe2ea;border-radius:999px;background:#fff;color:#213753;font:inherit;font-size:.84rem;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.comment-modal__input .comment-input::placeholder{color:#9aa7b8}.comment-modal__input .comment-input:focus{border-color:#257a8b;box-shadow:0 0 0 3px #257a8b1f}.comment-modal__input .comment-submit{flex:0 0 auto;padding:9px 18px;border:0;border-radius:999px;background:#092b68;color:#fff;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:background-color .18s ease}.comment-modal__input .comment-submit:hover{background:#1c54b8}.comment-modal__input .comment-submit:focus-visible{outline:2px solid #092b68;outline-offset:2px}@keyframes commentFade{0%{opacity:0}to{opacity:1}}@keyframes commentPop{0%{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media screen and (max-width: 767px){.comment-modal-overlay{padding:10px;align-items:flex-end}.comment-modal{width:100%;max-height:90vh;grid-template-columns:1fr;border-radius:16px 16px 0 0}.comment-modal__media{display:none}}
