#page-qa{
width: 100%;
height: 100%;
flex-direction: column;
}
#page-qa .qa-wrap{
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
#page-qa .qa-header{
flex: 0 0 auto;
padding: 12px 16px;
border-bottom: 1px solid var(--border, #2a2a30);
background: var(--surface-1, #1a1a1f);
}
#page-qa .qa-body{
flex: 1 1 auto;
overflow-y: auto;
padding: 16px;
background: var(--surface-0, #0f0f12);
}
#page-qa .qa-loading,
#page-qa .qa-empty,
#page-qa .qa-empty-replies{
text-align: center;
padding: 40px 16px;
color: var(--text-muted, #888);
font-size: 14px;
}




#page-qa .qa-cat-bar{
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
}

#page-qa .qa-cat-chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: transparent;
color: var(--text2);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-base);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1.4;
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: all .15s;
}
#page-qa .qa-cat-chip:hover{
background: transparent;
color: var(--text);
border-color: var(--text3);
}
#page-qa .qa-cat-chip.active{
background: rgba(230,126,34,0.08);
color: var(--accent);
border-color: var(--accent);
}
#page-qa .qa-cat-chip .qa-cat-dot{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}

#page-qa .qa-cat-chip-admin{


background: transparent;
border-color: var(--border);
color: var(--text3);
}
#page-qa .qa-cat-chip-admin:hover{
background: transparent;
color: var(--accent);
border-color: var(--accent);
}





#page-qa .qa-list{
display: flex;
flex-direction: column;
gap: 10px;
max-width: 1300px;
margin: 0 auto;
}

#page-qa .qa-card{
padding: 7px 16px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: background .12s, border-color .12s, transform .08s;
}
#page-qa .qa-card:hover{
background: var(--bg3);
border-color: var(--text3);
}
#page-qa .qa-card.pinned{
border-color: var(--accent);
border-width: 1px 1px 1px 3px;
}
#page-qa .qa-card.private{
border-style: dashed;
}
#page-qa .qa-card.closed{
opacity: 0.65;
}
#page-qa .qa-card-head{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
#page-qa .qa-card-title{
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
margin-bottom: 3px;
word-break: break-word;
}
#page-qa .qa-card-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--text3);
}
#page-qa .qa-card-meta .qa-meta-sep{
margin: 0 2px;
color: var(--text3);
opacity: 0.5;
}




#page-qa .qa-cat-tag{
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
#page-qa .qa-cat-tag-none{
background: transparent;
color: var(--text-faint, #555);
border: 1px dashed var(--border, #2a2a30);
}
#page-qa .qa-status{
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
#page-qa .qa-status-waiting{background: rgba(245, 158, 11, .15);color: #f59e0b;}
#page-qa .qa-status-answered{background: rgba(16, 185, 129, .15);color: #10b981;}
#page-qa .qa-status-closed{background: rgba(107, 114, 128, .2);color: #9ca3af;}

#page-qa .qa-pin-icon,
#page-qa .qa-private-icon{
font-size: 13px;
}




#page-qa .qa-detail{
max-width: 1300px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
#page-qa .qa-detail-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#page-qa .qa-back{
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border, #2a2a30);
color: var(--text, #e4e4e8);
border-radius: 6px;
font-size: 13px;
cursor: pointer;
}
#page-qa .qa-back:hover{
background: var(--surface-2, #2a2a30);
}
#page-qa .qa-admin-bar{
display: flex;
gap: 6px;
}
#page-qa .qa-adm-btn{
padding: 5px 12px;
background: var(--surface-2, #2a2a30);
color: var(--text, #e4e4e8);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
#page-qa .qa-adm-btn:hover{
background: var(--surface-3, #353541);
}
#page-qa .qa-adm-danger{
color: #ef4444;
border-color: rgba(239, 68, 68, .3);
}
#page-qa .qa-adm-danger:hover{
background: rgba(239, 68, 68, .1);
}

#page-qa .qa-detail-head{
padding: 16px;
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 8px;
}
#page-qa .qa-detail-head > *{
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
#page-qa .qa-detail-title{
display: block;
margin: 8px 0 8px 0;
font-size: 20px;
font-weight: 700;
color: var(--text, #e4e4e8);
line-height: 1.4;
word-break: break-word;
}
#page-qa .qa-detail-meta{
display: block;
margin-top: 8px;
font-size: 13px;
color: var(--text-muted, #888);
}

