.comments-system{--comment-bg: #ffffff;--comment-surface: #fafbfc;--comment-border: #e1e8ed;--comment-border-hover: #cbd5e0;--comment-text: #2d3748;--comment-text-secondary: #4a5568;--comment-muted: #718096;--comment-accent: #3182ce;--comment-accent-hover: #2c5282;--comment-success: #38a169;--comment-warning: #ed8936;--comment-error: #e53e3e;--comment-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--comment-shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--comment-shadow-lg: 0 8px 25px rgba(0, 0, 0, .15);--comment-radius: 12px;--comment-radius-sm: 8px;--comment-spacing: 1rem;--comment-spacing-sm: .75rem;--comment-spacing-lg: 1.5rem;--comment-font-base: 16px;--comment-font-sm: 14px;--comment-font-xs: 12px;--comment-line-height: 1.6;--comment-line-height-tight: 1.4;--touch-target: 48px;--touch-spacing: 8px;--comment-transition: all .2s cubic-bezier(.4, 0, .2, 1);--comment-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--comment-bounce: cubic-bezier(.68, -.55, .265, 1.55);width:100%;max-width:100%;margin:0;padding:var(--comment-spacing);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:var(--comment-font-base);line-height:var(--comment-line-height);color:var(--comment-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){.comments-system{--comment-bg: #1a202c;--comment-surface: #2d3748;--comment-border: #4a5568;--comment-border-hover: #718096;--comment-text: #f7fafc;--comment-text-secondary: #e2e8f0;--comment-muted: #a0aec0;--comment-accent: #63b3ed;--comment-accent-hover: #90cdf4;--comment-success: #68d391;--comment-warning: #fbb042;--comment-error: #fc8181}}@media (min-width: 768px){.comments-system{max-width:800px;margin:2rem auto;padding:var(--comment-spacing-lg);--comment-spacing: 1.25rem;--comment-spacing-lg: 2rem;--comment-font-base: 15px;--touch-target: 40px}}@media (min-width: 1200px){.comments-system{max-width:900px;--comment-spacing-lg: 2.5rem}}.comment-composer{background:var(--comment-bg);border:2px solid var(--comment-border);border-radius:var(--comment-radius);padding:var(--comment-spacing);margin-bottom:var(--comment-spacing-lg);box-shadow:var(--comment-shadow-sm);transition:var(--comment-transition);position:relative}.comment-composer:focus-within{border-color:var(--comment-accent);box-shadow:var(--comment-shadow-md),0 0 0 3px #3182ce1a;transform:translateY(-2px)}.anonymous-fields{background:var(--comment-surface);border:1px solid var(--comment-border);border-radius:var(--comment-radius-sm);padding:var(--comment-spacing);margin-bottom:var(--comment-spacing);display:grid;gap:var(--comment-spacing-sm)}.author-name-input,.author-email-input{width:100%;padding:var(--comment-spacing-sm) var(--comment-spacing);border:1px solid var(--comment-border);border-radius:var(--comment-radius-sm);font-size:var(--comment-font-base);font-family:inherit;background:var(--comment-bg);color:var(--comment-text);transition:var(--comment-transition);min-height:var(--touch-target);-webkit-appearance:none;appearance:none}.author-name-input:focus,.author-email-input:focus{outline:none;border-color:var(--comment-accent);box-shadow:0 0 0 3px #3182ce1a}@media (min-width: 768px){.anonymous-fields{grid-template-columns:2fr 3fr;grid-template-rows:auto auto;align-items:start}.author-name-input{grid-column:1}.author-email-input{grid-column:2}.anonymous-notice{grid-column:1 / -1;margin-top:var(--comment-spacing-sm)}}.anonymous-notice{font-size:var(--comment-font-sm);color:var(--comment-muted);font-style:italic;line-height:var(--comment-line-height-tight)}.comment-input{width:100%;min-height:120px;padding:var(--comment-spacing);border:1px solid var(--comment-border);border-radius:var(--comment-radius-sm);font-size:var(--comment-font-base);font-family:inherit;line-height:var(--comment-line-height);background:var(--comment-bg);color:var(--comment-text);resize:vertical;transition:var(--comment-transition);-webkit-appearance:none;appearance:none}.comment-input:focus{outline:none;border-color:var(--comment-accent);box-shadow:0 0 0 3px #3182ce1a}.comment-input::placeholder{color:var(--comment-muted);opacity:.8}@media (max-width: 767px){.comment-input{min-height:140px;font-size:16px}}.composer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--comment-spacing);flex-wrap:wrap;gap:var(--comment-spacing-sm)}.character-count{font-size:var(--comment-font-sm);color:var(--comment-muted);font-variant-numeric:tabular-nums;min-width:80px}.character-count.warning{color:var(--comment-warning)}.character-count.error{color:var(--comment-error);font-weight:600}.submit-comment{background:var(--comment-accent);color:#fff;border:none;border-radius:var(--comment-radius-sm);padding:var(--comment-spacing-sm) var(--comment-spacing-lg);font-size:var(--comment-font-base);font-weight:600;min-height:var(--touch-target);min-width:120px;cursor:pointer;transition:var(--comment-transition);position:relative;overflow:hidden}.submit-comment:hover:not(:disabled){background:var(--comment-accent-hover);transform:translateY(-1px);box-shadow:var(--comment-shadow-md)}.submit-comment:active:not(:disabled){transform:translateY(0);transition:var(--comment-transition-fast)}.submit-comment:disabled{background:var(--comment-muted);cursor:not-allowed;opacity:.6}.submit-comment.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.selection-notice{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:var(--comment-spacing);border-radius:var(--comment-radius);margin-bottom:var(--comment-spacing);display:flex;align-items:center;justify-content:space-between;animation:slideInDown .3s var(--comment-bounce);box-shadow:var(--comment-shadow-lg)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.selection-text{background:#fff3;padding:var(--comment-spacing-sm);border-radius:var(--comment-radius-sm);font-style:italic;margin:0 var(--comment-spacing);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-selection{background:#fff3;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;transition:var(--comment-transition);flex-shrink:0}.clear-selection:hover{background:#ffffff4d;transform:scale(1.1)}.comments-list{margin-top:var(--comment-spacing-lg)}.no-comments{text-align:center;color:var(--comment-muted);font-style:italic;padding:var(--comment-spacing-lg)}.comment-item{background:var(--comment-bg);border:1px solid var(--comment-border);border-radius:var(--comment-radius);margin-bottom:var(--comment-spacing);transition:var(--comment-transition);position:relative;overflow:hidden}.comment-item:hover{border-color:var(--comment-border-hover);box-shadow:var(--comment-shadow-sm)}.comment-content{padding:var(--comment-spacing)}.comment-header{margin-bottom:var(--comment-spacing-sm)}.comment-author{display:flex;align-items:center;flex-wrap:wrap;gap:var(--comment-spacing-sm);margin-bottom:var(--comment-spacing-sm)}.author-avatar-placeholder{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--comment-accent),var(--comment-success));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:var(--comment-shadow-sm)}.author-name{font-weight:600;color:var(--comment-text);display:flex;align-items:center;flex-wrap:wrap;gap:var(--comment-spacing-sm)}.anonymous-badge{background:var(--comment-warning);color:#fff;font-size:var(--comment-font-xs);font-weight:600;padding:.25rem .5rem;border-radius:12px;text-transform:uppercase;letter-spacing:.025em}.comment-time{font-size:var(--comment-font-sm);color:var(--comment-muted);white-space:nowrap}.approval-status{font-size:var(--comment-font-xs);font-weight:600;padding:.25rem .5rem;border-radius:12px;text-transform:uppercase;letter-spacing:.025em}.approval-status.pending{background:var(--comment-warning);color:#fff}.comment-item.pending-approval{border-left:4px solid var(--comment-warning);background:linear-gradient(to right,rgba(237,137,54,.05) 0%,var(--comment-bg) 50%);opacity:.9}.pending-notice{background:#ed89361a;border:1px solid var(--comment-warning);border-radius:var(--comment-radius-sm);padding:var(--comment-spacing-sm);margin:var(--comment-spacing-sm) 0;font-size:var(--comment-font-sm);color:var(--comment-text-secondary);font-style:italic;position:relative}.pending-notice:before{content:"⏳";margin-right:var(--comment-spacing-sm)}.comment-text{font-size:var(--comment-font-base);line-height:var(--comment-line-height);color:var(--comment-text);margin:var(--comment-spacing-sm) 0}.comment-text p{margin:0 0 var(--comment-spacing-sm) 0}.comment-text p:last-child{margin-bottom:0}.comment-actions{display:flex;align-items:center;gap:var(--comment-spacing);margin-top:var(--comment-spacing);padding-top:var(--comment-spacing-sm);border-top:1px solid var(--comment-border)}.vote-controls{display:flex;align-items:center;gap:var(--comment-spacing-sm)}.vote-btn{background:var(--comment-surface);border:1px solid var(--comment-border);color:var(--comment-muted);width:var(--touch-target);height:var(--touch-target);border-radius:50%;cursor:pointer;transition:var(--comment-transition);display:flex;align-items:center;justify-content:center;font-size:16px}.vote-btn:hover:not(:disabled){border-color:var(--comment-accent);color:var(--comment-accent);transform:scale(1.1)}.vote-btn.voted{background:var(--comment-accent);border-color:var(--comment-accent);color:#fff}.vote-count{font-size:var(--comment-font-sm);font-weight:600;color:var(--comment-text-secondary);min-width:24px;text-align:center;font-variant-numeric:tabular-nums}.reply-btn{background:transparent;border:none;color:var(--comment-accent);font-size:var(--comment-font-sm);font-weight:600;cursor:pointer;padding:var(--comment-spacing-sm) var(--comment-spacing);border-radius:var(--comment-radius-sm);transition:var(--comment-transition);min-height:var(--touch-target)}.reply-btn:hover:not(:disabled){background:#3182ce1a;color:var(--comment-accent-hover)}.comment-item.pending-approval .vote-controls,.comment-item.pending-approval .reply-btn{opacity:.4;pointer-events:none}.comment-item[data-depth="1"]{margin-left:var(--comment-spacing);border-left:3px solid var(--comment-border);border-radius:var(--comment-radius-sm)}.comment-item[data-depth="2"]{margin-left:calc(var(--comment-spacing) * 2);border-left:2px solid var(--comment-border)}@media (min-width: 768px){.comment-item[data-depth="1"]{margin-left:calc(var(--comment-spacing) * 2)}.comment-item[data-depth="2"]{margin-left:calc(var(--comment-spacing) * 4)}}.error-message,.success-message{padding:var(--comment-spacing);border-radius:var(--comment-radius);margin:var(--comment-spacing) 0;display:flex;align-items:center;justify-content:space-between;font-weight:500}.error-message{background:var(--comment-error);color:#fff;animation:shake .5s ease-in-out}.success-message{background:var(--comment-success);color:#fff;animation:slideInUp .3s var(--comment-bounce)}.error-dismiss{background:#fff3;border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;transition:var(--comment-transition);flex-shrink:0;margin-left:var(--comment-spacing)}.error-dismiss:hover{background:#ffffff4d;transform:scale(1.1)}@keyframes shake{0%,20%,40%,60%,80%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.comments-loading{display:flex;align-items:center;justify-content:center;padding:var(--comment-spacing-lg);color:var(--comment-muted);font-style:italic}.comments-loading:before{content:"";width:24px;height:24px;margin-right:var(--comment-spacing);border:2px solid var(--comment-border);border-top:2px solid var(--comment-accent);border-radius:50%;animation:spin 1s linear infinite}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.comment-item:focus,.vote-btn:focus,.reply-btn:focus,.submit-comment:focus,.comment-input:focus{outline:2px solid var(--comment-accent);outline-offset:2px}@media (prefers-contrast: high){.comments-system{--comment-border: #000000;--comment-text: #000000;--comment-bg: #ffffff;--comment-accent: #0000ff}[data-theme=dark] .comments-system{--comment-border: #ffffff;--comment-text: #ffffff;--comment-bg: #000000;--comment-accent: #00ff00}}