.comments-system{max-width:800px;margin:3rem auto 0;padding:0 1rem;color:var(--text-primary)}.comments-system .comments-header{margin-bottom:2rem}.comments-system .comments-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin:0 0 .5rem}.comments-system .moderation-note{font-size:.875rem;color:var(--text-secondary);margin:0;font-style:italic}.comments-system .loading-state{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 0}.comments-system .loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--color-accent);border-radius:50%;animation:comments-spin .8s linear infinite}@keyframes comments-spin{to{transform:rotate(360deg)}}.comments-system .no-comments{text-align:center;padding:3rem 1rem;color:var(--text-secondary);font-style:italic}.comments-system .comments-display{margin-bottom:3rem}.comments-system .comments-list{display:flex;flex-direction:column;gap:0}.comments-system .comment-item{position:relative}.comments-system .comment-item[data-level="0"]{margin-bottom:1.5rem}.comments-system .comment-card{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:.75rem;padding:1rem 1.25rem;transition:all .2s ease;position:relative}.comments-system .comment-card:hover{box-shadow:0 2px 12px #00000014}:root.dark .comments-system .comment-card:hover{box-shadow:0 2px 12px #00000040}.comments-system .comment-header{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:.875rem}.comments-system .comment-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;border:2px solid var(--border-color);background:var(--bg-primary);object-fit:cover}.comments-system .comment-meta{flex:1;min-width:0}.comments-system .author-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}.comments-system .author-name,.comments-system .author-link{font-weight:600;font-size:.9375rem;color:var(--text-primary);line-height:1.4}.comments-system .author-link{text-decoration:none;transition:color .2s ease}.comments-system .author-link:hover{color:var(--color-accent)}.comments-system .author-badge{display:inline-flex;align-items:center;background:var(--color-accent);color:#fff;font-size:.625rem;font-weight:700;padding:.125rem .5rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.025em}.comments-system .comment-date{font-size:.8125rem;color:var(--text-secondary);display:block;line-height:1.4}.comments-system .comment-body{margin-left:0}.comments-system .comment-content{color:var(--text-primary);font-size:.9375rem;line-height:1.7;margin-bottom:.875rem;word-wrap:break-word}.comments-system .comment-content p{margin:0 0 .75em}.comments-system .comment-content p:last-child{margin-bottom:0}.comments-system .comment-content a{color:var(--color-accent);text-decoration:underline;word-break:break-word;transition:opacity .2s ease}.comments-system .comment-content a:hover{opacity:.8}.comments-system .comment-content code{background:var(--bg-primary);padding:.125rem .375rem;border-radius:.25rem;font-size:.875em;font-family:Courier New,monospace;border:1px solid var(--border-color)}.comments-system .comment-content pre{background:var(--bg-primary);padding:.75rem;border-radius:.375rem;overflow-x:auto;border:1px solid var(--border-color);margin:.75rem 0}.comments-system .comment-content pre code{background:none;padding:0;border:none}.comments-system .comment-content blockquote{border-left:3px solid var(--color-accent);padding-left:1rem;margin:.75rem 0;color:var(--text-secondary);font-style:italic}.comments-system .comment-content .comment-gif{max-width:100%;max-height:300px;border-radius:.5rem;margin:.75rem 0;display:block}.comments-system .reply-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;padding:.375rem .875rem;border-radius:.375rem;transition:all .2s ease;display:inline-flex;align-items:center;gap:.25rem}.comments-system .reply-btn:hover{background:var(--bg-primary);border-color:var(--color-accent);color:var(--color-accent)}.comments-system .comment-children{margin-top:1rem;margin-left:2.5rem;padding-left:1.25rem;border-left:2px solid var(--border-color);position:relative}.comments-system .comment-children:before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--border-color) 0%,var(--border-color) 50%,transparent 100%)}.comments-system .comment-children .comment-item{margin-bottom:1rem}.comments-system .comment-children .comment-item:last-child{margin-bottom:0}.comments-system .comment-children .comment-card{background:var(--bg-primary)}.comments-system .comment-children .comment-children{margin-left:1.5rem;padding-left:1rem;border-left-width:1px}.comments-system .comment-item[data-level="0"]:after{content:"";position:absolute;bottom:-.75rem;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--border-color) 10%,var(--border-color) 90%,transparent)}.comments-system .comment-item[data-level="0"]:last-child:after{display:none}.comments-system .comment-form-section{margin-top:3rem;padding-top:2.5rem;border-top:2px solid var(--border-color)}.comments-system .form-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 1.5rem}.comments-system .reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;background:color-mix(in oklab,var(--color-accent),transparent 90%);border-left:3px solid var(--color-accent);border-radius:.5rem;margin-bottom:1.25rem;font-size:.875rem}.comments-system .cancel-reply-btn{background:transparent;border:none;color:var(--color-accent);cursor:pointer;font-size:.875rem;font-weight:500;text-decoration:underline;padding:0;transition:opacity .2s ease}.comments-system .cancel-reply-btn:hover{opacity:.8}.comments-system .comment-message{padding:1rem 1.25rem;border-radius:.5rem;margin-bottom:1.5rem;font-size:.9375rem;display:flex;align-items:flex-start;gap:.75rem}.comments-system .comment-message.success{background-color:#d1fae5;color:#065f46;border:1px solid #10b981}.comments-system .comment-message.error{background-color:#fee2e2;color:#991b1b;border:1px solid #ef4444}:root.dark .comments-system .comment-message.success{background-color:#10b98126;color:#6ee7b7;border-color:#10b981}:root.dark .comments-system .comment-message.error{background-color:#ef444426;color:#fca5a5;border-color:#ef4444}.comments-system .honeypot{position:absolute;left:-9999px}.comments-system .comment-form{display:flex;flex-direction:column;gap:1.25rem}.comments-system .form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.comments-system .form-group{display:flex;flex-direction:column;gap:.5rem}.comments-system .form-group label{font-size:.875rem;font-weight:600;color:var(--text-primary)}.comments-system .form-group input,.comments-system .form-group textarea{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--bg-surface);color:var(--text-primary);font-size:.9375rem;font-family:inherit;transition:all .2s ease;width:100%}.comments-system .form-group input:focus,.comments-system .form-group textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-accent),transparent 90%);background-color:var(--bg-primary)}.comments-system .form-group textarea{resize:vertical;min-height:120px;line-height:1.6;font-family:inherit}.comments-system .textarea-footer{display:flex;justify-content:flex-end;margin-top:-.5rem}.comments-system .char-count{font-size:.75rem;color:var(--text-secondary)}.comments-system .submit-button{padding:.875rem 2rem;background-color:#a07856;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;align-self:flex-start}:root.dark .comments-system .submit-button{background-color:#b89968;color:#1e1f21}.comments-system .submit-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #a078564d}:root .comments-system .submit-button:hover:not(:disabled){background-color:#8f6a4a}:root.dark .comments-system .submit-button:hover:not(:disabled){background-color:#fff;color:#000}.comments-system .submit-button:active:not(:disabled){transform:translateY(0)}.comments-system .submit-button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:640px){.comments-system{padding:0 .75rem}.comments-system .comment-avatar{width:36px;height:36px}.comments-system .comment-children{margin-left:1.5rem;padding-left:.875rem}.comments-system .comment-children .comment-children{margin-left:1rem;padding-left:.75rem}.comments-system .form-row{grid-template-columns:1fr}.comments-system .submit-button{width:100%}.comments-system .comment-card{padding:.875rem 1rem}.comments-system .author-name,.comments-system .author-link,.comments-system .comment-content{font-size:.875rem}}.formatting-toolbar{display:flex;gap:.25rem;padding:.5rem;background:var(--bg-surface);border:1px solid var(--border-color);border-bottom:none;border-radius:.5rem .5rem 0 0;flex-wrap:wrap}.format-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.25rem;cursor:pointer;transition:all .2s;font-size:.875rem}.format-btn:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.format-btn strong,.format-btn em,.format-btn s{font-size:14px;pointer-events:none}.toolbar-divider{width:1px;background:var(--border-color);margin:0 .25rem}.comments-system textarea{border-radius:0 0 .5rem .5rem;border-top:none}.emoji-picker-container{position:relative;margin-bottom:1rem}.emoji-picker-container emoji-picker{--background: var(--bg-surface);--border-color: var(--border-color);--button-hover-background: var(--bg-primary);--input-border-color: var(--border-color);--input-font-color: var(--text-primary);--input-background: var(--bg-primary);--outline-color: var(--color-accent);width:100%;max-width:100%;border:1px solid var(--border-color);border-radius:.5rem}.gif-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.gif-modal.hidden{display:none}.gif-modal-backdrop{position:absolute;inset:0;background:#00000080;backdrop-filter:blur(4px)}.gif-modal-content{position:relative;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:.75rem;max-width:500px;width:100%;box-shadow:0 10px 40px #0000004d}.gif-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid var(--border-color)}.gif-modal-header h4{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-primary)}.gif-modal-close{background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:all .2s}.gif-modal-close:hover{background:var(--bg-primary);color:var(--text-primary)}.gif-modal-body{padding:1.25rem}.gif-help{font-size:.875rem;color:var(--text-secondary);margin:0 0 1rem}#gif-url-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:.5rem;background:var(--bg-primary);color:var(--text-primary);font-size:.9375rem;margin-bottom:1rem}#gif-url-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-accent),transparent 90%)}.gif-preview{margin-bottom:1rem;padding:1rem;background:var(--bg-primary);border-radius:.5rem;border:1px solid var(--border-color)}.gif-preview.hidden{display:none}.gif-preview-label{font-size:.875rem;color:var(--text-secondary);margin:0 0 .5rem;font-weight:600}#gif-preview-img{max-width:100%;max-height:200px;border-radius:.5rem;display:block}.gif-modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn-cancel,.btn-insert-gif{padding:.625rem 1.25rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid var(--border-color)}.btn-cancel{background:var(--bg-primary);color:var(--text-primary)}.btn-cancel:hover{background:var(--bg-surface)}.btn-insert-gif{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-insert-gif:hover{opacity:.9;transform:translateY(-1px)}@media(max-width:640px){.formatting-toolbar{padding:.375rem}.format-btn{width:28px;height:28px;font-size:.75rem}.gif-modal-content{max-width:calc(100% - 2rem)}}