/* Topic directory and topic detail only; existing homepage topic cards stay unchanged. */
.front-ui .topic-catalog-page{width:var(--community-shell);max-width:1360px;margin:26px auto 44px;min-width:0;color:#25392d}
.front-ui .topic-catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 2px 22px;margin:0}
.front-ui .topic-catalog-heading h1{font-size:30px;font-weight:750;line-height:1.35;letter-spacing:-.03em;color:#172d20;margin:0}
.front-ui .topic-catalog-heading p{margin:8px 0 0;font-size:14px;line-height:1.7;color:#758077}
.front-ui .topic-catalog-heading p:empty{display:none}
.front-ui .topic-catalog-total{flex-shrink:0;font-size:13px;color:#6e8274;line-height:1.5;border:1px solid #dce6de;background:#fff;padding:7px 12px;border-radius:7px;white-space:nowrap}
.front-ui .topic-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.front-ui .topic-catalog-card{display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:20px;padding:20px;min-width:0;background:#fff;border:1px solid #dfe7e1;border-radius:12px;color:inherit;text-decoration:none;box-shadow:0 3px 12px #1f442a03;transition:border-color .15s ease,box-shadow .15s ease}
.front-ui .topic-catalog-card:hover{border-color:#a4bbaa;box-shadow:0 7px 20px #21432b0a}
.front-ui .topic-catalog-art{position:relative;display:block;width:156px;aspect-ratio:3/2;overflow:hidden;border-radius:8px;background:#122b3c;flex-shrink:0}
.front-ui .topic-catalog-art img{position:absolute;display:block;width:202%;height:202%;max-width:none;object-fit:fill;margin:0;left:0;top:-101%;border:0}
.front-ui [data-topic-name="AI 工程实践"] .topic-catalog-art img{left:0;top:0}
.front-ui [data-topic-name="云原生与架构"] .topic-catalog-art img{left:-101%;top:0}
.front-ui [data-topic-name="开发者成长"] .topic-catalog-art img{left:-101%;top:-101%}
.front-ui .topic-catalog-copy{display:flex;flex-direction:column;min-width:0;gap:7px}
.front-ui .topic-catalog-copy h2{margin:0;font-size:20px;font-weight:700;line-height:1.5;letter-spacing:-.02em;color:#233f2c;overflow-wrap:anywhere}
.front-ui .topic-catalog-copy p{margin:0;min-height:3.4em;font-size:14px;line-height:1.7;color:#748176;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.front-ui .topic-catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:#7c8a80;font-size:12px;line-height:1.5;flex-wrap:wrap}
.front-ui .topic-catalog-meta b{font-size:17px;font-weight:650;color:#46664e;font-variant-numeric:tabular-nums;margin-right:3px}
.front-ui .topic-catalog-open{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#456a50}
.front-ui .topic-catalog-open i{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #dfe8e1;border-radius:50%;font-style:normal;font-size:15px;color:#6b8873}
.front-ui .topic-catalog-card:hover .topic-catalog-open i{background:#edf4ed;border-color:#aec5b3;color:#294f36}
.front-ui .topic-catalog-empty{grid-column:1/-1;padding:52px 20px;background:#fff;border:1px solid #dfe7e1;border-radius:10px;text-align:center;color:#6c7c70}
.front-ui .topic-catalog-empty h2{margin:0;font-size:19px;color:#3b5844}
.front-ui .topic-catalog-empty p{margin:8px 0 18px;font-size:14px}
.front-ui .topic-catalog-empty a{display:inline-flex;gap:8px;padding:8px 12px;font-size:14px;border:1px solid #dce6de;border-radius:6px;color:#3a6045}
.front-ui .topic-catalog-pagination{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.front-ui .topic-catalog-pagination>a,.front-ui .topic-catalog-pagination>span{display:inline-flex;align-items:center;gap:5px;justify-content:center;min-height:40px;padding:8px 13px;font-size:13px;line-height:1.5;border:1px solid #dce6de;border-radius:7px;background:#fff;color:#47614e;text-decoration:none}
.front-ui .topic-catalog-pagination>a:hover{background:#edf4ee;border-color:#abc1b1}
.front-ui .topic-catalog-pagination>span[aria-disabled="true"]{background:#f7f9f7;border-color:#e7ede8;color:#a0aba3}
.front-ui .topic-catalog-pagination>.topic-catalog-page-number{border:0;background:none;color:#7a877e}
.front-ui .topic-catalog-page-number b{color:#385841}
.front-ui .topic-catalog-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:13px;line-height:1.5;color:#879289}
.front-ui .topic-catalog-breadcrumb a{color:#52745b;text-decoration:none}
.front-ui .topic-catalog-breadcrumb a:hover{text-decoration:underline}
.front-ui .topic-catalog-hero{display:flex;align-items:center;gap:24px;margin:0 0 20px;padding:24px;background:#fff;border:1px solid #dfe7e1;border-radius:12px;min-width:0}
.front-ui .topic-catalog-hero .topic-catalog-art{width:174px}
.front-ui .topic-catalog-hero-copy{flex:1;min-width:0}
.front-ui .topic-catalog-label{display:block;font-size:12px;font-weight:550;line-height:1.5;color:#6f8b75;margin-bottom:5px}
.front-ui .topic-catalog-hero h1{font-size:28px;font-weight:750;line-height:1.4;color:#1d3726;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.front-ui .topic-catalog-hero p{font-size:14px;line-height:1.75;color:#748176;margin:7px 0 10px;overflow-wrap:anywhere}
.front-ui .topic-catalog-hero-count{font-size:12px;color:#86928a}
.front-ui .topic-catalog-hero-count b{color:#52735a;font-weight:650}
.front-ui .topic-catalog-submit{background:#294f36;border-color:#294f36;color:#fff;gap:10px;border-radius:7px;box-shadow:none;flex-shrink:0;font-size:14px;white-space:nowrap}
.front-ui .topic-catalog-submit:hover{background:#1b3b26}
.front-ui .topic-catalog-banner:empty{display:none}
.front-ui .topic-catalog-banner>.article-ad{margin:0 0 20px;border-radius:9px;overflow:hidden}
/* Advertisement dimensions are enforced centrally by list-ad-limits.css. */
@media(max-width:1100px){.front-ui .topic-catalog-card{grid-template-columns:124px minmax(0,1fr);gap:16px;padding:18px}.front-ui .topic-catalog-art{width:124px}.front-ui .topic-catalog-copy h2{font-size:18px}.front-ui .topic-catalog-hero{gap:18px;padding:20px}.front-ui .topic-catalog-hero .topic-catalog-art{width:150px}}
@media(max-width:760px){.front-ui .topic-catalog-page{margin:18px auto 28px}.front-ui .topic-catalog-heading{align-items:flex-start;gap:12px;padding-bottom:18px}.front-ui .topic-catalog-heading h1{font-size:25px}.front-ui .topic-catalog-heading p{font-size:13px;line-height:1.7;margin-top:7px}.front-ui .topic-catalog-total{padding:6px 9px;font-size:12px}.front-ui .topic-catalog-grid{grid-template-columns:minmax(0,1fr);gap:12px}.front-ui .topic-catalog-card{grid-template-columns:112px minmax(0,1fr);padding:16px;gap:16px;border-radius:9px}.front-ui .topic-catalog-art{width:112px}.front-ui .topic-catalog-copy h2{font-size:18px}.front-ui .topic-catalog-copy p{font-size:13px;min-height:0}.front-ui .topic-catalog-meta{margin-top:4px}.front-ui .topic-catalog-meta b{font-size:15px}.front-ui .topic-catalog-open{gap:5px}.front-ui .topic-catalog-open i{width:23px;height:23px}.front-ui .topic-catalog-hero{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:start;gap:14px;padding:18px;margin-bottom:16px}.front-ui .topic-catalog-hero .topic-catalog-art{width:100px;margin-top:3px}.front-ui .topic-catalog-hero h1{font-size:23px}.front-ui .topic-catalog-hero p{font-size:13px;margin:6px 0 8px}.front-ui .topic-catalog-submit{grid-column:1/-1;justify-self:start;min-height:36px;padding:7px 12px;font-size:13px}.front-ui .topic-catalog-label{font-size:12px}.front-ui .topic-catalog-banner>.article-ad{margin-bottom:16px}.front-ui .topic-catalog-pagination{gap:6px;margin-top:18px}.front-ui .topic-catalog-pagination>a,.front-ui .topic-catalog-pagination>span{padding:8px 10px;font-size:12px}.front-ui .topic-catalog-empty{padding:38px 18px}}
@media(max-width:430px){.front-ui .topic-catalog-card{grid-template-columns:88px minmax(0,1fr);gap:13px;padding:14px}.front-ui .topic-catalog-art{width:88px}.front-ui .topic-catalog-copy h2{font-size:17px}.front-ui .topic-catalog-open{font-size:12px}.front-ui .topic-catalog-open i{display:none}.front-ui .topic-catalog-hero{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:16px}.front-ui .topic-catalog-hero .topic-catalog-art{width:76px}.front-ui .topic-catalog-hero h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){.front-ui .topic-catalog-card{transition:none}}