*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fafbfc;--bg2:#fff;--bg3:#f0f2f5;--bg4:#e8ebef;
  --text:#1a1a2e;--dim:#5a6178;--dimmer:#8891a5;
  --accent:#2563eb;--accent2:#1d4ed8;--accent-bg:rgba(37,99,235,.08);
  --green:#059669;--red:#dc2626;--orange:#ea580c;
  --border:#e2e5ea;--border2:#d0d4dc;
  --serif:'Merriweather',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow2:0 4px 12px rgba(0,0,0,.08);
  --max-w:960px;
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.header{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.header-inner{max-width:1200px;margin:0 auto;padding:.6rem 1.5rem;display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0}
.logo-icon{font-size:1.5rem}
.logo-text{font-size:1.1rem;font-weight:700;color:var(--text)}
.search-box{flex:1;max-width:420px;position:relative}
.search-box input{width:100%;padding:.5rem .8rem;border:1px solid var(--border);border-radius:20px;font-size:.9rem;background:var(--bg3);transition:all .2s}
.search-box input:focus{outline:none;border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px var(--accent-bg)}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-top:4px;display:none;box-shadow:var(--shadow2);max-height:400px;overflow-y:auto;z-index:200}
.search-results.show{display:block}
.sr-item{padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid var(--bg3)}
.sr-item:hover{background:var(--accent-bg)}
.sr-item .sr-title{font-weight:600;font-size:.9rem}
.sr-item .sr-snippet{font-size:.8rem;color:var(--dim);margin-top:.1rem}
.sr-item .sr-snippet mark{background:var(--accent-bg);color:var(--accent);padding:0 2px;border-radius:2px}
.header-nav{display:flex;align-items:center;gap:.2rem;flex-shrink:0}
.header-nav a{padding:.4rem .7rem;font-size:.85rem;font-weight:500;color:var(--dim);border-radius:var(--radius);transition:all .15s}
.header-nav a:hover{background:var(--bg3);color:var(--text);text-decoration:none}
.btn-new{background:var(--accent)!important;color:#fff!important;font-weight:600!important}
.btn-new:hover{background:var(--accent2)!important}
.user-area{flex-shrink:0;font-size:.85rem}
.user-area button{background:none;border:1px solid var(--border);padding:.35rem .7rem;border-radius:var(--radius);cursor:pointer;font-size:.83rem;color:var(--dim);transition:all .15s}
.user-area button:hover{border-color:var(--accent);color:var(--accent)}
.user-name{font-weight:600;margin-right:.5rem}

/* Layout */
.layout{max-width:var(--max-w);margin:0 auto;padding:1.5rem;flex:1;width:100%}
.main{min-height:60vh}
.loading{text-align:center;padding:3rem;color:var(--dimmer)}

/* Article */
.article{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 2.5rem;box-shadow:var(--shadow)}
.article-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--bg3)}
.article-title{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1.3;margin-bottom:.5rem}
.article-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:var(--dimmer)}
.article-meta a{color:var(--dim)}
.article-actions{display:flex;gap:.4rem;margin-top:.8rem}
.article-actions a,.article-actions button{padding:.3rem .7rem;font-size:.8rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--bg2);color:var(--dim);text-decoration:none;transition:all .15s}
.article-actions a:hover,.article-actions button:hover{border-color:var(--accent);color:var(--accent)}
.article-actions button{font-family:inherit}

/* TOC */
.toc{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1.2rem;margin-bottom:1.5rem;font-size:.85rem}
.toc-title{font-weight:600;margin-bottom:.4rem;cursor:pointer}
.toc ol{padding-left:1.5rem}
.toc li{margin:.2rem 0}
.toc a{color:var(--dim)}
.toc a:hover{color:var(--accent)}