#page-qa .qa-detail-loading{
padding: 18px 16px;
font-size: 13px;
color: var(--text-muted, #888);
text-align: center;
letter-spacing: 1px;
}
#page-qa .qa-detail-body{
padding: 16px;
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 8px;
font-size: 14px;
line-height: 1.7;
color: var(--text, #e4e4e8);
white-space: pre-wrap;
word-break: break-word;
}




#page-qa .qa-replies-wrap{
margin-top: 8px;
}
#page-qa .qa-replies-title{
font-size: 13px;
color: var(--text-muted, #888);
margin-bottom: 10px;
padding-left: 4px;
}
#page-qa .qa-replies{
display: flex;
flex-direction: column;
gap: 10px;
}
#page-qa .qa-reply{
padding: 12px 14px;
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 8px;
position: relative;
}
#page-qa .qa-reply-admin_answer{
border-left: 3px solid #10b981;
background: rgba(16, 185, 129, .04);
}
#page-qa .qa-reply-asker_followup{
border-left: 3px solid var(--accent, #e67e22);
}
#page-qa .qa-reply-bystander_comment{
opacity: 0.85;
background: var(--surface-0, #0f0f12);
}
#page-qa .qa-reply-head{
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted, #888);
margin-bottom: 8px;
}
#page-qa .qa-kind{
padding: 1px 7px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
}
#page-qa .qa-kind-admin{background: rgba(16, 185, 129, .15);color: #10b981;}
#page-qa .qa-kind-followup{background: rgba(230, 126, 34, .15);color: var(--accent, #e67e22);}
#page-qa .qa-kind-bystander{background: rgba(107, 114, 128, .15);color: #9ca3af;}
#page-qa .qa-reply-author{
font-weight: 500;
color: var(--text, #e4e4e8);
}
#page-qa .qa-reply-del{
margin-left: auto;
padding: 2px 8px;
background: transparent;
border: 1px solid transparent;
color: var(--text-faint, #555);
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}
#page-qa .qa-reply-del:hover{
background: rgba(239, 68, 68, .1);
color: #ef4444;
border-color: rgba(239, 68, 68, .3);
}
#page-qa .qa-reply-body{
font-size: 14px;
line-height: 1.6;
color: var(--text, #e4e4e8);
white-space: pre-wrap;
word-break: break-word;
}




#page-qa .qa-composer{
padding: 12px;
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 8px;
margin-top: 12px;
}
#page-qa .qa-composer-hint{
font-size: 11px;
color: var(--text-muted, #888);
margin-bottom: 6px;
}
#page-qa .qa-composer-body{
width: 100%;
padding: 8px 10px;
background: var(--surface-0, #0f0f12);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
color: var(--text, #e4e4e8);
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 60px;
max-height: 220px;
field-sizing: content;
box-sizing: border-box;
}
#page-qa .qa-composer-body:focus{
outline: none;
border-color: var(--accent, #e67e22);
}
#page-qa .qa-composer-actions{
display: flex;
justify-content: flex-end;
margin-top: 8px;
}




#page-qa .qa-fab{
position: static;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 5px 12px;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
border-radius: 6px;
font-family: 'Space Grotesk','Microsoft YaHei',sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.4;
cursor: pointer;
box-shadow: none;
transition: filter .15s;
white-space: nowrap;
}
#page-qa .qa-fab:hover{
filter: brightness(1.1);
transform: none;
box-shadow: none;
}
#page-qa .qa-fab-plus{
font-size: 14px;
line-height: 1;
position: relative;
top: 1px;
}
#page-qa .qa-fab-text{letter-spacing: 0.3px;position: relative;top: 1px;}




