/* 活动挑战 challenge-hub v1（Change C）前端样式。B2 浅色，自包含，圆角用 .b2-radius。 */
.koi-ch-wrap .content-area { width: 100%; max-width: 100%; }
#koi-challenge-app { padding: 8px 4px 40px; }
.koi-ch-loading, .koi-ch-empty { text-align: center; color: #9aa0aa; font-size: 14px; padding: 48px 0; }

/* 列表 */
.koi-ch-list-head h1 { font-size: 22px; font-weight: 800; margin: 8px 4px 16px; color: #1f2430; }
.koi-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.koi-ch-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,23,42,.08); overflow: hidden; text-decoration: none; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { .koi-ch-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); transform: translateY(-2px); } }
.koi-ch-card-cover { display: block; width: 100%; height: 120px; background: #eef0f3 center/cover no-repeat; }
.koi-ch-card-noimg { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.koi-ch-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.koi-ch-card-title { font-size: 15px; font-weight: 700; color: #1f2430; display: flex; align-items: center; gap: 8px; }
.koi-ch-card-desc { font-size: 12.5px; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.koi-ch-card-meta { font-size: 12px; color: #9aa0a6; }

/* 阶段徽章 */
.koi-ch-phase { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.koi-ch-phase-active { background: #e7f7ed; color: #0a6b2b; }
.koi-ch-phase-upcoming { background: #eef2ff; color: #3858e9; }
.koi-ch-phase-ended { background: #f1f2f4; color: #8c8f94; }

/* 详情 */
.koi-ch-detail { max-width: 900px; margin: 0 auto; }
.koi-ch-back { display: inline-block; margin: 4px 0 12px; font-size: 13px; color: #6b7280; text-decoration: none; }
.koi-ch-back:hover { color: #3858e9; }
.koi-ch-banner { position: relative; height: 200px; background: #2b2f36 center/cover no-repeat; overflow: hidden; }
.koi-ch-banner-mask { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.koi-ch-banner-mask h1 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.koi-ch-banner-meta { display: flex; align-items: center; gap: 10px; }
.koi-ch-time { color: rgba(255,255,255,.9); font-size: 12.5px; }
.koi-ch-intro { font-size: 14.5px; line-height: 1.7; color: #2b2f36; margin: 16px 2px; }
.koi-ch-rules { margin: 16px 2px; }
.koi-ch-rules h3, .koi-ch-parts h3 { font-size: 14px; font-weight: 700; color: #1f2430; margin: 0 0 8px; }
.koi-ch-rules p { font-size: 13.5px; line-height: 1.7; color: #4b5563; white-space: pre-wrap; margin: 0; }

/* 投稿入口 */
.koi-ch-join { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 2px; padding: 14px 16px; background: #f7f8fa; border: 1px solid #eceef0; border-radius: 12px; }
.koi-ch-join-btn { background: var(--b2color, #ff3a55); color: #fff; font-size: 14px; font-weight: 700; padding: 9px 22px; text-decoration: none; border: 0; cursor: pointer; }
.koi-ch-join-btn:hover { filter: brightness(1.05); }
.koi-ch-join-tip { font-size: 12.5px; color: #6b7280; }
.koi-ch-tagchip { color: #3858e9; cursor: pointer; font-weight: 700; }

/* 参与作者 */
.koi-ch-parts { margin: 18px 2px; }
.koi-ch-parts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.koi-ch-part-av { display: block; width: 38px; height: 38px; border-radius: 50%; background: #eef0f3 center/cover no-repeat; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* tabs + 作品 */
.koi-ch-tabs { display: flex; gap: 22px; border-bottom: 1px solid #eceef0; margin: 18px 2px 16px; }
.koi-ch-tab { padding: 8px 0; font-size: 14px; font-weight: 600; color: #9aa0a6; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.koi-ch-tab.active { color: #1f2430; border-bottom-color: var(--b2color, #ff3a55); }
/* 作品区：B2 原生 post-2 卡片（服务端渲染）+ Packery 瀑布。只需补 li 列宽（B2 原走内联样式，此处由 CSS 给）。 */
.koi-ch-works .post-list { margin: 0; }
.koi-ch-native ul.b2_gap { margin: 0; }
.koi-ch-native ul.b2_gap > li { width: 33.333%; }
@media (max-width: 980px) { .koi-ch-native ul.b2_gap > li { width: 50%; } }
@media (max-width: 600px) { .koi-ch-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .koi-ch-banner { height: 160px; } .koi-ch-native ul.b2_gap > li { width: 50%; } }
.koi-ch-more { text-align: center; padding: 20px 0; }
.koi-ch-more-btn { border: 1px solid #d6dae0; background: #fff; color: #4b5563; border-radius: 999px; padding: 8px 24px; font-size: 13px; cursor: pointer; }
.koi-ch-more-btn:hover { border-color: var(--b2color, #ff3a55); color: var(--b2color, #ff3a55); }