/* Article Body (rendered markdown) */
.article-body{font-family:var(--serif);font-size:1rem;line-height:1.8}
.article-body h1,.article-body h2,.article-body h3,.article-body h4{font-family:var(--sans);margin:1.5rem 0 .5rem;line-height:1.3}
.article-body h1{font-size:1.6rem;border-bottom:1px solid var(--bg3);padding-bottom:.3rem}
.article-body h2{font-size:1.35rem;border-bottom:1px solid var(--bg3);padding-bottom:.2rem}
.article-body h3{font-size:1.15rem}
.article-body p{margin:.8rem 0}
.article-body ul,.article-body ol{margin:.5rem 0 .5rem 1.5rem}
.article-body li{margin:.2rem 0}
.article-body blockquote{border-left:3px solid var(--accent);padding:.5rem 1rem;margin:1rem 0;background:var(--accent-bg);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--dim)}
.article-body code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:.15rem .35rem;border-radius:3px}
.article-body pre{background:var(--text);color:#e4e6ef;padding:1rem;border-radius:var(--radius);overflow-x:auto;margin:1rem 0;font-size:.88rem;line-height:1.5}
.article-body pre code{background:none;padding:0;color:inherit}
.article-body table{border-collapse:collapse;width:100%;margin:1rem 0}
.article-body th,.article-body td{padding:.5rem .7rem;border:1px solid var(--border);text-align:left;font-family:var(--sans);font-size:.9rem}
.article-body th{background:var(--bg3);font-weight:600}
.article-body img{max-width:100%;border-radius:var(--radius);margin:.5rem 0}
.article-body hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
.wiki-link{color:var(--accent);font-weight:500}
.redlink{color:var(--red)}

/* Editor */
.editor{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 2.5rem}
.editor h2{font-size:1.4rem;margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--dim);margin-bottom:.3rem}
.form-input{width:100%;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;transition:border .2s;font-family:var(--sans)}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-textarea{width:100%;min-height:400px;padding:.8rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);font-size:.9rem;line-height:1.6;resize:vertical;transition:border .2s}
.form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.editor-toolbar{display:flex;gap:.3rem;margin-bottom:.5rem;flex-wrap:wrap}
.editor-toolbar button{padding:.3rem .5rem;background:var(--bg3);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.8rem;color:var(--dim);transition:all .15s}
.editor-toolbar button:hover{border-color:var(--accent);color:var(--accent)}
.editor-footer{display:flex;gap:.8rem;align-items:center;margin-top:1rem}
.btn-primary{padding:.6rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-weight:600;font-size:.95rem;cursor:pointer;transition:all .15s}
.btn-primary:hover{background:var(--accent2);box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-secondary{padding:.6rem 1.5rem;background:var(--bg3);color:var(--dim);border:1px solid var(--border);border-radius:var(--radius);font-weight:500;cursor:pointer;transition:all .15s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{padding:.4rem .8rem;background:var(--bg2);color:var(--red);border:1px solid rgba(220,38,38,.3);border-radius:var(--radius);cursor:pointer;font-size:.85rem;transition:all .15s}
.btn-danger:hover{background:rgba(220,38,38,.08)}

/* Editor tabs (edit/preview) */
.editor-tabs{display:flex;gap:0;margin-bottom:-1px;position:relative;z-index:1}
.editor-tab{padding:.5rem 1rem;background:var(--bg3);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--dim)}
.editor-tab.active{background:var(--bg2);color:var(--text);border-bottom:1px solid var(--bg2)}
.preview-pane{display:none;min-height:400px;padding:1rem;border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) var(--radius)}
.preview-pane.show{display:block}

/* Lists */
.page-title{font-size:1.4rem;font-weight:700;margin-bottom:1rem}
.article-list{list-style:none}
.article-list li{padding:.7rem 0;border-bottom:1px solid var(--bg3)}
.article-list li:last-child{border:none}
.al-title{font-weight:600;font-size:1rem}
.al-meta{font-size:.8rem;color:var(--dimmer);margin-top:.15rem}
.al-summary{font-size:.85rem;color:var(--dim);margin-top:.2rem}
.cat-badge{display:inline-block;padding:.15rem .5rem;background:var(--accent-bg);color:var(--accent);border-radius:12px;font-size:.75rem;font-weight:500}