.qa-btn-primary{
padding: 8px 18px;
background: var(--accent, #e67e22);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .12s;
}
.qa-btn-primary:hover:not(:disabled){
background: var(--accent-strong, #d35400);
}
.qa-btn-primary:disabled{
opacity: 0.5;
cursor: not-allowed;
}
.qa-btn-ghost{
padding: 8px 18px;
background: transparent;
color: var(--text, #e4e4e8);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.qa-btn-ghost:hover{
background: var(--surface-2, #2a2a30);
}





.qa-modal-mask{
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .65);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
}
.qa-modal-mask[hidden]{
display: none;
}
.qa-modal{
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 12px;
width: 100%;
max-width: 560px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.qa-modal-cat{
max-width: 720px;
}
.qa-modal-head{
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border, #2a2a30);
}
.qa-modal-head h3{
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--text, #e4e4e8);
}
.qa-modal-close{
background: transparent;
border: none;
color: var(--text-muted, #888);
font-size: 22px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.qa-modal-close:hover{color: var(--text, #e4e4e8);}
.qa-modal-body{
padding: 18px;
overflow-y: auto;
flex: 1 1 auto;
}
.qa-modal-foot{
padding: 12px 18px;
border-top: 1px solid var(--border, #2a2a30);
display: flex;
justify-content: flex-end;
gap: 8px;
}


.qa-field-label{
display: block;
font-size: 12px;
color: var(--text-muted, #888);
margin: 12px 0 6px;
}
.qa-field-label:first-child{margin-top: 0;}
.qa-field-input,
.qa-field-textarea{
width: 100%;
padding: 8px 10px;
background: var(--surface-0, #0f0f12);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
color: var(--text, #e4e4e8);
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
}
.qa-field-input:focus,
.qa-field-textarea:focus{
outline: none;
border-color: var(--accent, #e67e22);
}
.qa-field-textarea{
resize: vertical;
min-height: 120px;
max-height: 360px;
field-sizing: content;
}
.qa-field-checkbox{
display: flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-size: 13px;
color: var(--text, #e4e4e8);
cursor: pointer;
}
.qa-field-color{
width: 40px;
height: 32px;
padding: 2px;
background: var(--surface-0, #0f0f12);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
cursor: pointer;
}




.qa-cat-list{
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.qa-cat-row{
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--surface-0, #0f0f12);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
transition: background .12s, transform .08s;
}
.qa-cat-row.inactive{
opacity: 0.5;
}
.qa-cat-row.dragging{
opacity: 0.4;
cursor: grabbing;
}
.qa-cat-row.dragover{
border-color: var(--accent, #e67e22);
background: rgba(230, 126, 34, .08);
}
.qa-cat-grip{
cursor: grab;
color: var(--text-faint, #555);
font-size: 16px;
padding: 0 4px;
user-select: none;
}
.qa-cat-grip:active{cursor: grabbing;}
.qa-cat-row .qa-cat-dot{
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.qa-cat-name{
flex: 1;
padding: 5px 8px;
background: var(--surface-1, #1a1a1f);
border: 1px solid transparent;
border-radius: 4px;
color: var(--text, #e4e4e8);
font-size: 13px;
min-width: 100px;
}
.qa-cat-name:focus{
outline: none;
background: var(--surface-0, #0f0f12);
border-color: var(--accent, #e67e22);
}
.qa-cat-color{
width: 32px;
height: 28px;
padding: 2px;
background: var(--surface-1, #1a1a1f);
border: 1px solid var(--border, #2a2a30);
border-radius: 4px;
cursor: pointer;
}
.qa-cat-active{
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-muted, #888);
cursor: pointer;
}
.qa-cat-del{
padding: 5px 10px;
background: transparent;
border: 1px solid rgba(239, 68, 68, .3);
color: #ef4444;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.qa-cat-del:hover{
background: rgba(239, 68, 68, .1);
}
.qa-cat-new{
display: flex;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border, #2a2a30);
}
.qa-cat-new .qa-field-input{
flex: 1;
}




.qa-toast{
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
padding: 10px 18px;
background: var(--surface-2, #2a2a30);
color: var(--text, #e4e4e8);
border: 1px solid var(--border, #2a2a30);
border-radius: 8px;
font-size: 13px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
opacity: 0;
pointer-events: none;
z-index: 2000;
transition: opacity .2s, transform .2s;
}
.qa-toast.show{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.qa-toast-error{
background: rgba(239, 68, 68, .15);
border-color: rgba(239, 68, 68, .4);
color: #fca5a5;
}
.qa-toast-warn{
background: rgba(245, 158, 11, .15);
border-color: rgba(245, 158, 11, .4);
color: #fcd34d;
}




.qa-nav-badge{
display: inline-block;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #ef4444;
color: #fff;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
text-align: center;
line-height: 16px;
vertical-align: middle;
margin-left: 4px;
}
.qa-nav-badge[hidden]{
display: none;
}




@media (max-width: 640px){
#page-qa .qa-body{padding: 12px;}
#page-qa .qa-card{padding: 6px 12px;}
#page-qa .qa-card-title{font-size: 14px;}
#page-qa .qa-detail-title{font-size: 17px;}
#page-qa .qa-detail-head,
#page-qa .qa-detail-body{padding: 12px;}

#page-qa .qa-cat-chip-admin{margin-left: 0;}

.qa-modal{max-width: 100%;}
.qa-cat-row{
flex-wrap: wrap;
}
.qa-cat-name{min-width: 80px;}
}




.qa-img-btn{
font-size: 13px;
padding: 6px 12px;
}
.qa-img-preview{
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
margin-top: 8px;
background: var(--surface-0, #0f0f12);
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
}
.qa-img-thumb{
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.qa-img-loading{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2, #2a2a30);
color: var(--text-muted, #888);
border-radius: 4px;
}

.qa-img-status{
font-size: 12px;
color: var(--text-muted, #888);
}
.qa-img-x{
background: transparent;
border: 1px solid var(--border, #2a2a30);
color: var(--text-muted, #888);
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
line-height: 1;
}
.qa-img-x:hover{
border-color: #ef4444;
color: #ef4444;
}


.qa-composer.qa-drag-over,
#qa-ask-composer-wrap.qa-drag-over{
border-color: var(--accent, #e67e22);
background: rgba(230, 126, 34, .05);
}


#qa-ask-composer-wrap{
background: transparent;
border: 1px solid var(--border, #2a2a30);
border-radius: 6px;
padding: 8px;
}
#qa-ask-composer-wrap .qa-field-textarea{
border: none;
background: transparent;
padding: 0;
}
#qa-ask-composer-wrap .qa-field-textarea:focus{border: none;}
.qa-ask-img-bar{
display: flex;
justify-content: flex-start;
margin-top: 6px;
}


.qa-thread-img,
.qa-reply-img{
margin-top: 10px;
}
.qa-thread-img img,
.qa-reply-img img{
max-width: 300px;
max-height: 300px;
border-radius: 6px;
border: 1px solid var(--border, #2a2a30);
cursor: zoom-in;
}






.qa-img-preview{flex-wrap: wrap;align-items: flex-start;}
.qa-img-item{
position: relative;
width: 80px;
display: flex;
flex-direction: column;
gap: 4px;
}
.qa-img-item .qa-img-status{
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qa-img-item.is-error .qa-img-status{color: #ef4444;}
.qa-img-item .qa-img-x{
position: absolute;
top: -8px;
right: -8px;
width: 22px;
height: 22px;
font-size: 14px;
background: var(--surface-1, #1a1a1f);
}
.qa-img-count{
align-self: center;
margin-left: auto;
font-size: 12px;
color: var(--text-muted, #888);
}
.qa-thread-img.qa-imgs-multi,
.qa-reply-img.qa-imgs-multi{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.qa-imgs-multi img{
width: 120px;
height: 120px;
object-fit: cover;
}





.qa-lightbox{
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
animation: qa-lbIn 0.18s ease-out;
}
@keyframes qa-lbIn{
from{opacity: 0;}
to{opacity: 1;}
}
.qa-lightbox .qa-lb-img{
max-width: 95vw;
max-height: 95vh;
display: block;
cursor: default;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
.qa-lightbox .qa-lb-x{
position: fixed;
top: 20px;
right: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.qa-lightbox .qa-lb-x:hover{
background: rgba(255, 255, 255, 0.2);
}




.qa-fab-locked{
opacity: 0.6;
}
.qa-upsell-bar{
margin-top: 12px;
padding: 10px 14px;
border: 1px dashed var(--border, #3a3f4b);
border-radius: 8px;
font-size: 13px;
color: var(--text2, #9aa0ab);
text-align: center;
cursor: pointer;
transition: 0.15s;
}
.qa-upsell-bar:hover{
color: var(--text, #d1d4dc);
border-color: var(--accent, #e67e22);
}















#page-qa .qa-card.qa-card-unread{
box-shadow: inset 3px 0 0 0 #ef4444;
background: var(--bg3);
}
#page-qa .qa-card.qa-card-unread:hover{
border-color: #ef4444;
}
#page-qa .qa-card.qa-card-unread .qa-card-title{
font-weight: 700;
color: var(--text);
}

#page-qa .qa-unread-pill{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: rgba(239, 68, 68, .15);
color: #ef4444;
white-space: nowrap;
}
#page-qa .qa-unread-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: #ef4444;
flex: 0 0 auto;
}


html[data-theme="light"] #page-qa .qa-unread-pill{
background: rgba(220, 38, 38, .12);
color: #dc2626;
}
html[data-theme="light"] #page-qa .qa-unread-dot{background: #dc2626;}
html[data-theme="light"] #page-qa .qa-card.qa-card-unread{box-shadow: inset 3px 0 0 0 #dc2626;}
html[data-theme="light"] #page-qa .qa-card.qa-card-unread:hover{border-color: #dc2626;}