.pn-comments,
.pn-comments * { box-sizing: border-box; }
.pn-comments { --comment-blue:#2b6cb0; --comment-blue-dark:#1d4f85; --comment-text:#1b2536; --comment-muted:#7d8796; --comment-soft:#f3f5f8; --comment-border:#e1e6ed; color:var(--comment-text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.52; }
.pn-comments button,.pn-comments input,.pn-comments textarea,.pn-comments select { font:inherit; }
.pn-comments svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pn-comments__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; }
.pn-comments__head h2 { display:flex; align-items:center; gap:9px; margin:0; color:var(--comment-text); font-size:20px; font-weight:720; letter-spacing:-.025em; }
.pn-comments__head h2 span { display:inline-flex; min-width:26px; height:24px; padding:0 8px; align-items:center; justify-content:center; border:1px solid var(--comment-border); border-radius:999px; color:#667085; font-size:12px; font-weight:650; }
.pn-comments-sort { position:relative; display:inline-flex; align-items:center; color:#5c6675; }
.pn-comments-sort select { height:36px; padding:0 33px 0 13px; border:1px solid var(--comment-border); border-radius:9px; outline:none; color:inherit; background:#f3f5f8; appearance:none; cursor:pointer; transition:border-color .18s,box-shadow .18s; }
.pn-comments-sort select:hover,.pn-comments-sort select:focus { border-color:#aeb8c6; box-shadow:0 0 0 3px rgba(43,108,176,.08); }
.pn-comments-sort svg { position:absolute; right:10px; width:14px; pointer-events:none; }
.pn-comment-composer { margin:0 0 24px; }
.pn-comment-composer:not(:empty) { display:flex; gap:12px; }
.pn-comment-composer__avatar { flex:0 0 38px; width:38px; height:38px; margin-top:2px; }
.pn-comment-composer__form { min-width:0; flex:1; }
.pn-comment-composer__field { position:relative; overflow:visible; border:1px solid #d7dde6; border-radius:14px; background:#f3f5f8; transition:border-color .18s,box-shadow .18s; }
.pn-comment-composer__field:focus-within { border-color:#8eb4dc; box-shadow:0 0 0 3px rgba(43,108,176,.08); }
.pn-comment-composer textarea { display:block; width:100%; min-height:82px; resize:vertical; padding:13px 14px 34px; border:0; outline:0; color:var(--comment-text); background:transparent; }
.pn-comment-composer textarea::placeholder { color:#98a2b3; }
.pn-comment-composer__tools { position:absolute; right:8px; bottom:6px; left:8px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.pn-comment-composer__tools>* { pointer-events:auto; }
.pn-comment-composer__counter { color:#98a2b3; font-size:11px; }
.pn-comment-composer__counter b { font-weight:500; }
.pn-comment-composer__footer { min-height:38px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:9px; }
.pn-comment-composer__footer p { flex:1; margin:0; color:#b34242; font-size:12px; }
.pn-comment-primary,.pn-comment-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 17px; border:0; border-radius:9px; text-decoration:none!important; font-weight:650; transition:transform .16s,background .16s,box-shadow .16s; }
.pn-comment-primary { color:#fff; background:var(--comment-blue); box-shadow:0 4px 10px rgba(43,108,176,.17); }
.pn-comment-primary:hover,.pn-comment-primary:focus { color:#fff; background:var(--comment-blue-dark); transform:translateY(-1px); }
.pn-comment-primary[disabled] { opacity:.6; transform:none; cursor:wait; }
.pn-comment-secondary { border:1px solid var(--comment-border); color:#4f5d70; background:#f3f5f8; }
.pn-comment-secondary:hover { color:var(--comment-blue); border-color:#b9cce0; }
.pn-comment-auth-strip { width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--comment-border); border-radius:13px; text-align:left; color:var(--comment-text); background:#f3f5f8; transition:border-color .18s,transform .18s; }
.pn-comment-auth-strip:hover { border-color:#b8c7d8; transform:translateY(-1px); }
.pn-comment-auth-strip__icon { width:35px; height:35px; display:grid; place-items:center; flex:0 0 35px; border-radius:50%; color:var(--comment-blue); background:#e8eef6; }
.pn-comment-auth-strip__icon svg { width:20px; }
.pn-comment-auth-strip span:nth-child(2) { min-width:0; display:flex; flex-direction:column; }
.pn-comment-auth-strip strong { font-size:13px; font-weight:680; }
.pn-comment-auth-strip small { color:var(--comment-muted); font-size:11px; }
.pn-comment-auth-strip__arrow { margin-left:auto; color:#98a2b3; }
.pn-comment-avatar { position:relative; display:block; width:40px; height:40px; flex:0 0 40px; text-decoration:none!important; }
.pn-comment-avatar__image,.pn-comment-avatar__fallback { width:100%; height:100%; display:grid; place-items:center; border-radius:50%; }
.pn-comment-avatar__image { object-fit:cover; border:1px solid rgba(27,37,54,.08); }
.pn-comment-avatar__fallback { color:#fff; background:var(--avatar-color,#5b6ac4); font-size:12px; font-weight:740; letter-spacing:.025em; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.pn-comment-avatar>i { position:absolute; right:0; bottom:0; width:10px; height:10px; border:2px solid #f6f7f9; border-radius:50%; background:#30ae68; }
.pn-comments__list>.pn-comment { border-top:1px solid var(--comment-border); }
.pn-comments__list>.pn-comment:first-child { border-top:0; }
.pn-comment { position:relative; padding:18px 0; scroll-margin-top:90px; }
.pn-comment__row { display:flex; align-items:flex-start; gap:12px; }
.pn-comment__content { min-width:0; flex:1; }
.pn-comment__header { min-height:23px; display:flex; align-items:flex-start; gap:8px; }
.pn-comment__identity { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; flex:1; }
.pn-comment__author { overflow:hidden; max-width:100%; color:#14161a; font-size:13px; font-weight:720; text-overflow:ellipsis; text-decoration:none!important; white-space:nowrap; }
.pn-comment__author:hover { color:var(--comment-blue); }
.pn-comment__rank { padding:2px 7px; border:1px solid #cad6e3; border-radius:999px; color:#50677f; background:#edf1f5; font-size:9px; font-weight:700; letter-spacing:.02em; }
.pn-comment__identity time { color:#98a2b3; font-size:11px; }
.pn-comment__countdown { flex:0 0 auto; padding-top:2px; color:#98a2b3; font-size:10px; font-variant-numeric:tabular-nums; }
.pn-comment__text { padding:5px 28px 0 0; color:#2d3748; font-size:13px; line-height:1.58; overflow-wrap:anywhere; white-space:normal; }
.pn-comment__hidden-text { display:inline-flex; align-items:center; gap:7px; color:#8993a2; font-style:italic; }
.pn-comment__hidden-text svg { width:15px; }
.pn-comment.is-hidden>.pn-comment__row>.pn-comment__content>.pn-comment__actions { opacity:.62; }
.pn-comment__actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.pn-comment-vote,.pn-comment-reaction,.pn-comment-action,.pn-comment-icon-button { border:0; color:#7d8796; background:transparent; }
.pn-comment-vote { height:28px; display:inline-flex; align-items:center; gap:4px; padding:0 7px; border:1px solid transparent; border-radius:999px; font-size:11px; transition:color .16s,background .16s,border-color .16s; }
.pn-comment-vote svg { width:14px; height:14px; }
.pn-comment-vote:hover,.pn-comment-vote.is-active { color:var(--comment-blue); border-color:#cfdae7; background:#edf2f7; }
.pn-comment-reactions { display:flex; flex-wrap:wrap; gap:5px; }
.pn-comment-reaction { height:28px; display:inline-flex; align-items:center; gap:4px; padding:0 8px; border:1px solid var(--comment-border); border-radius:999px; background:#f1f3f6; font-size:13px; }
.pn-comment-reaction b { color:#687385; font-size:10px; font-weight:650; }
.pn-comment-reaction:hover,.pn-comment-reaction.is-active { border-color:#a9c4df; background:#e8eef5; }
.pn-comment-action { height:28px; display:inline-flex; align-items:center; gap:5px; padding:0 7px; border-radius:7px; font-size:11px; font-weight:620; transition:color .16s,background .16s; }
.pn-comment-action svg { width:14px; height:14px; }
.pn-comment-action:hover { color:var(--comment-blue); background:#edf1f5; }
.pn-comment-action--reply { margin-left:2px; }
.pn-comment-icon-button { width:28px; height:28px; display:grid; place-items:center; padding:0; border-radius:8px; transition:color .16s,background .16s; }
.pn-comment-icon-button:hover { color:#4f5d70; background:#e9edf2; }
.pn-comment-menu { position:relative; flex:0 0 auto; }
.pn-comment-menu__dropdown { position:absolute; z-index:40; top:31px; right:0; width:190px; padding:6px; border:1px solid #d9dfe7; border-radius:11px; background:#eef1f5; box-shadow:0 12px 28px rgba(31,42,55,.16); animation:pnCommentMenu .14s ease-out; }
@keyframes pnCommentMenu { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } }
.pn-comment-menu__dropdown button { width:100%; display:flex; align-items:center; gap:9px; padding:8px 9px; border:0; border-radius:7px; text-align:left; color:#445064; background:transparent; font-size:12px; }
.pn-comment-menu__dropdown button:hover { color:#172033; background:#e1e6ec; }
.pn-comment-menu__dropdown button.is-danger { color:#ae3e3e; }
.pn-comment-menu__dropdown svg { width:15px; height:15px; }
.pn-comment-menu__status { display:block; padding:8px 9px; color:#718096; font-size:11px; }
.pn-comment-emoji { position:relative; }
.pn-comment-emoji__picker { position:absolute; z-index:45; bottom:34px; left:0; width:226px; display:grid; grid-template-columns:repeat(8,1fr); gap:3px; padding:8px; border:1px solid #d9dfe7; border-radius:12px; background:#eef1f5; box-shadow:0 12px 28px rgba(31,42,55,.15); animation:pnCommentMenu .14s ease-out; }
.pn-comment-emoji__picker[hidden] { display:none; }
.pn-comment-emoji__picker button { height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; font-size:17px; transition:background .14s,transform .14s; }
.pn-comment-emoji__picker button:hover { background:#dfe5ec; transform:scale(1.12); }
.pn-comment-emoji--reaction .pn-comment-emoji__picker { left:-70px; }
.pn-comment__children { position:relative; margin:10px 0 -6px 20px; padding-left:20px; border-left:1px solid #dfe5ec; }
.pn-comment__children .pn-comment { padding:13px 0; }
.pn-comment__children .pn-comment-avatar { width:34px; height:34px; flex-basis:34px; }
.pn-comment__children .pn-comment__children { margin-left:12px; padding-left:16px; }
.pn-comment__children .pn-comment__children .pn-comment-avatar { width:29px; height:29px; flex-basis:29px; }
.pn-comment__children .pn-comment__children .pn-comment__children { margin-left:0; padding-left:12px; }
.pn-comment__children .pn-comment__children .pn-comment__children .pn-comment__children { margin-left:0; padding-left:0; border-left:0; }
.pn-comment-source { display:flex; align-items:center; gap:7px; margin:0 0 12px 52px; padding:8px 10px; border:1px solid #e1e6ed; border-radius:9px; color:#536174; background:#f1f3f6; text-decoration:none!important; }
.pn-comment-source span { flex:0 0 auto; padding:2px 7px; border-radius:999px; color:#315f8f; background:#e1eaf3; font-size:9px; font-weight:720; text-transform:uppercase; letter-spacing:.035em; }
.pn-comment-source strong { min-width:0; overflow:hidden; flex:1; font-size:11px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.pn-comment-source svg { width:14px; color:#8b96a5; }
.pn-comment-reply { margin-top:10px; }
.pn-comment-reply .pn-comment-composer { margin:0; }
.pn-comment-reply .pn-comment-composer__avatar { display:none; }
.pn-comment-reply .pn-comment-composer textarea { min-height:68px; }
.pn-comment__edit textarea { width:100%; min-height:76px; margin-top:8px; padding:10px 12px; resize:vertical; border:1px solid #cfd7e2; border-radius:10px; outline:none; background:#f3f5f8; }
.pn-comment__edit-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:7px; }
.pn-comments-empty { display:flex; align-items:center; flex-direction:column; padding:30px 15px; border:1px dashed #d7dde6; border-radius:13px; text-align:center; color:#7c8796; }
.pn-comments-empty>span { margin-bottom:7px; font-size:25px; filter:grayscale(.3); }
.pn-comments-empty strong { color:#566276; font-size:13px; }
.pn-comments-empty p { margin:3px 0 0; font-size:11px; }
.pn-comments-load { display:flex; justify-content:center; padding:15px 0 4px; }
.pn-comments-tabs { display:flex; gap:5px; overflow:auto; margin:0 0 20px; padding:3px; border:1px solid var(--comment-border,#e1e6ed); border-radius:12px; scrollbar-width:none; }
.pn-comments-tabs::-webkit-scrollbar { display:none; }
.pn-comments-tabs a { flex:0 0 auto; padding:9px 13px; border-radius:8px; color:#687385; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px; font-weight:650; text-decoration:none!important; transition:color .16s,background .16s; }
.pn-comments-tabs a:hover { color:#2b6cb0; background:#f0f2f5; }
.pn-comments-tabs a.is-active { color:#fff; background:#2b6cb0; box-shadow:0 3px 8px rgba(43,108,176,.2); }
.pn-comments-page__tools { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.pn-comments-search { position:relative; min-width:0; flex:1; }
.pn-comments-search>svg { position:absolute; top:10px; left:11px; width:16px; color:#98a2b3; }
.pn-comments-search input { width:100%; height:38px; padding:0 34px 0 36px; border:1px solid #d9dfe7; border-radius:10px; outline:none; color:#283548; background:#f3f5f8; }
.pn-comments-search input:focus { border-color:#91b5d9; box-shadow:0 0 0 3px rgba(43,108,176,.08); }
.pn-comments-search>a { position:absolute; top:4px; right:5px; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:#8691a1; font-size:20px; text-decoration:none!important; }
.pn-comments-search>a:hover { background:#e7ebf0; }
.pn-comments-page__summary { padding-bottom:8px; color:#8993a2; font-size:11px; }
.pn-comments-page__summary strong { color:#556276; }
.pn-comments-date { display:flex; align-items:center; gap:10px; margin:11px 0 0; color:#98a2b3; font-size:10px; font-weight:680; letter-spacing:.035em; text-transform:uppercase; }
.pn-comments-date:before,.pn-comments-date:after { height:1px; flex:1; content:""; background:#e4e8ee; }
.pn-comment-report { position:fixed; z-index:10050; inset:0; display:grid; place-items:center; padding:18px; background:rgba(20,28,40,.43); animation:pnCommentFade .15s ease-out; }
@keyframes pnCommentFade { from { opacity:0; } to { opacity:1; } }
.pn-comment-report__dialog { width:min(440px,100%); padding:20px; border:1px solid #d8dee7; border-radius:15px; background:#eef1f5; box-shadow:0 22px 60px rgba(20,28,40,.25); }
.pn-comment-report__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.pn-comment-report__head h3 { margin:0; font-size:17px; font-weight:720; }
.pn-comment-report__reasons { display:grid; gap:7px; }
.pn-comment-report__reasons label { display:flex; align-items:center; gap:9px; margin:0; padding:9px 10px; border:1px solid #dce2e9; border-radius:9px; cursor:pointer; }
.pn-comment-report__reasons label:hover { border-color:#b9c9da; }
.pn-comment-report textarea { width:100%; min-height:72px; margin-top:9px; padding:9px 10px; border:1px solid #d6dde6; border-radius:9px; resize:vertical; background:#f3f5f8; }
.pn-comment-report__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.pn-comment-toast { position:fixed; z-index:10060; right:18px; bottom:18px; max-width:390px; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #cad4df; border-radius:12px; color:#243247; background:#e8edf3; box-shadow:0 14px 35px rgba(20,28,40,.2); animation:pnCommentMenu .18s ease-out; }
.pn-comment-toast button { border:0; color:#1f5e99; background:transparent; font-weight:720; }
@media (max-width:767px) {
  .pn-comments { font-size:13px; }
  .pn-comments__head { margin-bottom:14px; }
  .pn-comments__head h2 { font-size:18px; }
  .pn-comments-sort select { width:132px; height:34px; padding-left:10px; font-size:11px; }
  .pn-comment-composer { gap:9px; }
  .pn-comment-composer__avatar { width:34px; height:34px; flex-basis:34px; }
  .pn-comment { padding:15px 0; }
  .pn-comment__row { gap:9px; }
  .pn-comment-avatar { width:35px; height:35px; flex-basis:35px; }
  .pn-comment__identity { gap:3px 6px; }
  .pn-comment__text { padding-right:0; font-size:12.5px; }
  .pn-comment__children { margin-left:12px; padding-left:12px; }
  .pn-comment__children .pn-comment__children { margin-left:5px; padding-left:9px; }
  .pn-comment__children .pn-comment__children .pn-comment__children { margin-left:0; padding-left:7px; }
  .pn-comment__children .pn-comment__children .pn-comment__children .pn-comment__children { padding-left:0; }
  .pn-comment-source { margin-left:44px; }
  .pn-comment-source strong { max-width:190px; }
  .pn-comment-emoji__picker { right:0; left:auto; width:216px; grid-template-columns:repeat(8,1fr); }
  .pn-comment-emoji--reaction .pn-comment-emoji__picker { right:auto; left:-62px; }
  .pn-comments-page__tools { align-items:stretch; flex-direction:column; }
  .pn-comments-page__tools .pn-comments-sort select { width:100%; }
  .pn-comments-tabs { margin-right:-15px; margin-left:-15px; padding-right:15px; padding-left:15px; border-right:0; border-left:0; border-radius:0; }
  .pn-comment-auth-strip { padding:10px 11px; }
}
@media (prefers-reduced-motion:reduce) { .pn-comments * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }