.cat-hero{background:linear-gradient(135deg,var(--bg-body) 0%,var(--bg-card) 100%);border-radius:var(--radius-lg);padding:18px;margin-bottom:20px;border:1px solid var(--border);text-align:left}
.cat-hero-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cat-icon-badge{width:46px;height:46px;background:linear-gradient(135deg,var(--secondary),#7AA080);color:#fff;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;flex-shrink:0}
.cat-hero h1{font-size:1.3rem;font-weight:800;color:var(--text);margin:0;flex:1;line-height:1.35}
.cat-hero>p{font-size:.95rem;color:var(--text-muted);line-height:1.65;margin:0}
.cat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cat-tag{font-size:.85rem;color:var(--secondary);background:var(--secondary-light);padding:4px 12px;border-radius:18px;border:1px solid rgba(107,155,112,0.18)}
.q-nav{background:var(--bg-card);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:20px;border:1px solid var(--border);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.q-nav::-webkit-scrollbar{display:none}
.q-nav a{flex-shrink:0;padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--secondary);background:var(--secondary-light);border:1px solid rgba(107,155,112,0.15);white-space:nowrap;transition:all .2s}
.q-nav a:hover,.q-nav a:active{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.sec-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-num{width:30px;height:30px;background:linear-gradient(135deg,var(--secondary),#7AA080);color:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;flex-shrink:0}
.sec-hd h2{font-size:1.2rem;font-weight:700;color:var(--text);margin:0}
.sec-hd .sec-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.sec-intro{font-size:.95rem;color:var(--text-muted);line-height:1.65;margin-bottom:18px}

.breadcrumb{font-size:.96rem;color:var(--text-muted);margin-bottom:14px;padding:8px 10px;background:transparent;border-radius:var(--radius-sm);display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--primary);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}

@media(min-width:640px){.cat-hero{padding:24px}.cat-hero h1{font-size:1.5rem}.cat-hero>p{font-size:1rem}}
@media(min-width:768px){.cat-hero{padding:28px}.cat-hero h1{font-size:1.65rem}}