/* History */
.rev-list{list-style:none}
.rev-list li{padding:.6rem 0;border-bottom:1px solid var(--bg3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.rev-info{font-size:.85rem}
.rev-date{color:var(--dimmer);font-size:.8rem}
.rev-comment{font-style:italic;color:var(--dim);font-size:.82rem}
.rev-actions{display:flex;gap:.3rem}

/* Not found */
.not-found{text-align:center;padding:3rem}
.not-found h2{font-size:1.3rem;margin-bottom:.5rem}
.not-found p{color:var(--dim);margin-bottom:1rem}

/* Categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.cat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;transition:all .15s}
.cat-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.cat-card .cat-name{font-weight:600;font-size:1rem;margin-bottom:.2rem}
.cat-card .cat-count{font-size:.85rem;color:var(--dimmer)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--bg2);border-radius:12px;padding:2rem;width:380px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-close{position:absolute;top:.8rem;right:.8rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--dimmer);line-height:1}
.auth-tabs{display:flex;gap:0;margin-bottom:1.2rem}
.auth-tab{flex:1;padding:.6rem;text-align:center;background:var(--bg3);border:none;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--dim);transition:all .15s}
.auth-tab:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.auth-tab:last-child{border-radius:0 var(--radius) var(--radius) 0}
.auth-tab.active{background:var(--accent);color:#fff}
.modal form input{width:100%;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.6rem;font-size:.95rem}
.modal form input:focus{outline:none;border-color:var(--accent)}
.modal form .btn-primary{width:100%;margin-top:.3rem}
.auth-error{color:var(--red);font-size:.85rem;margin-top:.5rem;min-height:1.2em;text-align:center}

/* Footer */
.footer{border-top:1px solid var(--border);padding:1.5rem;text-align:center;font-size:.8rem;color:var(--dimmer);margin-top:auto}

/* Responsive */
@media(max-width:768px){
  .header-inner{flex-wrap:wrap;gap:.5rem}
  .search-box{order:3;max-width:100%;flex-basis:100%}
  .header-nav{gap:0}
  .article{padding:1.2rem}
  .editor{padding:1.2rem}
  .layout{padding:1rem}
}

/* Upload */
.upload-btn{margin-bottom:.5rem}
.upload-btn input{display:none}
.upload-btn label{display:inline-block;padding:.35rem .7rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.83rem;color:var(--dim);transition:all .15s}
.upload-btn label:hover{border-color:var(--accent);color:var(--accent)}

/* Avatars */
.avatar-sm{width:28px;height:28px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;font-size:.8rem}
.avatar-lg{width:80px;height:80px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:2rem}
.avatar-placeholder{background:var(--bg3);border:1px solid var(--border);line-height:1}

/* Role badges */
.role-badge{display:inline-block;padding:.1rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}
.role-admin{background:rgba(220,38,38,.1);color:var(--red)}
.role-moderator{background:rgba(234,88,12,.1);color:var(--orange)}
.role-user{background:var(--bg3);color:var(--dimmer)}

/* Profile card */
.profile-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 2.5rem;box-shadow:var(--shadow)}
.profile-header{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1rem}
.profile-info h1{font-size:1.5rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.profile-meta{font-size:.85rem;color:var(--dimmer);margin-bottom:.5rem}
.profile-bio{color:var(--dim);font-size:.95rem;line-height:1.6;white-space:pre-wrap}

/* Profile form */
.profile-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 2.5rem;max-width:600px}
.profile-form h2{font-size:1.4rem;margin-bottom:1.2rem}
.profile-avatar-section{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}

/* Admin panel */
.admin-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th,.admin-table td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--bg3);vertical-align:middle}
.admin-table th{font-weight:600;color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.admin-table select{padding:.3rem .5rem;border:1px solid var(--border);border-radius:4px;font-size:.85rem;background:var(--bg2);cursor:pointer}
.admin-table select:focus{outline:none;border-color:var(--accent)}
.admin-actions{display:flex;gap:.4rem;flex-wrap:nowrap}
.admin-actions .btn-secondary{padding:.25rem .5rem;font-size:.8rem}
.admin-actions .btn-danger{padding:.25rem .5rem;font-size:.8rem}
.banned-row{opacity:.5;background:rgba(220,38,38,.03)}

/* User area header */
.user-header-link{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--text)}
.user-header-link:hover{text-decoration:none;opacity:.8}
.user-area{display:flex;align-items:center;gap:.5rem;flex-shrink:0;font-size:.85rem}
.btn-admin-link{padding:.3rem .6rem;font-size:.8rem;font-weight:600;color:var(--red)!important;border:1px solid rgba(220,38,38,.3);border-radius:var(--radius);text-decoration:none!important;transition:all .15s}
.btn-admin-link:hover{background:rgba(220,38,38,.08)}

/* Vote box */
.article-header-top{display:flex;gap:1.2rem;align-items:flex-start}
.article-header-text{flex:1;min-width:0}
.vote-box{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem 0;flex-shrink:0;min-width:44px}
.vote-btn{background:none;border:none;cursor:pointer;padding:.2rem;border-radius:4px;color:var(--dimmer);transition:all .15s;display:flex;align-items:center;justify-content:center}
.vote-btn:hover{color:var(--accent);background:var(--accent-bg)}
.vote-btn svg{fill:currentColor}
.vote-btn.vote-up.voted{color:var(--green)}
.vote-btn.vote-down.voted{color:var(--red)}
.vote-score{font-size:1.1rem;font-weight:700;color:var(--text);line-height:1}
.vote-detail{font-size:.7rem;color:var(--dimmer);white-space:nowrap}

/* Comments */
.comments-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 2rem;margin-top:1rem;box-shadow:var(--shadow)}
.comments-title{font-size:1.15rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bg3)}
.comments-empty{color:var(--dimmer);font-size:.9rem;padding:.5rem 0}
.comments-login-hint{color:var(--dimmer);font-size:.9rem;margin-bottom:1rem;font-style:italic}
.comment{padding:.7rem 0;border-bottom:1px solid var(--bg3)}
.comment:last-child{border-bottom:none}
.comment-nested{margin-left:1.5rem;padding-left:1rem;border-left:2px solid var(--bg4);border-bottom:none}
.comment-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.comment-author{font-weight:600;font-size:.9rem;color:var(--text)}
.comment-author:hover{color:var(--accent);text-decoration:none}
.comment-date{font-size:.75rem;color:var(--dimmer)}
.comment-body{font-size:.93rem;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}
.comment-deleted{color:var(--dimmer);font-style:italic}
.comment-actions{display:flex;gap:.5rem;margin-top:.3rem}
.comment-actions button{background:none;border:none;font-size:.78rem;color:var(--dimmer);cursor:pointer;padding:.1rem .3rem;border-radius:3px;font-family:var(--sans);transition:all .15s}
.comment-actions button:hover{color:var(--accent);background:var(--accent-bg)}
/* Comment votes */
.comment-content-row{display:flex;gap:.5rem;align-items:flex-start}
.comment-vote{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0;min-width:24px;padding-top:.1rem}
.cv-btn{background:none;border:none;cursor:pointer;font-size:.7rem;color:var(--dimmer);padding:0;line-height:1;transition:color .15s}
.cv-btn:hover{color:var(--accent)}
.cv-up.cv-voted{color:var(--green)}
.cv-down.cv-voted{color:var(--red)}
.cv-score{font-size:.8rem;font-weight:700;color:var(--dim);line-height:1.3}

.comment-form{margin-bottom:1rem}
.comment-form textarea{width:100%;margin-bottom:.4rem;font-family:var(--sans);font-size:.9rem;resize:vertical;min-height:60px}
.comment-form .btn-primary{padding:.4rem 1rem;font-size:.85rem}
.comment-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.comment-form-btns{display:flex;align-items:center;gap:.3rem}
.comment-form-btns .upload-btn{margin-bottom:0}
.comment-form-btns .upload-btn label{padding:.25rem .5rem;font-size:.9rem}
.emoji-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:.25rem .5rem;cursor:pointer;font-size:.9rem;transition:all .15s}
.emoji-toggle:hover{border-color:var(--accent);background:var(--accent-bg)}
.emoji-picker{display:none;flex-wrap:wrap;gap:.3rem;padding:.5rem;margin-top:.4rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow2);max-width:320px}
.emoji-picker.show{display:flex}
.emoji-item{cursor:pointer;font-size:1.3rem;padding:.2rem .3rem;border-radius:4px;transition:background .1s;line-height:1}
.emoji-item:hover{background:var(--accent-bg)}
.comment-img{max-width:100%;max-height:400px;border-radius:var(--radius);margin:.3rem 0;display:block}
.reply-form{margin-top:.4rem}

/* Search results page */
.search-count{font-size:.9rem;color:var(--dimmer);margin-bottom:1rem}
.search-no-results{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center}
.search-no-results p{margin-bottom:.5rem}
.search-suggestions{text-align:left;display:inline-block;margin-top:.5rem}
.search-suggestions ul{margin:.3rem 0 0 1.5rem;color:var(--dim);font-size:.9rem}
.search-results-list{display:flex;flex-direction:column;gap:.5rem}
.search-result-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;transition:border-color .15s}
.search-result-item:hover{border-color:var(--accent)}
.search-result-title{font-size:1.1rem;font-weight:600}
.search-result-snippet{font-size:.88rem;color:var(--dim);margin-top:.3rem;line-height:1.5}
.search-result-snippet mark{background:var(--accent-bg);color:var(--accent);padding:0 2px;border-radius:2px}
.search-result-meta{font-size:.78rem;color:var(--dimmer);margin-top:.3rem}

