/* 阿Q财会知识网 样式 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  background: linear-gradient(rgba(255,255,255,0.26), rgba(255,255,255,0.26)), url("../6e20342b480650f2d31b071c98762c6c.jpg") center center / cover fixed no-repeat;
  color: #24303f; line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1200px, calc(100% - 36px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.94); border-bottom: 1px solid rgba(226,232,238,0.7); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.brand { font-weight: 700; font-size: 1.2rem; color: #0f274f; white-space: nowrap; }
.header-points { flex: 1; text-align: center; font-weight: 600; color: #b8860b; white-space: nowrap; }
.points-summary { font-size: 1.3rem; font-weight: 700; color: #b8860b; margin: 16px 0 24px; }
.points-promo { display: flex; flex-direction: row; gap: 16px; max-width: 640px; align-items: flex-start; }
.points-promo img { flex: 1; min-width: 0; width: 100%; border-radius: 12px; display: block; }
@media (max-width: 720px) {
  .points-promo { flex-direction: column; max-width: 420px; }
}
.points-log { max-width: 560px; }
.points-log-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef2f7; font-size: 0.9rem; }
.points-log-item .pts-date { color: #7b8ca0; flex: 0 0 auto; }
.points-log-item .pts-reason { flex: 1; color: #24303f; }
.points-log-item .pts-amt { font-weight: 700; }
.points-log-item .pts-amt.plus { color: #2e8b57; }
.points-log-item .pts-amt.minus { color: #c0392b; }
.header-search-wrap { position: relative; flex: 1; display: flex; justify-content: center; }
.header-search { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.9); border: 1px solid #dce6f2; box-shadow: 0 10px 30px rgba(20, 80, 130, 0.08); }
.header-search input { flex: 1; border: none; outline: none; padding: 10px 12px; font-size: 0.95rem; color: #24303f; background: transparent; }
.header-search button { border: none; background: linear-gradient(135deg, #4b86b4, #6da7c9); color: #fff; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.header-search-hotwords { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: none; flex-wrap: wrap; gap: 10px; align-items: center; width: min(520px, calc(100vw - 40px)); padding: 14px; border-radius: 18px; background: rgba(255,255,255,0.96); border: 1px solid #dce6f2; box-shadow: 0 16px 42px rgba(23, 61, 116, 0.12); z-index: 25; }
.header-search-wrap.active .header-search-hotwords { display: flex; }
.header-search-hotwords span { font-size: 0.88rem; color: #5f7186; font-weight: 600; }
.header-search-hotwords a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: rgba(239,245,251,0.95); color: #2a5b9c; font-size: 0.84rem; border: 1px solid #dce6f2; }
.header-search-hotwords a:hover { background: rgba(255,255,255,0.95); }
.hero-search-area { padding: 120px 0 80px; text-align: center; }
.hero-slogan { margin: 0 0 28px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: #102640; letter-spacing: 0.02em; }
.slogan-blue { color: #2b6cb0; }
.hero-search { display: flex; align-items: center; gap: 10px; width: min(640px, 100%); margin: 0 auto; padding: 14px 16px; border-radius: 999px; background: rgba(255,255,255,0.95); border: 2px solid #dce6f2; box-shadow: 0 16px 44px rgba(20, 80, 130, 0.14); }
.hero-search input { flex: 1; border: none; outline: none; padding: 12px 14px; font-size: 1.15rem; color: #24303f; background: transparent; }
.hero-search button { border: none; background: linear-gradient(135deg, #4b86b4, #6da7c9); color: #fff; padding: 14px 28px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.hero-search .search-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; background: transparent; flex: 0 0 auto; }
.hero-search .search-icon-btn img { width: 44px; height: 44px; object-fit: contain; display: block; }
.main-nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.main-nav a { color: #4a6582; transition: color .2s; }
.main-nav a:hover { color: #0f274f; }
.nav-user-btn { border: none; background: linear-gradient(135deg, #355b9b, #0f274f); color: #fff; padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 12px 28px rgba(15, 36, 64, 0.16); transition: transform .2s, background .2s, box-shadow .2s; }
.nav-user-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, #1e3a72, #0f274f); box-shadow: 0 16px 36px rgba(15, 36, 64, 0.2); }
.nav-checkin-btn { border: none; background: linear-gradient(135deg, #7ac47a, #54b054); color: #fff; padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 12px 28px rgba(80, 160, 80, 0.2); transition: transform .2s, background .2s, box-shadow .2s; }
.nav-checkin-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, #54b054, #429a42); box-shadow: 0 16px 36px rgba(80, 160, 80, 0.24); }
.nav-user-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* ===== 首页三栏作品广场 ===== */
.home-feed { padding: 40px 0 64px; }
.feed-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.feed-cat { border: none; padding: 9px 18px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #e4eff9; color: #3a6699; transition: background .2s, color .2s, transform .15s; }
.feed-cat:hover { background: #cfe2f5; transform: translateY(-1px); }
.feed-cat.active { background: #b6d4f0; color: #1f4a7a; }
.feed-discuss-btn { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #4b86b4, #0f274f); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 18px rgba(15,39,79,0.25); }
.main-nav .feed-discuss-btn, .feed-discuss-btn:hover { color: #fff; }
.feed-discuss-btn:hover { transform: scale(1.1); box-shadow: 0 10px 26px rgba(15,39,79,0.35); }
.feed-layout { display: flex; flex-direction: column; gap: 28px; }
.feed-top-row { display: grid; grid-template-columns: 1fr 510px; gap: 16px; align-items: start; }
.feed-poster { position: sticky; top: 80px; height: 340px; border-radius: 16px; overflow: hidden; }
.poster-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; height: 100%; }
.poster-track::-webkit-scrollbar { display: none; }
.poster-dots { position: absolute; bottom: 50px; left: 14px; display: flex; gap: 8px; z-index: 2; }
.feed-poster::-webkit-scrollbar { display: none; }
.poster-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; }
.poster-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-slide-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; display: flex; flex-direction: column; align-items: flex-end; }
.poster-slide-info h3 { margin: 0; font-size: 0.95rem; text-align: right; }
.poster-slide-info span { font-size: 0.75rem; opacity: 0.85; text-align: right; }
.poster-dots { position: absolute; bottom: 50px; left: 14px; display: flex; gap: 8px; z-index: 2; }
.poster-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.poster-dot.active { background: #fff; transform: scale(1.3); }
.feed-column { display: flex; flex-direction: column; }
.feed-divider { border: none; height: 2px; background: linear-gradient(90deg, transparent, #b8d4f0, transparent); margin: 0 16px; }
.feed-column-body { padding: 14px 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* 三区统一左移 */
.feed-column--video, .feed-column--text, .feed-column--image { margin-left: calc((100vw - min(1200px, 100vw - 36px)) / -2); }

/* 视频卡片 */
.feed-column--video .feed-column-body { grid-template-columns: repeat(auto-fill, 224.75px); justify-content: start; }
.feed-column--video .video-card { width: 224.75px; border-radius: 14px; overflow: hidden; transition: transform .18s; position: relative; }
.feed-column--video .video-card:hover { transform: translateY(-2px); }
.video-card-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #1a1a2e; border-radius: 10px 10px 0 0; }
.video-card-cover-placeholder { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; background: #1a1a2e; border-radius: 10px 10px 0 0; color: #8899aa; font-size: 0.78rem; }
.feed-column--video .video-card-info { padding: 10px 12px 34px; }
.feed-column--video .video-card-info h3 { margin: 0 0 4px; font-size: 0.88rem; color: #11203a; }
.video-card-desc { margin: 0 0 5px; font-size: 0.78rem; color: #5a6d82; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-column--video .video-card-meta { display: flex; gap: 8px; font-size: 0.74rem; color: #6e7e93; position: absolute; bottom: 6px; left: 12px; }

/* 文字热榜 */
.feed-column--text .text-card { display: flex; gap: 8px; align-items: flex-start; padding: 12px 10px 32px; border-radius: 14px; transition: transform .15s; position: relative; }
.feed-column--text .text-card:hover { transform: translateY(-2px); }
.text-rank { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; color: #fff; background: linear-gradient(135deg, #9aafc9, #6e8ba8); }
.text-card:nth-child(1) .text-rank { background: linear-gradient(135deg, #e8a840, #d4842a); }
.text-card:nth-child(2) .text-rank { background: linear-gradient(135deg, #b0bcc9, #8492a6); }
.text-card:nth-child(3) .text-rank { background: linear-gradient(135deg, #c8946e, #a0724a); }
.text-card-content { flex: 1; min-width: 0; }
.text-card-content h3 { margin: 0 0 4px; font-size: 0.78rem; color: #11203a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-card-content p { margin: 0; font-size: 0.7rem; color: #6e7e93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.text-card-stats { display: flex; gap: 8px; font-size: 0.66rem; color: #95a5b8; position: absolute; bottom: 6px; left: 42px; }

/* 图文卡片 */
.feed-column--image .image-card { border-radius: 14px; overflow: hidden; transition: transform .18s; position: relative; }
.feed-column--image .image-card:hover { transform: translateY(-2px); }
.feed-column--image .image-card img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: cover; display: block; background: #f0f3f7; border-radius: 10px 10px 0 0; }
.image-card-info { padding: 8px 10px 30px; }
.image-card-info h3 { margin: 0 0 3px; font-size: 1rem; color: #11203a; }
.image-card-info p { margin: 0; font-size: 0.7rem; color: #6e7e93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.image-card-stats { display: flex; gap: 8px; font-size: 0.66rem; color: #8a99af; position: absolute; bottom: 6px; left: 10px; }
.user-panel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 18, 40, 0.6); padding: 24px; }
.user-panel-hidden { display: none; }
.user-panel-card { width: min(500px, 100%); max-height: 86vh; background: linear-gradient(180deg, rgba(255,255,255,0.98), #f6f9ff); border: 1px solid rgba(255,255,255,0.65); border-radius: 24px; box-shadow: 0 32px 90px rgba(14, 41, 81, 0.18); padding: 0 0 20px; position: relative; overflow: auto; }
.user-panel-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 116px; background: linear-gradient(135deg, #0f274f, #4b86b4); opacity: 0.95; }
.user-panel-header { position: relative; padding: 24px 24px 18px; color: #fff; }
.user-panel-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; }
.panel-subtitle { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.92); max-width: 90%; }
.user-account-card { display: flex; gap: 14px; align-items: center; padding: 16px 20px; margin: -12px 20px 0 20px; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(15, 36, 64, 0.08); position: relative; z-index: 2; }
.user-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #355b9b, #0f274f); color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; box-shadow: inset 0 -8px 14px rgba(0,0,0,0.12); }
.user-info h3 { margin: 0; font-size: 1.08rem; color: #102640; }
.user-info p { margin: 6px 0 0; color: #4a5e7f; line-height: 1.5; font-size: 0.9rem; }
.user-name-row { display: flex; align-items: center; gap: 10px; }
.user-edit-btn { border: 1px solid #cdd7e7; background: #f9fbfd; border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; color: #2a5b9c; cursor: pointer; }
.user-edit-btn:hover { background: #eef4fb; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.auth-tab { flex: 1; padding: 8px; border: 1px solid #cdd7e7; background: #f9fbfd; border-radius: 10px; cursor: pointer; font-size: 0.85rem; color: #4a5e7f; font-weight: 600; transition: background .15s, color .15s; }
.auth-tab.active { background: #0f274f; border-color: #0f274f; color: #fff; }
.user-points { font-size: 0.78rem; color: #b8860b; font-weight: 600; white-space: nowrap; }
.user-id { font-size: 0.78rem; color: #8a99af !important; }
.profile-edit-inline { position: relative; display: grid; gap: 10px; padding: 16px 20px; margin: 10px 20px 0; background: rgba(255,255,255,0.97); border-radius: 16px; border: 1px solid rgba(15, 36, 64, 0.08); }
.profile-edit-inline-header { display: flex; justify-content: space-between; align-items: center; }
.profile-avatar-id { font-size: 0.78rem; color: #7b8ca0; }
/* 问答库 */
.qa-link-btn { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; background: #eef4fb; color: #2a5b9c; font-weight: 700; text-decoration: none; font-size: 0.95rem; white-space: nowrap; border: 1px solid #dce6f2; transition: background .15s; }
.qa-link-btn:hover { background: #e0ecf8; }
.qa-filter { max-width: 700px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.qa-filter-chip { border: 1px solid #cdd7e7; background: #f9fbfd; border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 0.85rem; color: #2a3a56; transition: background .15s, border-color .15s; }
.qa-filter-chip:hover { background: #eef4fb; }
.qa-filter-chip.active { background: #4b86b4; border-color: #4b86b4; color: #fff; }
.qa-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.qa-item { position: relative; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); transition: transform .15s, box-shadow .15s; }
.qa-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18,52,86,0.1); }
.qa-item-link { text-decoration: none; color: inherit; display: block; }
.qa-item-title { font-size: 1rem; font-weight: 700; color: #11203a; margin-bottom: 8px; }
.qa-item-meta { display: flex; gap: 14px; font-size: 0.8rem; color: #8a99af; flex-wrap: wrap; }
.qa-item-like { position: absolute; right: 16px; bottom: 14px; border: none; background: none; padding: 0; font-size: 0.85rem; color: #6e8ba8; cursor: pointer; }
.qa-item-like:hover { color: #e0526d; }
.qa-ask-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.6); display: none; place-items: center; padding: 20px; }
.qa-ask-overlay.active { display: grid; }
.qa-ask-modal { position: relative; width: min(480px, 94vw); background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.qa-ask-modal h2 { margin: 0 0 16px; font-size: 1.15rem; color: #102640; }
.qa-ask-modal label { display: block; margin-bottom: 14px; font-size: 0.9rem; color: #3a4d62; }
.qa-ask-modal input, .qa-ask-modal textarea { width: 100%; border: 1px solid #cdd7e7; border-radius: 12px; padding: 12px; font-size: 0.95rem; color: #24303f; background: #f9fbfd; margin-top: 6px; }
.qa-ask-modal textarea { resize: vertical; min-height: 100px; }
.qa-ask-modal .btn { width: 100%; }
/* 问题详情 */
.qa-detail-question { padding: 24px; border-radius: 18px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); margin-bottom: 24px; }
.qa-detail-question h1 { margin: 0 0 12px; font-size: 1.3rem; color: #102640; }
.qa-detail-question .qa-content { color: #3a4d62; line-height: 1.8; white-space: pre-wrap; }
.qa-detail-meta { display: flex; gap: 14px; font-size: 0.82rem; color: #8a99af; margin-top: 14px; }
.qa-answer-box { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); margin-bottom: 24px; }
.qa-answer-box textarea { width: 100%; border: 1px solid #cdd7e7; border-radius: 12px; padding: 12px; font-size: 0.95rem; color: #24303f; background: #f9fbfd; resize: vertical; min-height: 80px; margin-bottom: 10px; }
.qa-answers-list { display: flex; flex-direction: column; gap: 12px; }
.qa-answer-item { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.85); border: 1px solid rgba(218,228,240,0.6); }
.qa-answer-content { color: #3a4d62; line-height: 1.7; white-space: pre-wrap; margin-bottom: 8px; }
.qa-answer-meta { display: flex; gap: 12px; align-items: center; font-size: 0.8rem; color: #8a99af; }
.qa-answer-like { border: none; background: none; padding: 0; font-size: 0.8rem; color: #6e8ba8; cursor: pointer; }
.qa-upload-row { display: flex; gap: 8px; margin-top: 6px; }
.qa-upload-btn { border: 1px dashed #cdd7e7; background: #f9fbfd; border-radius: 10px; padding: 8px 16px; cursor: pointer; color: #2a5b9c; font-size: 0.88rem; }
.qa-upload-btn:hover { background: #eef4fb; }
.qa-question-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.qa-question-images img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; cursor: pointer; }
/* 附件文件 */
.detail-files { margin-bottom: 20px; }
.detail-file-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.7); border: 1px solid rgba(218,228,240,0.6); margin-bottom: 8px; }
.detail-file-icon { font-size: 1.2rem; }
.detail-file-name { flex: 1; font-size: 0.88rem; color: #24303f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-file-view, .detail-file-download { font-size: 0.82rem; color: #2a5b9c; text-decoration: none; padding: 4px 10px; border-radius: 999px; background: #eef4fb; white-space: nowrap; }
.detail-file-view:hover, .detail-file-download:hover { background: #e0ecf8; }
.detail-file-price { font-size: 0.75rem; color: #b8860b; font-weight: 600; white-space: nowrap; }
.work-file-revenue { color: #b8860b; font-size: 0.82rem; margin-left: 8px; white-space: nowrap; }
.detail-file-redeem { font-size: 0.82rem; color: #fff; background: linear-gradient(135deg, #f0a020, #d9852b); border: none; padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.detail-file-redeem:hover { background: linear-gradient(135deg, #d9852b, #c07020); }
.detail-file-vip { font-size: 0.78rem; color: #b8860b; white-space: nowrap; }
/* 刷题页 */
.shuati-intro { max-width: 700px; margin: 0 auto; }
.shuati-card { text-align: center; padding: 32px 24px; border-radius: 20px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); margin-bottom: 24px; }
.shuati-icon { font-size: 3rem; margin-bottom: 12px; }
.shuati-icon img { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; }
.shuati-card h2 { margin: 0 0 10px; color: #102640; }
.shuati-card p { margin: 0; color: #5a697c; }
.shuati-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.shuati-feature { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); }
.shuati-feature h3 { margin: 0 0 8px; font-size: 1rem; color: #142f54; }
.shuati-feature p { margin: 0; color: #5a697c; font-size: 0.9rem; }
.shuati-howto { padding: 20px 24px; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); }
.shuati-howto h3 { margin: 0 0 12px; color: #102640; }
.shuati-howto ol { margin: 0; padding-left: 20px; color: #3e526d; }
.shuati-howto li { margin-bottom: 8px; }
.shuati-qrcode { text-align: center; margin-top: 24px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(218,228,240,0.7); }
.shuati-qrcode img { width: 180px; height: 180px; object-fit: contain; border-radius: 12px; }
.shuati-qrcode p { margin: 12px 0 0; color: #5a697c; font-size: 0.9rem; }
@media (max-width: 560px) { .shuati-features { grid-template-columns: 1fr; } }
.collections-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.collection-chip { border: 1px solid #cdd7e7; background: #f9fbfd; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 0.88rem; color: #2a3a56; transition: background .15s, border-color .15s; }
.collection-chip:hover { background: #eef4fb; }
.collection-chip.active { background: #4b86b4; border-color: #4b86b4; color: #fff; }
.collection-create-btn { display: inline-block; }
.profile-homepage { display: inline-flex; margin-top: 8px; color: #0f274f; font-weight: 700; text-decoration: none; position: relative; z-index: 3; pointer-events: auto; }
.logout-btn { display: inline-flex; margin-top: 8px; margin-left: 14px; border: 1px solid #f0c9c2; background: #fdf4f2; color: #b4452c; border-radius: 999px; padding: 3px 14px; font-size: 0.78rem; cursor: pointer; position: relative; z-index: 3; pointer-events: auto; }
.logout-btn:hover { background: #fbe7e1; }
.publish-panel { position: relative; display: grid; gap: 12px; padding: 18px 20px 0; margin: 14px 20px 0; background: rgba(255,255,255,0.97); border-radius: 20px; border: 1px solid rgba(15, 36, 64, 0.08); box-shadow: 0 12px 32px rgba(15, 36, 64, 0.08); }
.publish-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.publish-close-btn { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(15, 36, 64, 0.08); color: #0f274f; font-size: 1.1rem; cursor: pointer; }
.floating-add-btn { position: absolute; right: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #0f274f, #4b86b4); color: #fff; font-size: 1.8rem; border: none; cursor: pointer; box-shadow: 0 14px 32px rgba(15, 36, 64, 0.22); transition: transform .2s, box-shadow .2s; z-index: 5; pointer-events: auto; }
.floating-add-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(15, 36, 64, 0.26); }
/* 富文本编辑器 */
.rich-editor-toolbar { display: flex; gap: 8px; margin-bottom: 6px; }
.rich-editor-toolbar button { border: 1px solid rgba(109, 132, 170, 0.24); background: #f9fbff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem; color: #2a3a56; }
.rich-editor-toolbar button:hover { background: #eef4fb; }
.rich-editor { min-height: 160px; max-height: 360px; overflow-y: auto; border: 1px solid rgba(109, 132, 170, 0.24); border-radius: 16px; padding: 12px 14px; font-size: 0.96rem; color: #1f324f; background: #f9fbff; line-height: 1.7; }
.rich-editor:focus { outline: none; border-color: #4b78b4; box-shadow: 0 0 0 4px rgba(75, 120, 180, 0.12); }
.rich-editor:empty::before { content: attr(data-placeholder); color: #9aa7b8; pointer-events: none; }
.rich-editor img { max-width: 100%; border-radius: 10px; margin: 8px 0; display: block; }
.rich-editor p { margin: 0 0 10px; }

.user-panel label { display: grid; gap: 8px; font-size: 0.95rem; color: #2a3a56; }
.user-panel input, .user-panel textarea, .user-panel select { width: 100%; border: 1px solid rgba(109, 132, 170, 0.24); border-radius: 16px; padding: 12px 14px; font-size: 0.96rem; color: #1f324f; background: #f9fbff; transition: border-color .2s, box-shadow .2s; }
.user-panel input:focus, .user-panel textarea:focus, .user-panel select:focus { outline: none; border-color: #4b78b4; box-shadow: 0 0 0 4px rgba(75, 120, 180, 0.12); }
.sms-row { display: flex; gap: 8px; align-items: center; }
.sms-row input { flex: 1; }
.sms-send-btn { flex-shrink: 0; border: 1px solid #4b78b4; background: #eef4fb; color: #2a5b9c; border-radius: 999px; padding: 10px 14px; cursor: pointer; font-size: 0.85rem; white-space: nowrap; }
.sms-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.panel-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: #33415c; font-size: 1.35rem; cursor: pointer; box-shadow: 0 10px 25px rgba(14, 41, 81, 0.1); z-index: 20; }
.btn.btn-primary { border: none; background: #0f274f; color: #fff; padding: 12px 16px; border-radius: 16px; cursor: pointer; font-weight: 700; box-shadow: 0 12px 24px rgba(14, 41, 81, 0.14); transition: transform .2s, background .2s; }
.btn.btn-primary:hover { transform: translateY(-1px); background: #183560; }
.panel-note, .publish-feedback { margin: 0; color: #5c6d84; font-size: 0.92rem; }
.publish-feedback.success { color: #1e6d3d; }
.publish-feedback.error { color: #b02a37; }
.hidden { display: none; }

/* 图片灯箱 */
.lightbox-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.9); display: none; place-items: center; padding: 40px; cursor: pointer; }
.lightbox-overlay.active { display: grid; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 12px; cursor: default; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 28px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.6rem; cursor: pointer; transition: background .2s; line-height: 1; }
.lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* 封面编辑裁切器 */
.cover-editor-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.72); display: none; place-items: center; padding: 20px; }
.cover-editor-overlay.active { display: grid; }
.cover-editor-modal { background: #fff; border-radius: 20px; padding: 22px; width: min(480px, 94vw); box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.permission-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.72); display: none; place-items: center; padding: 20px; }
.permission-overlay.active { display: grid; }
.permission-modal { background: #fff; border-radius: 20px; padding: 26px 22px 20px; width: min(360px, 92vw); box-shadow: 0 24px 60px rgba(0,0,0,0.3); position: relative; text-align: center; }
.permission-close { position: absolute; top: 10px; right: 14px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(15,36,64,0.08); color: #0f274f; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.permission-close:hover { background: rgba(15,36,64,0.16); }
.permission-text { font-size: 0.95rem; color: #b4452c; font-weight: 600; margin: 6px 0 16px; }
.permission-img { max-width: 100%; max-height: 60vh; border-radius: 12px; object-fit: contain; }
.points-images-overlay { position: fixed; inset: 0; z-index: 450; background: rgba(0,0,0,0.7); display: none; place-items: center; padding: 20px; }
.points-images-overlay.active { display: grid; }
.points-images-modal { background: #fff; border-radius: 20px; padding: 20px; width: min(420px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.3); position: relative; display: flex; flex-direction: column; gap: 14px; }
.points-images-close { position: absolute; top: 10px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(15,36,64,0.08); color: #0f274f; font-size: 1.3rem; cursor: pointer; line-height: 1; z-index: 2; }
.points-images-modal img { width: 100%; border-radius: 12px; display: block; }
.like-heart { position: fixed; z-index: 500; width: 88px; height: 66px; pointer-events: none; transform: translate(-50%, -50%); animation: like-heart-float 4.1s ease-out forwards; }
@keyframes like-heart-float {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1.15); }
}
.cover-editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cover-editor-header h3 { margin: 0; font-size: 1.1rem; color: #102640; }
.cover-editor-close { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(15,36,64,0.08); color: #0f274f; font-size: 1.2rem; cursor: pointer; }
.cover-editor-upload-btn { display: block; width: 100%; padding: 10px; border: 1px dashed #cdd7e7; background: #f9fbfd; border-radius: 12px; cursor: pointer; color: #2a5b9c; font-size: 0.9rem; margin-bottom: 14px; }
.cover-editor-upload-btn:hover { background: #eef4fb; }
.cover-crop-area { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111; cursor: grab; margin-bottom: 8px; touch-action: none; }
.cover-crop-area:active { cursor: grabbing; }
.cover-crop-img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cover-editor-hint { font-size: 0.82rem; color: #7b8ca0; text-align: center; margin: 4px 0 14px; }
.cover-editor-actions { display: flex; gap: 10px; }
.cover-editor-actions .btn { flex: 1; }

/* 首页卡片可点击 */
.video-card, .text-card, .image-card { cursor: pointer; }

/* 作品详情页 */
.work-detail-wrap { max-width: 800px; margin: 0; margin-left: calc((min(1200px, calc(100vw - 36px)) - 100vw) / 2 + 16px); }
.work-detail-layout { display: flex; gap: 20px; align-items: flex-start; }
.detail-author-side { flex: 0 0 230px; position: sticky; top: 90px; }
.detail-comment-side { flex: 0 0 230px; position: sticky; top: 90px; }
.detail-author-info { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.detail-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #4b86b4, #0f274f); }
.detail-author-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #4b86b4, #0f274f); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.detail-author-name { font-weight: 700; color: #102640; font-size: 0.95rem; }
.detail-author-works { margin-top: 14px; }
.author-works-title { font-size: 0.85rem; color: #7b8ca0; font-weight: 600; margin-bottom: 8px; }
.author-work-item { display: block; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.6); text-decoration: none; color: inherit; margin-bottom: 12px; transition: transform .15s, background .15s; }
.author-work-item:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }
.author-work-thumb { width: 100%; height: 126px; object-fit: cover; display: block; background: #1a1a2e; }
.author-work-thumb-placeholder { display: grid; place-items: center; color: #8899aa; font-size: 0.8rem; }
.author-work-title { display: block; font-size: 0.82rem; color: #24303f; padding: 8px 10px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.author-work-meta { display: block; font-size: 0.78rem; color: #95a5b8; padding: 0 10px 8px; }
.author-work-empty { font-size: 0.82rem; color: #95a5b8; margin: 0; }
@media (max-width: 900px) {
  .work-detail-layout { flex-direction: column; }
  .detail-author-side, .detail-comment-side { flex: none; width: 100%; position: static; }
}
.work-detail-video { height: 422px; width: 668px; border-radius: 14px; margin: 0 0 24px; background: #000; display: block; object-fit: cover; }
.work-detail-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.work-detail-images img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; cursor: pointer; transition: transform .15s; }
.work-detail-images img:hover { transform: scale(1.03); }
.work-detail-wrap h1 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: #0f274f; margin: 0 0 12px; }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: 0.9rem; color: #6e7e93; }
.detail-text-body { font-size: 1rem; color: #24303f; line-height: 1.9; margin-bottom: 24px; background: rgba(255,255,255,0.7); padding: 24px; border-radius: 18px; }
.detail-text-body.rich-content { white-space: normal; }
.detail-text-body.rich-content img { max-width: 100%; border-radius: 12px; margin: 10px 0; display: block; }
.detail-text-body.rich-content p { margin: 0 0 12px; }
.detail-text-body.rich-content b, .detail-text-body.rich-content strong { font-weight: 700; }
.detail-text-body.rich-content i, .detail-text-body.rich-content em { font-style: italic; }
.detail-actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-comment-box { margin-top: 0; padding-top: 0; }
.detail-comment-input { width: 100%; min-height: 70px; border: 1px solid #cdd7e7; border-radius: 12px; padding: 10px 12px; font-size: 0.85rem; color: #24303f; background: #f9fbfd; resize: vertical; margin-bottom: 8px; }
.detail-comment-submit { width: 100%; padding: 8px; font-size: 0.85rem; }
.detail-comments-list { margin-top: 12px; }
.comment-item { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.6); margin-bottom: 8px; }
.comment-head { display: flex; align-items: baseline; }
.comment-user { font-weight: 700; color: #0f274f; font-size: 0.82rem; }
.comment-date { font-size: 0.72rem; color: #95a5b8; margin-left: 8px; }
.comment-body { margin-top: 4px; color: #3a4d62; font-size: 0.85rem; }
.comment-actions { display: flex; gap: 12px; margin-top: 6px; }
.comment-like-btn, .comment-reply-btn, .comment-delete-btn { border: none; background: none; padding: 0; font-size: 0.78rem; color: #6e8ba8; cursor: pointer; transition: color .15s; }
.comment-like-btn:hover, .comment-reply-btn:hover { color: #0f274f; }
.comment-delete-btn:hover { color: #b02a37; }
.comment-like-btn.active { color: #e0526d; }
.comment-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid #e2e8f0; }
.comment-reply { padding: 6px 0; }
.comment-reply .comment-user { font-size: 0.78rem; }
.comment-reply .comment-body { font-size: 0.82rem; }
.detail-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; color: #4b86b4; font-weight: 600; cursor: pointer; text-decoration: none; }
.detail-back-link:hover { text-decoration: underline; }

/* 响应式：列数自适应 */
@media (max-width: 1100px) { .feed-column-body { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .feed-column-body { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  {
  .feed-column-body { grid-template-columns: repeat(2, 1fr); }
  .feed-column--video .feed-column-body { grid-template-columns: repeat(2, 1fr); }
  .feed-column--video .video-card { width: auto; }
}
@media (max-width: 340px)  {
  .feed-column-body { grid-template-columns: 1fr; }
  .feed-column--video .feed-column-body { grid-template-columns: 1fr; }
  .feed-column--video .video-card { width: auto; }
}

.section { padding: 64px 0; }
.section-light { background: rgba(255,255,255,0.16); }
.section-title { max-width: 720px; margin-bottom: 40px; }
.section-title span { display: inline-block; font-size: 0.84rem; color: #2b6cb0; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.section-title h2 { margin: 0 0 16px; font-size: clamp(1.8rem, 2.4vw, 2.8rem); color: #11203a; }
.section-title p { margin: 0; color: #5a697c; font-size: 1rem; }
.cards-grid, .resource-grid, .member-grid { display: grid; gap: 24px; }
.cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.member-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card, .resource-card, .member-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(217,227,238,0.75); border-radius: 24px; padding: 28px; box-shadow: 0 10px 34px rgba(23, 61, 116, 0.08); }
.feature-card h3, .resource-card h3, .member-card h3 { margin-top: 0; margin-bottom: 18px; font-size: 1.2rem; color: #142f54; }
.feature-card p, .resource-card p, .member-card p { margin: 0 0 18px; color: #5d6c7e; font-size: 0.96rem; }
.feature-card ul { padding-left: 18px; margin: 0; color: #4f5f71; }
.feature-card ul li { margin-bottom: 10px; }
.structure-box { margin-top: 32px; padding: 28px; border-radius: 22px; background: rgba(255,255,255,0.9); border: 1px solid rgba(216,228,247,0.8); }
.structure-box h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.1rem; }
.structure-box ol { margin: 0; padding-left: 20px; color: #3e526d; }
.structure-box li { margin-bottom: 12px; }
.section-promo { padding: 50px 0; background: linear-gradient(135deg, #1451a3 0%, #2c7ad0 100%); color: #fff; }
.promo-layout { display: flex; gap: 32px; align-items: center; justify-content: space-between; }
.promo-layout h2 { margin: 0 0 14px; font-size: clamp(1.75rem, 2.3vw, 2.5rem); }
.promo-layout p { margin: 0; max-width: 620px; color: rgba(255,255,255,0.88); }
.promo-links { display: flex; flex-wrap: wrap; gap: 14px; }
.promo-link { background: rgba(255,255,255,0.16); padding: 16px 20px; border-radius: 16px; color: #fff; min-width: 120px; text-align: center; }
.contact-layout { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 36px; align-items: start; }
.contact-cards { display: grid; gap: 18px; margin-top: 24px; }
.contact-card { background: rgba(255,255,255,0.9); border-radius: 20px; border: 1px solid rgba(220,228,238,0.75); padding: 22px; box-shadow: 0 12px 34px rgba(64, 91, 126, 0.1); }
.contact-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 1rem; color: #1f3b62; }
.contact-card p { margin: 0; color: #5a6a7f; }
.contact-form { background: rgba(255,255,255,0.94); border-radius: 28px; border: 1px solid rgba(217,226,237,0.75); padding: 28px; box-shadow: 0 14px 42px rgba(23, 64, 109, 0.1); }
.contact-form label { display: block; margin-bottom: 18px; color: #4a5f76; font-size: 0.95rem; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #cdd7e7; border-radius: 16px; padding: 14px 16px; font-size: 0.97rem; color: #24303f; background: #f9fbfd; }
.contact-form textarea { resize: vertical; min-height: 150px; }
/* 实训选择页 */
.training-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; }
.training-choice-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 32px; border-radius: 24px; background: rgba(255,255,255,0.85); border: 1px solid rgba(200,215,235,0.6); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; box-shadow: 0 12px 36px rgba(20, 60, 110, 0.06); }
.training-choice-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20, 60, 110, 0.14); }
.training-choice-icon { margin-bottom: 18px; }
.training-choice-icon img { width: 160px; height: 120px; object-fit: cover; border-radius: 14px; display: block; }
.training-choice-card h2 { margin: 0 0 14px; font-size: 1.25rem; color: #102640; }
.training-choice-card p { margin: 0 0 20px; font-size: 0.92rem; color: #5a697c; line-height: 1.7; }
.training-choice-arrow { font-weight: 700; color: #2b6cb0; font-size: 0.95rem; }
@media (max-width: 640px) { .training-choice-grid { grid-template-columns: 1fr; } }

/* 个人主页头像 */
.profile-header-row { display: flex; align-items: center; gap: 24px; margin-bottom: 4px; }
.profile-header-row h1 { margin: 0; }
.profile-avatar-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-avatar-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; cursor: pointer; position: relative; background: linear-gradient(135deg, #4b86b4, #0f274f); display: grid; place-items: center; transition: transform .15s; }
.profile-avatar-wrap:hover { transform: scale(1.08); }
.profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-wrap input { display: none; }
#profileAvatarFallback { font-size: 1.6rem; font-weight: 800; color: #fff; }
#profileAvatarImg[src=""] { display: none; }
#profileAvatarImg[src=""] + #profileAvatarFallback { display: block; }
.profile-avatar-name { font-size: 0.9rem; font-weight: 600; color: #102640; }
.profile-avatar-name-row { display: flex; align-items: center; gap: 8px; }
.profile-points { font-size: 0.78rem; color: #b8860b; font-weight: 600; white-space: nowrap; }

/* 编辑个人资料按钮 */
#editProfileBtn { margin-top: 14px; }

/* 编辑资料弹窗 */
.profile-edit-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(4,18,40,0.6); display: grid; place-items: center; padding: 24px; }
.profile-edit-modal { position: relative; width: min(460px, 100%); background: #fff; border-radius: 24px; padding: 32px 28px; box-shadow: 0 32px 80px rgba(14,41,81,0.2); }
.profile-edit-modal h2 { margin: 0 0 22px; font-size: 1.25rem; color: #0f274f; }
.profile-edit-modal label { display: block; margin-bottom: 16px; font-size: 0.92rem; color: #3a4d62; }
.profile-edit-modal input, .profile-edit-modal textarea { width: 100%; border: 1px solid #cdd7e7; border-radius: 14px; padding: 12px 14px; font-size: 0.94rem; color: #24303f; background: #f9fbfd; margin-top: 6px; }
.profile-edit-modal textarea { resize: vertical; min-height: 80px; }
.profile-edit-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, #4b86b4, #0f274f); display: grid; place-items: center; margin-top: 6px; position: relative; }
.profile-edit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-edit-avatar input { display: none; }
#profileEditAvatarFallback { font-size: 1.8rem; font-weight: 800; color: #fff; }
#profileEditAvatarImg[src=""] { display: none; }
#profileEditSave { width: 100%; margin-top: 8px; }

/* 讨论区 */
.discuss-search { display: flex; gap: 10px; max-width: 600px; margin: 0 auto 24px; }
.discuss-search input { flex: 1; border: 1px solid #cdd7e7; border-radius: 999px; padding: 12px 18px; font-size: 0.94rem; color: #24303f; background: #f9fbfd; }
.discuss-search button { border: none; background: #0f274f; color: #fff; padding: 12px 22px; border-radius: 999px; cursor: pointer; font-weight: 700; }
.discuss-post-box { max-width: 600px; margin: 0 auto 32px; background: rgba(255,255,255,0.9); border-radius: 18px; padding: 20px; border: 1px solid rgba(218,228,240,0.7); }
.discuss-post-box textarea { width: 100%; border: 1px solid #cdd7e7; border-radius: 14px; padding: 14px; font-size: 0.94rem; color: #24303f; background: #f9fbfd; resize: vertical; min-height: 80px; margin-bottom: 12px; }
.discuss-post-box .btn { width: 100%; }
.discuss-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.discuss-card { background: rgba(255,255,255,0.9); border-radius: 18px; padding: 20px 22px; border: 1px solid rgba(218,228,240,0.7); }
.discuss-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.discuss-card-user { font-weight: 700; color: #0f274f; font-size: 0.95rem; }
.discuss-card-time { font-size: 0.78rem; color: #95a5b8; }
.discuss-card-text { color: #3a4d62; line-height: 1.7; font-size: 0.93rem; white-space: pre-wrap; }
.discuss-post-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.discuss-upload-btn { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #eef4fb; color: #2a5b9c; font-size: 0.85rem; cursor: pointer; border: 1px solid #dce6f2; }
.discuss-upload-btn:hover { background: #e0ecf8; }
.discuss-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.discuss-preview-item { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.discuss-preview-note { font-size: 0.85rem; color: #2a5b9c; }
.discuss-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.discuss-imgs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; cursor: pointer; }
.discuss-video { width: 100%; max-height: 320px; border-radius: 12px; margin-top: 12px; background: #000; display: block; }
.discuss-card-actions, .discuss-actions { display: flex; gap: 14px; margin-top: 12px; }
.discuss-action { border: none; background: none; font-size: 0.82rem; color: #6e8ba8; cursor: pointer; padding: 0; transition: color .15s; }
.discuss-action:hover { color: #0f274f; }
.discuss-replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid #e2e8f0; }
.discuss-reply { padding: 8px 0; }
.discuss-reply .discuss-card-user { font-size: 0.85rem; }
.discuss-reply .discuss-card-time { font-size: 0.72rem; margin-left: 8px; }
.discuss-reply .discuss-card-text { font-size: 0.85rem; white-space: pre-wrap; }

.page-shell { padding: 36px 0 72px; }
.page-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; margin-bottom: 24px; }
.page-hero-copy { padding: 24px 0; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 16px; }
.hero-actions .btn { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: inherit; line-height: 1.2; text-decoration: none; }
.page-eyebrow { display: inline-block; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(75, 134, 180, 0.14); color: #2b6cb0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.page-hero h1 { margin: 0 0 12px; font-size: clamp(2rem, 3vw, 2.7rem); color: #102640; }
.page-hero p { margin: 0; color: #57657a; font-size: 1rem; }
.page-hero-card { padding: 24px; border-radius: 24px; background: rgba(255,255,255,0.9); border: 1px solid rgba(214,225,239,0.8); box-shadow: 0 12px 32px rgba(20, 59, 108, 0.08); }
.page-hero-card h3 { margin: 0 0 10px; color: #11203a; }
.page-hero-card p { margin: 0; color: #516273; line-height: 1.7; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.work-card { background: rgba(255,255,255,0.55); border: 1px solid rgba(218,229,240,0.5); border-radius: 18px; padding: 0; box-shadow: 0 8px 20px rgba(20, 59, 108, 0.04); overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.work-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 59, 108, 0.1); }
.work-card-cover { width: 100%; height: 160px; object-fit: cover; display: block; background: #1a1a2e; }
.work-card-cover-placeholder { display: grid; place-items: center; color: #8899aa; font-size: 0.9rem; padding: 20px; }
.work-card-body { padding: 16px 18px; }
.work-card h3 { margin: 0 0 8px; color: #142f54; font-size: 1.05rem; }
.work-card p { margin: 0 0 10px; color: #5a6a7d; line-height: 1.6; font-size: 0.88rem; }
.work-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.work-tag { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(75, 134, 180, 0.12); color: #2b6cb0; font-size: 0.8rem; font-weight: 700; }
.work-link { display: inline-block; margin-top: 6px; color: #0f274f; font-weight: 700; }
.work-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.work-preview-item { overflow: hidden; border-radius: 16px; background: rgba(243, 247, 255, 0.9); }
.work-preview-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.work-video-wrapper { margin-bottom: 14px; }
.work-video-wrapper video { height: 200px; width: 240px; border-radius: 14px; background: #000; display: block; object-fit: cover; }
.work-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.work-action-btn { border: none; background: rgba(47, 80, 134, 0.08); color: #1f3659; padding: 9px 14px; border-radius: 16px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.work-action-btn:hover { background: rgba(47, 80, 134, 0.16); transform: translateY(-1px); }
.work-action-btn.active { background: linear-gradient(135deg, #4b86b4, #0f274f); color: #fff; }
.empty-state { padding: 28px; border-radius: 22px; background: rgba(255,255,255,0.9); border: 1px dashed rgba(157, 177, 198, 0.7); color: #516273; text-align: center; }
@media (max-width: 980px) {
  .page-hero { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
}
.contact-form .form-note { margin-top: 16px; color: #78889d; font-size: 0.9rem; }
.site-footer { padding: 30px 0; background: #0f274f; color: #e8eef9; }
.footer-inner { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.site-footer p { margin: 0; font-size: 0.94rem; }
@media (max-width: 980px) {
  .promo-layout, .contact-layout { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
  .main-nav { gap: 8px; width: 100%; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-size: 0.82rem; }
  .nav-links { gap: 9px; flex-wrap: nowrap; }
  .nav-links a { white-space: nowrap; }
  .nav-user-btn { padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; }
  .nav-checkin-btn { padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; }
  .nav-user-group { gap: 6px; }
  .cards-grid, .member-grid { grid-template-columns: 1fr; }
  .feature-card, .resource-card, .member-card { padding: 22px; }
  .hero-search-area { padding: 40px 0 32px; }
  .hero-search { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; }
  .hero-search input { flex: 1 1 auto; min-width: 0; font-size: 1rem; padding: 10px 12px; }
  .hero-search .search-icon-btn { width: 48px; height: 48px; }
  .hero-search .search-icon-btn img { width: 36px; height: 36px; }
  .qa-link-btn { padding: 10px 12px; font-size: 0.82rem; flex: 0 0 auto; }
  .page-shell { padding: 24px 0 48px; }
  .work-detail-video { width: 100%; height: auto; }
  .work-detail-wrap { margin-left: 0; }
  .detail-text-body { padding: 16px; }
  .discuss-search { max-width: 100%; gap: 6px; margin-bottom: 16px; }
  .discuss-search input { padding: 8px 14px; font-size: 0.85rem; }
  .discuss-search button { padding: 8px 14px; font-size: 0.85rem; }
  #askBtn { padding: 8px 14px !important; font-size: 0.85rem !important; white-space: nowrap; }
}