/* ════════════════════════════════════════════════════════════════════════
 * ui-design-kb.css — 叨叨AI 设计知识库（真实在播 16 条 · 5 分类）
 * 仅用 var(--...) 令牌，自动适配主题。
 * ════════════════════════════════════════════════════════════════════════ */
.kb-wrap{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.kb-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-column:1/-1;}
.kb-filter{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;padding:4px 0 6px;}
.kb-filter-btn{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--border-light);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .18s ease;white-space:nowrap;}
.kb-filter-btn:hover{background:var(--bg-hover);color:var(--text-primary);}
.kb-filter-btn.active{background:var(--accent);border-color:var(--accent);color:var(--text-white);box-shadow:0 4px 14px var(--accent-glow);}
.kb-cat{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-glow);border-radius:999px;padding:2px 10px;margin-bottom:8px;align-self:flex-start;}
.kb-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg,16px);padding:16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;transition:border-color .2s ease,transform .12s ease;}
.kb-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.kb-topic{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.5;margin-bottom:8px;}
.kb-desc{font-size:12.5px;line-height:1.65;color:var(--text-secondary);flex:1;overflow:hidden;max-height:84px;}
.kb-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.kb-tag{font-size:11px;color:var(--accent);background:var(--accent-glow);border-radius:999px;padding:2px 9px;white-space:nowrap;}
.kb-acts{display:flex;gap:8px;margin-top:6px;}
.kb-btn{flex:1;text-align:center;padding:8px 0;border-radius:var(--radius);font-size:13px;cursor:pointer;border:1px solid var(--border-light);background:var(--bg-tertiary);color:var(--text-secondary);text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease;}
.kb-btn:hover{background:var(--bg-hover);}
.kb-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-white);box-shadow:0 4px 14px var(--accent-glow);}
.kb-btn.primary:hover{filter:brightness(1.08);}
.kb-copied{color:var(--success)!important;}
.k-src{font-size:11px;color:var(--text-muted);margin-bottom:6px;}
.k-empty{grid-column:1/-1;text-align:center;color:var(--text-muted);padding:40px 0;font-size:14px;}