/* Notifications */
.notif-area{flex-shrink:0}
.notif-bell-wrap{position:relative}
.notif-bell{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.3rem;position:relative;line-height:1}
.notif-badge{position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;font-size:.65rem;font-weight:700;padding:.1rem .35rem;border-radius:10px;min-width:16px;text-align:center;line-height:1.2}
.notif-dropdown{display:none;position:absolute;top:100%;right:0;width:360px;max-height:450px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow2);z-index:300;margin-top:6px}
.notif-dropdown.show{display:block}
.notif-header-bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-bottom:1px solid var(--bg3);font-weight:600;font-size:.85rem}
.notif-header-bar button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.8rem;font-family:var(--sans)}
.notif-header-bar button:hover{text-decoration:underline}
.notif-item{display:flex;gap:.6rem;padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid var(--bg3);transition:background .1s;align-items:flex-start}
.notif-item:hover{background:var(--accent-bg)}
.notif-item.notif-read{opacity:.6}
.notif-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.notif-text{font-size:.83rem;line-height:1.4;flex:1;min-width:0}
.notif-text b{font-weight:600}
.notif-snippet{color:var(--dim);font-size:.78rem;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-time{color:var(--dimmer);font-size:.72rem;margin-top:.2rem}
.notif-empty{padding:1.5rem;text-align:center;color:var(--dimmer);font-size:.9rem}

/* Chat widget */
.chat-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:500}
.chat-toggle{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,99,235,.35);transition:transform .15s,box-shadow .15s;position:relative}
.chat-toggle:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(37,99,235,.45)}
.chat-icon{line-height:1}
.chat-online{position:absolute;top:-2px;right:-2px;background:var(--green);color:#fff;font-size:.6rem;font-weight:700;min-width:18px;height:18px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg2)}
.chat-popup{display:none;position:absolute;bottom:62px;right:0;width:360px;height:480px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.15);flex-direction:column;overflow:hidden}
.chat-popup.show{display:flex}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;flex-shrink:0}
.chat-online-label{font-size:.75rem;font-weight:400;opacity:.85}
.chat-close{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:0;line-height:1;opacity:.8}
.chat-close:hover{opacity:1}
.chat-messages{flex:1;overflow-y:auto;padding:.6rem;display:flex;flex-direction:column;gap:.3rem}
.chat-msg{display:flex;gap:.4rem;align-items:flex-start;max-width:90%}
.chat-msg-mine{align-self:flex-end;flex-direction:row-reverse}
.chat-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chat-avatar-ph{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
.chat-msg-body{background:var(--bg3);border-radius:10px;padding:.4rem .7rem;max-width:100%;min-width:0}
.chat-msg-mine .chat-msg-body{background:var(--accent-bg)}
.chat-msg-header{display:flex;gap:.4rem;align-items:baseline;margin-bottom:.1rem}
.chat-msg-name{font-size:.75rem;font-weight:600;color:var(--accent)}
.chat-msg-mine .chat-msg-name{color:var(--dim)}
.chat-msg-time{font-size:.65rem;color:var(--dimmer)}
.chat-msg-text{font-size:.85rem;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.chat-role-admin .chat-msg-name{color:var(--red)}
.chat-role-moderator .chat-msg-name{color:var(--orange)}
.chat-input-area{display:flex;gap:.3rem;padding:.5rem;border-top:1px solid var(--border);flex-shrink:0;align-items:center}
.chat-input-area>input{flex:1;padding:.5rem .7rem;border:1px solid var(--border);border-radius:20px;font-size:.85rem;font-family:var(--sans);background:var(--bg3);min-width:0}
.chat-input-area>input:focus{outline:none;border-color:var(--accent);background:var(--bg2)}
.chat-input-area>button{background:var(--accent);color:#fff;border:none;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-input-area>button:hover{background:var(--accent2)}
.chat-input-btns{display:flex;gap:.1rem;flex-shrink:0}
.chat-btn-emoji{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:.2rem;border-radius:4px;transition:background .1s;line-height:1}
.chat-btn-emoji:hover{background:var(--bg3)}
.chat-upload-btn{margin-bottom:0}
.chat-upload-btn label{padding:.2rem .3rem;font-size:1.1rem;border:none;background:none;line-height:1}
.chat-upload-btn label:hover{background:var(--bg3);border-radius:4px}

/* Chat emoji picker */
.chat-emoji-picker{display:none;flex-wrap:wrap;gap:.2rem;padding:.4rem;background:var(--bg2);border-top:1px solid var(--border);max-height:120px;overflow-y:auto}
.chat-emoji-picker.show{display:flex}
.chat-emoji-picker .emoji-item{font-size:1.2rem;padding:.15rem .25rem}

/* Chat reply preview */
.chat-reply-preview{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;background:var(--bg3);border-top:1px solid var(--border);font-size:.8rem}
.chat-reply-preview-body{flex:1;min-width:0;overflow:hidden}
.chat-reply-preview-name{font-weight:600;color:var(--accent);margin-right:.4rem}
.chat-reply-preview-text{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-reply-cancel{background:none;border:none;cursor:pointer;font-size:.9rem;color:var(--dimmer);padding:.1rem .3rem;flex-shrink:0;line-height:1}
.chat-reply-cancel:hover{color:var(--red)}

/* Chat reply quote in message */
.chat-reply-quote{background:var(--bg4);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:.2rem .5rem;margin-bottom:.3rem;font-size:.75rem;cursor:pointer;overflow:hidden;max-height:2.5em}
.chat-reply-quote:hover{background:var(--border)}
.chat-reply-author{font-weight:600;color:var(--accent);margin-right:.3rem}
.chat-reply-text{color:var(--dim)}

/* Chat message image */
.chat-msg-img{max-width:200px;max-height:150px;border-radius:8px;margin-top:.2rem;cursor:pointer;display:block}

/* Chat reply button */
.chat-msg-actions{display:flex;gap:.3rem;margin-top:.1rem}
.chat-reply-btn{background:none;border:none;cursor:pointer;font-size:.7rem;color:var(--dimmer);padding:0 .2rem;line-height:1;opacity:0;transition:opacity .15s}
.chat-msg:hover .chat-reply-btn{opacity:1}
.chat-reply-btn:hover{color:var(--accent)}

/* Chat message highlight on scroll-to */
.chat-msg-highlight{background:var(--accent-bg);border-radius:6px;transition:background .3s}

/* Chat avatar clickable */
.chat-avatar-click{cursor:pointer}
.chat-avatar-click:hover{opacity:.8}

/* User card popup */
.user-card-popup{position:fixed;width:280px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:600;overflow:hidden;animation:userCardIn .15s ease-out}
@keyframes userCardIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.user-card-inner{padding:1rem}
.user-card-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;cursor:pointer;font-size:.85rem;color:var(--dimmer);line-height:1;padding:.2rem}
.user-card-close:hover{color:var(--text)}
.user-card-header{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem}
.user-card-header .avatar-lg{width:52px;height:52px;font-size:1.5rem}
.user-card-info{flex:1;min-width:0}
.user-card-name{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.user-card-username{font-size:.8rem;color:var(--dimmer)}
.user-card-bio{font-size:.82rem;color:var(--dim);line-height:1.4;margin-bottom:.5rem;white-space:pre-wrap;max-height:3em;overflow:hidden}
.user-card-stats{font-size:.75rem;color:var(--dimmer);margin-bottom:.5rem}
.user-card-link{display:block;text-align:center;padding:.4rem;background:var(--accent-bg);color:var(--accent);border-radius:var(--radius);font-size:.83rem;font-weight:600;text-decoration:none;transition:background .15s}
.user-card-link:hover{background:rgba(37,99,235,.15);text-decoration:none}

@media(max-width:768px){
  .vote-box{flex-direction:row;gap:.5rem;min-width:auto}
  .article-header-top{flex-direction:column;gap:.5rem}
  .comment-nested{margin-left:.7rem;padding-left:.7rem}
  .comments-section{padding:1rem}
  .chat-popup{width:calc(100vw - 2rem);right:-1rem;height:400px}
  .notif-dropdown{width:calc(100vw - 2rem);right:-3rem}
}