/* ============================================================================
* 卿梦 Pages · v2.5.0
* 页面级布局与业务组件。设计稿与主题实现共用这一份。
* 依赖：tokens.css → components.css
* ==========================================================================*/
/* ==========================================================================
* A. 桌面端顶部导航
* ========================================================================*/
.qm-header {
position: sticky; top: 0; z-index: var(--qm-z-sticky);
background: color-mix(in srgb, var(--qm-surface) 86%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--qm-border);
}
.qm-header-in { display: flex; align-items: center; gap: var(--qm-sp-6); height: var(--qm-header-h); }
.qm-logo { display: inline-flex; align-items: center; gap: var(--qm-sp-3); font-size: var(--qm-fs-2xl); font-weight: var(--qm-fw-black); letter-spacing: var(--qm-ls-tight); flex: none; }
.qm-logo-mark {
width: 30px; height: 30px; border-radius: var(--qm-r-sm);
display: grid; place-items: center; color: #fff; font-size: var(--qm-fs-base); font-weight: 800;
background: var(--qm-grad-brand); box-shadow: var(--qm-sh-primary);
}
.qm-logo em { font-style: normal; background: var(--qm-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Logo 图片：按 100:300 = 3:1 封顶，等比缩放绝不拉伸（2.6.8-f48）
亮/暗两张同时在 DOM 里，靠 .dark-mode 切 display：首屏不闪、不用 JS 换图。
注意用 max-height + max-width 组合，只给 height 定值会把宽图压扁。 */
.qm-logo .qm-logo-img {
--qm-logo-h: 30px;
--qm-logo-w: 90px; /* = 3 × 高度 */
height: auto;
max-height: var(--qm-logo-h);
width: auto;
max-width: var(--qm-logo-w);
object-fit: contain;
display: block;
flex: none;
}
.qm-logo .qm-logo-img.is-dark { display: none; }
.dark-mode .qm-logo .qm-logo-img.is-light { display: none; }
.dark-mode .qm-logo .qm-logo-img.is-dark { display: block; }
/* 页脚品牌位：略小一点，跟页脚字号协调 */
.qm-logo-foot .qm-logo-img { --qm-logo-h: 28px; --qm-logo-w: 84px; }
.qm-nav { display: flex; align-items: center; gap: var(--qm-sp-1); flex: 1; min-width: 0; }
.qm-nav a { padding: 7px 14px; border-radius: var(--qm-r-sm); font-size: var(--qm-fs-base); font-weight: var(--qm-fw-medium); color: var(--qm-text-2); }
.qm-nav a:hover { background: var(--qm-bg-soft); color: var(--qm-text); }
.qm-nav a.on { color: var(--qm-primary); background: var(--qm-primary-50); font-weight: var(--qm-fw-semi); }
.qm-header-actions { display: flex; align-items: center; gap: var(--qm-sp-3); flex: none; }
.qm-header-search {
display: flex; align-items: center; gap: var(--qm-sp-2);
width: 200px; padding: 7px 12px; border-radius: var(--qm-r-full);
background: var(--qm-bg-soft); border: 1px solid transparent; color: var(--qm-text-3);
font-size: var(--qm-fs-sm); transition: .2s var(--qm-ease);
}
.qm-header-search:focus-within { background: var(--qm-surface); border-color: var(--qm-primary-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-primary) 10%, transparent); }
.qm-header-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--qm-text); }
.qm-header-search input::placeholder { color: var(--qm-text-3); }
/* 用户胶囊 */
.qm-userpill { display: flex; align-items: center; gap: var(--qm-sp-2); padding: 3px 12px 3px 4px; border-radius: var(--qm-r-full); background: var(--qm-surface); border: 1px solid var(--qm-border); font-size: var(--qm-fs-sm); font-weight: var(--qm-fw-medium); }
.qm-userpill:hover { border-color: var(--qm-primary-300); color: var(--qm-primary); }
/* ==========================================================================
* B. 首页首屏 · 三方案
* ========================================================================*/
.qm-hero { position: relative; overflow: hidden; background: var(--qm-surface); border-bottom: 1px solid var(--qm-border); }
.qm-hero::before { content: ""; position: absolute; inset: 0; background: var(--qm-grad-hero); pointer-events: none; }
.qm-hero-in { position: relative; padding: var(--qm-sp-12) 0 var(--qm-sp-10); text-align: center; }
.qm-hero-tag {
display: inline-flex; align-items: center; gap: var(--qm-sp-2);
padding: 4px 12px; margin-bottom: var(--qm-sp-5);
border-radius: var(--qm-r-full); font-size: var(--qm-fs-xs); font-weight: var(--qm-fw-semi);
color: var(--qm-primary-700); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-surface));
border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent);
}
.qm-hero h1 { margin: 0 0 var(--qm-sp-4); font-size: var(--qm-fs-6xl); font-weight: var(--qm-fw-black); letter-spacing: -.035em; line-height: 1.15; }
.qm-hero h1 em { font-style: normal; background: var(--qm-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qm-hero-sub { margin: 0 auto var(--qm-sp-8); max-width: 560px; color: var(--qm-text-2); font-size: var(--qm-fs-lg); }
/* 大搜索框 */
.qm-hero-search { display: flex; align-items: center; gap: var(--qm-sp-3); width: min(640px, 100%); margin: 0 auto var(--qm-sp-5); padding: 6px 6px 6px 18px; background: var(--qm-surface); border: 1px solid var(--qm-border); border-radius: var(--qm-r-full); box-shadow: var(--qm-sh-lg); }
.qm-hero-search:focus-within { border-color: var(--qm-primary-300); box-shadow: 0 0 0 4px color-mix(in srgb, var(--qm-primary) 12%, transparent), var(--qm-sh-lg); }
.qm-hero-search svg { width: 18px; height: 18px; color: var(--qm-text-3); flex: none; }
.qm-hero-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: var(--qm-fs-md); color: var(--qm-text); }
.qm-hero-search input::placeholder { color: var(--qm-text-3); }
.qm-hero-hot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--qm-sp-3); font-size: var(--qm-fs-sm); color: var(--qm-text-3); margin-bottom: var(--qm-sp-7); }
.qm-hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--qm-sp-3); }
/* 轮播方案 */
.qm-slider { position: relative; border-radius: var(--qm-r-2xl); overflow: hidden; box-shadow: var(--qm-sh-lg); background: var(--qm-n-800); }
.qm-slide { position: relative; display: grid; align-content: center; gap: var(--qm-sp-4); min-height: 340px; padding: var(--qm-sp-11) var(--qm-sp-12); color: #fff; text-align: left; }
.qm-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 16, 48, .82) 12%, rgba(20, 16, 48, .28) 62%, transparent); }
.qm-slide > * { position: relative; max-width: 52%; }
.qm-slide b { font-size: var(--qm-fs-xs); letter-spacing: var(--qm-ls-wide); text-transform: uppercase; opacity: .8; }
.qm-slide h2 { margin: 0; font-size: var(--qm-fs-5xl); font-weight: var(--qm-fw-black); line-height: 1.15; letter-spacing: var(--qm-ls-tight); }
.qm-slide p { margin: 0; font-size: var(--qm-fs-md); opacity: .85; }
.qm-slide-dots { position: absolute; left: var(--qm-sp-12); bottom: var(--qm-sp-7); display: flex; gap: 6px; z-index: 2; }
.qm-slide-dots i { width: 7px; height: 7px; border-radius: var(--qm-r-full); background: rgba(255, 255, 255, .45); transition: .2s; }
.qm-slide-dots i.on { width: 20px; background: #fff; }
.qm-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); cursor: pointer; }
.qm-slide-arrow:hover { background: rgba(255, 255, 255, .3); }
.qm-slide-arrow.prev { left: 18px; } .qm-slide-arrow.next { right: 18px; }
/* 文章聚合方案 */
.qm-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--qm-sp-8); padding: var(--qm-sp-10) 0; text-align: left; }
.qm-hero-lead { position: relative; border-radius: var(--qm-r-2xl); overflow: hidden; min-height: 380px; display: grid; align-content: end; padding: var(--qm-sp-8); color: #fff; background: linear-gradient(160deg, #4B3CC0, #161B28); }
.qm-hero-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.qm-hero-lead > div { position: relative; }
.qm-hero-lead h2 { margin: var(--qm-sp-3) 0 var(--qm-sp-3); font-size: var(--qm-fs-4xl); font-weight: var(--qm-fw-black); line-height: 1.2; letter-spacing: var(--qm-ls-tight); }
.qm-hero-lead p { margin: 0 0 var(--qm-sp-5); opacity: .82; font-size: var(--qm-fs-sm); }
.qm-hero-side { display: flex; flex-direction: column; }
.qm-hero-side-item { display: grid; grid-template-columns: 1fr 88px; gap: var(--qm-sp-4); padding: var(--qm-sp-4) 0; border-bottom: 1px solid var(--qm-divider); text-align: left; }
.qm-hero-side-item:last-child { border-bottom: 0; }
.qm-hero-side-item h3 { margin: 0 0 var(--qm-sp-2); font-size: var(--qm-fs-md); font-weight: var(--qm-fw-semi); line-height: 1.5; }
.qm-hero-side-item img { width: 88px; height: 64px; object-fit: cover; border-radius: var(--qm-r-sm); }
/* 辅助条：搜索 / 公告 / 热门 */
.qm-assist { display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-4) 0; border-bottom: 1px solid var(--qm-border); font-size: var(--qm-fs-sm); }
.qm-assist-notice { display: flex; align-items: center; gap: var(--qm-sp-3); flex: 1; min-width: 0; color: var(--qm-text-2); }
.qm-assist-notice b { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 9px; border-radius: var(--qm-r-full); font-size: var(--qm-fs-xs); background: var(--qm-warning-bg); color: var(--qm-warning-ink); border: 1px solid var(--qm-warning-border); }
.qm-assist-notice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-assist-actions { display: flex; gap: var(--qm-sp-2); flex: none; }
/* ==========================================================================
* C. 首页模块流
* ========================================================================*/
/* 注意：只能用 padding-block。写成 padding 简写会把 .qm-container 的左右 gutter 清成 0，
* 导致首页卡片左边贴屏、与顶栏/首屏不对齐（2.6.8-f22 修复）。 */
.qm-page { padding-block: var(--qm-sp-8) var(--qm-sp-12); }
.qm-main-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--qm-side-w); gap: var(--qm-sp-8); align-items: start; }
@media (max-width: 1100px) { .qm-main-cols { grid-template-columns: minmax(0, 1fr); } }
.qm-side { display: flex; flex-direction: column; gap: var(--qm-sp-6); position: sticky; top: calc(var(--qm-header-h) + var(--qm-sp-5)); }
@media (max-width: 1100px) { .qm-side { position: static; } }
.qm-mod { margin-bottom: var(--qm-sp-8); }
.qm-mod-head { display: flex; align-items: center; gap: var(--qm-sp-4); margin-bottom: var(--qm-sp-5); }
.qm-mod-head h2 { margin: 0; margin-right: auto; font-size: var(--qm-fs-2xl); font-weight: var(--qm-fw-black); letter-spacing: var(--qm-ls-tight); display: flex; align-items: center; gap: var(--qm-sp-3); }
.qm-mod-head h2 svg { width: 20px; height: 20px; color: var(--qm-primary); }
.qm-mod-head .qm-tabs { margin-left: auto; }
/* 文章卡片：卡片式 */
.qm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--qm-sp-6); }
.qm-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .qm-cards, .qm-cards-2 { grid-template-columns: minmax(0, 1fr); } }
.qm-post { position: relative; display: flex; flex-direction: column; background: var(--qm-surface); border: 1px solid var(--qm-border); border-radius: var(--qm-r-lg); overflow: hidden; box-shadow: var(--qm-sh-xs); transition: transform var(--qm-dur-2) var(--qm-ease), box-shadow var(--qm-dur-3) var(--qm-ease), border-color var(--qm-dur-2); }
.qm-post:hover { transform: translateY(-3px); box-shadow: var(--qm-sh-lg); border-color: transparent; }
.qm-post-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--qm-bg-soft); }
.qm-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--qm-dur-4) var(--qm-ease); }
.qm-post:hover .qm-post-thumb img { transform: scale(1.04); }
.qm-post-body { display: flex; flex-direction: column; gap: var(--qm-sp-3); padding: var(--qm-sp-5) var(--qm-sp-6) var(--qm-sp-6); flex: 1; }
.qm-post-title { margin: 0; font-size: var(--qm-fs-lg); font-weight: var(--qm-fw-bold); line-height: 1.45; letter-spacing: var(--qm-ls-tight); }
.qm-post:hover .qm-post-title { color: var(--qm-primary); }
.qm-post-excerpt { margin: 0; font-size: var(--qm-fs-sm); color: var(--qm-text-2); line-height: 1.7; }
.qm-post-foot { display: flex; align-items: center; gap: var(--qm-sp-3); margin-top: auto; padding-top: var(--qm-sp-4); border-top: 1px solid var(--qm-divider); }
.qm-post-stats { display: flex; gap: var(--qm-sp-4); margin-left: auto; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-post-stats span { display: inline-flex; align-items: center; gap: 1px; }
.qm-post-stats svg { width: 13px; height: 13px; opacity: .7; }
/* 文章卡片：横条式 */
.qm-post-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--qm-sp-5); }
.qm-post-row .qm-post-thumb { aspect-ratio: 4 / 3; border-radius: var(--qm-r-md); }
@media (max-width: 560px) { .qm-post-row { grid-template-columns: 104px minmax(0, 1fr); } }
/* 双栏/单栏列表切换容器 */
.qm-post-list { display: flex; flex-direction: column; gap: var(--qm-sp-4); }
/* 便签云：四周留呼吸位，不贴屏边 */
.qm-notes { display: flex; flex-wrap: wrap; gap: var(--qm-sp-4); padding: 6px 8px 8px; }
.qm-note {
padding: var(--qm-sp-4) var(--qm-sp-5); border-radius: var(--qm-r-md);
font-size: var(--qm-fs-sm); line-height: 1.6; color: #3A3320;
box-shadow: var(--qm-sh-sm); transition: transform var(--qm-dur-2) var(--qm-spring), box-shadow var(--qm-dur-2);
transform: rotate(var(--rot, -1deg)); max-width: 240px;
transform-origin: 50% 60%; will-change: transform;
}
.qm-note:nth-child(3n) { --rot: 1.2deg; }
.qm-note:nth-child(4n) { --rot: -.6deg; }
/* 悬停：轻微起伏 + 缓慢上下浮动 */
.qm-note:hover { box-shadow: var(--qm-sh-lg); z-index: 1; animation: qmNoteFloat 2.4s ease-in-out infinite; }
@keyframes qmNoteFloat {
0% { transform: rotate(0deg) translateY(-2px) scale(1.03); }
50% { transform: rotate(-1.2deg) translateY(-7px) scale(1.06); }
100% { transform: rotate(0deg) translateY(-2px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
.qm-note:hover { animation: none; transform: rotate(0) scale(1.03); }
}
@media (max-width: 768px) {
.qm-notes { gap: 10px; padding: 4px 6px 8px; }
.qm-note { max-width: 100%; padding: 10px 14px; font-size: var(--qm-fs-xs); }
.qm-note:nth-child(3n), .qm-note:nth-child(4n) { --rot: -0.4deg; }
}
/* 分类入口横滑 */
.qm-cats { display: flex; gap: var(--qm-sp-3); overflow-x: auto; padding-bottom: var(--qm-sp-2); }
.qm-cat-chip { display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; min-width: 96px; padding: var(--qm-sp-4); border-radius: var(--qm-r-md); background: var(--qm-surface); border: 1px solid var(--qm-border); }
.qm-cat-chip b { font-size: var(--qm-fs-base); }
.qm-cat-chip em { font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 侧栏小组件 */
.qm-widget { padding: var(--qm-sp-6); }
.qm-widget h3 { display: flex; align-items: center; gap: var(--qm-sp-2); margin: 0 0 var(--qm-sp-4); font-size: var(--qm-fs-md); font-weight: var(--qm-fw-bold); }
.qm-widget h3::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--qm-grad-brand); }
.qm-rank { display: flex; gap: var(--qm-sp-3); padding: var(--qm-sp-3) 0; border-bottom: 1px dashed var(--qm-divider); font-size: var(--qm-fs-sm); }
.qm-rank:last-child { border-bottom: 0; }
.qm-rank i { flex: none; width: 18px; height: 18px; border-radius: var(--qm-r-xs); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: var(--qm-fw-bold); background: var(--qm-bg-soft); color: var(--qm-text-3); }
.qm-rank:nth-child(1) i { background: linear-gradient(120deg, #FFE9A8, #F5C04E); color: #7A4A00; }
.qm-rank:nth-child(2) i { background: var(--qm-n-200); color: var(--qm-n-700); }
.qm-rank:nth-child(3) i { background: #F6D9C4; color: #8A4B22; }
.qm-rank span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==========================================================================
* D. 文章详情 / 阅读付费
* ========================================================================*/
.qm-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--qm-sp-8); align-items: start; }
@media (max-width: 1100px) { .qm-article-wrap { grid-template-columns: minmax(0, 1fr); } }
.qm-article { padding: var(--qm-sp-9) var(--qm-sp-10); }
@media (max-width: 900px) { .qm-article { padding: var(--qm-sp-6); } }
.qm-article-head { margin-bottom: var(--qm-sp-6); }
.qm-article-cat { display: inline-flex; align-items: center; gap: var(--qm-sp-2); padding: 2px 10px; border-radius: var(--qm-r-full); font-size: var(--qm-fs-xs); font-weight: var(--qm-fw-semi); color: var(--qm-primary-700); background: var(--qm-primary-50); margin-bottom: var(--qm-sp-4); }
.qm-article-title { margin: 0 0 var(--qm-sp-5); font-size: clamp(24px, 3vw, 34px); font-weight: var(--qm-fw-black); line-height: 1.28; letter-spacing: -.025em; }
.qm-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qm-sp-4); padding-bottom: var(--qm-sp-5); border-bottom: 1px solid var(--qm-divider); font-size: var(--qm-fs-sm); color: var(--qm-text-3); }
.qm-article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--qm-border-strong); }
.qm-prose { font-size: var(--qm-fs-lg); line-height: 1.9; color: var(--qm-text); }
.qm-prose > * + * { margin-top: 1.1em; }
.qm-prose h2 { margin-top: 1.6em; font-size: var(--qm-fs-3xl); font-weight: var(--qm-fw-bold); letter-spacing: var(--qm-ls-tight); }
.qm-prose h3 { margin-top: 1.4em; font-size: var(--qm-fs-2xl); font-weight: var(--qm-fw-semi); }
.qm-prose img { border-radius: var(--qm-r-md); }
.qm-prose a { color: var(--qm-primary); text-decoration: underline; text-underline-offset: 3px; }
.qm-prose blockquote { margin: 1.4em 0; padding: var(--qm-sp-4) var(--qm-sp-6); border-left: 3px solid var(--qm-primary); border-radius: 0 var(--qm-r-md) var(--qm-r-md) 0; background: var(--qm-bg-soft); color: var(--qm-text-2); font-size: var(--qm-fs-base); }
.qm-prose code { padding: 2px 6px; border-radius: var(--qm-r-xs); background: var(--qm-bg-soft); font-family: var(--qm-font-num); font-size: .9em; }
.qm-prose pre { padding: var(--qm-sp-5); border-radius: var(--qm-r-md); background: var(--qm-n-900); color: #E9ECF5; overflow-x: auto; font-size: var(--qm-fs-sm); }
/* 付费锁 */
.qm-paywall { position: relative; margin: var(--qm-sp-8) 0; padding: var(--qm-sp-9) var(--qm-sp-8); border-radius: var(--qm-r-xl); border: 1px solid var(--qm-border); background: var(--qm-surface); box-shadow: var(--qm-sh-md); text-align: center; overflow: hidden; }
.qm-paywall::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 200px at 50% 0%, color-mix(in srgb, var(--qm-primary) 12%, transparent), transparent 70%); pointer-events: none; }
.qm-paywall-lock { position: relative; width: 54px; height: 54px; margin: 0 auto var(--qm-sp-4); border-radius: var(--qm-r-lg); display: grid; place-items: center; font-size: 24px; background: var(--qm-primary-100); color: var(--qm-primary); }
.qm-paywall h3 { position: relative; margin: 0 0 var(--qm-sp-3); font-size: var(--qm-fs-xl); font-weight: var(--qm-fw-bold); }
.qm-paywall-ways { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--qm-sp-3) var(--qm-sp-6); margin: var(--qm-sp-5) 0; font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-paywall-ways span { display: inline-flex; align-items: center; gap: 5px; }
.qm-paywall-ways span::before { content: "✓"; color: var(--qm-success); font-weight: 700; }
.qm-paywall-price { position: relative; font-size: var(--qm-fs-5xl); font-weight: var(--qm-fw-black); color: var(--qm-danger); letter-spacing: -.03em; }
.qm-paywall-price small { font-size: var(--qm-fs-base); font-weight: var(--qm-fw-semi); }
.qm-paywall-actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--qm-sp-3); margin-top: var(--qm-sp-5); }
.qm-paywall-count { position: relative; margin-top: var(--qm-sp-4); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 附件条 */
.qm-attach { display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-5); border: 1px solid var(--qm-border); border-radius: var(--qm-r-md); background: var(--qm-bg-soft); }
.qm-attach-ico { width: 40px; height: 40px; flex: none; border-radius: var(--qm-r-sm); display: grid; place-items: center; background: var(--qm-surface); font-size: 18px; box-shadow: var(--qm-sh-xs); }
.qm-attach b { font-size: var(--qm-fs-base); }
.qm-attach small { display: block; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 评论 */
.qm-comments { margin-top: var(--qm-sp-8); }
.qm-comment { display: flex; gap: var(--qm-sp-3); padding: var(--qm-sp-5) 0; border-bottom: 1px solid var(--qm-divider); }
.qm-comment:last-child { border-bottom: 0; }
.qm-comment-body { flex: 1; min-width: 0; }
.qm-comment-text { margin: var(--qm-sp-2) 0; font-size: var(--qm-fs-base); line-height: 1.75; }
.qm-comment-foot { display: flex; gap: var(--qm-sp-5); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 版权 */
.qm-copyright { margin-top: var(--qm-sp-8); padding: var(--qm-sp-5); border-radius: var(--qm-r-md); background: var(--qm-bg-soft); font-size: var(--qm-fs-xs); color: var(--qm-text-3); line-height: 1.8; }
/* ==========================================================================
* E. 广场 / 论坛
* ========================================================================*/
.qm-plaza-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--qm-sp-8); align-items: start; }
@media (max-width: 1100px) { .qm-plaza-wrap { grid-template-columns: minmax(0, 1fr); } }
/* 发现流 */
.qm-feed { display: flex; flex-direction: column; gap: var(--qm-sp-4); }
.qm-feed-item { padding: var(--qm-sp-6); }
.qm-feed-head { display: flex; align-items: center; gap: var(--qm-sp-3); }
.qm-feed-text { margin: var(--qm-sp-4) 0; font-size: var(--qm-fs-md); line-height: 1.8; }
/* 2.6.8-f47：列表摘要按设备截 2~4 行（手机 2 / 平板 3 / 桌面 4），避免长文把卡片撑成一面墙 */
.qm-feed-text.qm-clamp-feed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 601px) { .qm-feed-text.qm-clamp-feed { -webkit-line-clamp: 3; } }
@media (min-width: 1200px) { .qm-feed-text.qm-clamp-feed { -webkit-line-clamp: 4; } }
.qm-feed-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--qm-r-md); overflow: hidden; margin-bottom: var(--qm-sp-4); }
.qm-feed-imgs.n2,
.qm-feed-imgs.qm-n2 { grid-template-columns: repeat(2, 1fr); }
/* 4 张：2×2，但整块宽度收住，让格子跟 3 列布局差不多大，不把卡片撑成一面图墙 */
.qm-feed-imgs.qm-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(100%, 66%); }
.qm-feed-imgs.qm-n1 { grid-template-columns: 1fr; }
.qm-feed-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.qm-feed-imgs.qm-n1 img { aspect-ratio: 16 / 9; }
.qm-feed-img { position: relative; display: block; overflow: hidden; line-height: 0; }
.qm-feed-img img { transition: transform .35s ease; }
.qm-feed-img:hover img { transform: scale(1.03); }
.qm-feed-img-more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .52); color: #fff; font-size: 20px; font-weight: 600;
line-height: 1; letter-spacing: .5px;
}
.qm-feed-acts { display: flex; gap: var(--qm-sp-6); font-size: var(--qm-fs-sm); color: var(--qm-text-3); }
.qm-feed-acts button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.qm-feed-acts button:hover, .qm-feed-acts button.on { color: var(--qm-primary); }
.qm-feed-acts button.on svg { fill: currentColor; }
.qm-feed-acts svg { width: 16px; height: 16px; }
/* 视频流 */
.qm-video-stage { position: relative; border-radius: var(--qm-r-xl); overflow: hidden; background: #000; aspect-ratio: 9 / 16; max-height: 640px; margin-inline: auto; }
.qm-video-cover { position: absolute; inset: 0; }
.qm-video-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.qm-video-side { position: absolute; right: var(--qm-sp-4); bottom: var(--qm-sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--qm-sp-5); color: #fff; }
.qm-video-side button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: #fff; font-size: 11px; cursor: pointer; }
.qm-video-side svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.qm-video-info { position: absolute; left: var(--qm-sp-5); right: 72px; bottom: var(--qm-sp-5); color: #fff; font-size: var(--qm-fs-sm); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.qm-video-info p { margin: var(--qm-sp-2) 0 0; opacity: .88; }
.qm-video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.qm-video-play span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); backdrop-filter: blur(8px); color: #fff; font-size: 22px; }
/* 分类卡片横滑 */
.qm-cat-scroll { display: flex; gap: var(--qm-sp-4); overflow-x: auto; padding: var(--qm-sp-2) 0 var(--qm-sp-4); scroll-snap-type: x mandatory; }
.qm-cat-card { flex: none; width: 156px; scroll-snap-align: start; padding: var(--qm-sp-5); border-radius: var(--qm-r-lg); background: var(--qm-surface); border: 1px solid var(--qm-border); text-align: left; transition: .2s var(--qm-ease); }
.qm-cat-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--qm-sh-lg); border-color: transparent; }
.qm-cat-card-ico { width: 42px; height: 42px; border-radius: var(--qm-r-md); display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--c, var(--qm-primary)) 12%, transparent); margin-bottom: var(--qm-sp-3); }
.qm-cat-card b { display: block; font-size: var(--qm-fs-base); }
.qm-cat-card em { font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 分类详情头 */
.qm-cat-hero { display: flex; gap: var(--qm-sp-6); align-items: center; padding: var(--qm-sp-7); border-radius: var(--qm-r-xl); background: var(--qm-surface); border: 1px solid var(--qm-border); box-shadow: var(--qm-sh-sm); }
.qm-cat-hero-avatar { width: 76px; height: 76px; flex: none; border-radius: var(--qm-r-xl); display: grid; place-items: center; font-size: 32px; background: color-mix(in srgb, var(--c, var(--qm-primary)) 14%, var(--qm-surface)); color: var(--c, var(--qm-primary)); }
.qm-cat-hero h1 { margin: 0 0 var(--qm-sp-2); font-size: var(--qm-fs-3xl); font-weight: var(--qm-fw-black); }
.qm-cat-hero p { margin: 0 0 var(--qm-sp-3); font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-cat-hero-stats { display: flex; gap: var(--qm-sp-5); font-size: var(--qm-fs-sm); color: var(--qm-text-3); }
.qm-cat-hero-stats b { color: var(--qm-text); font-weight: var(--qm-fw-bold); }
.qm-cat-hero-acts { margin-left: auto; display: flex; gap: var(--qm-sp-3); flex: none; }
/* 帖子详情 */
.qm-thread { padding: var(--qm-sp-8); }
.qm-thread-title { margin: var(--qm-sp-5) 0 var(--qm-sp-4); font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--qm-fw-black); line-height: 1.35; letter-spacing: var(--qm-ls-tight); }
.qm-thread-body { font-size: var(--qm-fs-lg); line-height: 1.85; }
.qm-thread-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--qm-sp-2); margin: var(--qm-sp-5) 0; }
.qm-thread-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--qm-r-sm); }
.qm-thread-topics { display: flex; flex-wrap: wrap; gap: var(--qm-sp-2); margin: var(--qm-sp-5) 0; }
.qm-thread-topics a { font-size: var(--qm-fs-sm); color: var(--qm-primary); }
.qm-thread-acts { display: flex; align-items: center; gap: var(--qm-sp-6); padding: var(--qm-sp-4) 0; border-top: 1px solid var(--qm-divider); border-bottom: 1px solid var(--qm-divider); font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-thread-acts button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.qm-thread-acts button.on { color: var(--qm-danger); }
/* ==========================================================================
* F. 发布
* ========================================================================*/
.qm-compose { max-width: 820px; margin-inline: auto; }
.qm-compose-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--qm-sp-3); margin-bottom: var(--qm-sp-6); }
.qm-type-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--qm-sp-2); padding: var(--qm-sp-5); border-radius: var(--qm-r-lg); border: 1px solid var(--qm-border); background: var(--qm-surface); cursor: pointer; transition: .2s var(--qm-ease); text-align: center; }
.qm-type-card input { position: absolute; opacity: 0; }
.qm-type-card svg { width: 22px; height: 22px; color: var(--qm-text-3); }
.qm-type-card b { font-size: var(--qm-fs-base); }
.qm-type-card em { font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-type-card:has(input:checked) { border-color: var(--qm-primary); background: var(--qm-primary-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-primary) 12%, transparent); }
.qm-type-card:has(input:checked) svg { color: var(--qm-primary); }
.qm-compose-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-5) 0; margin-top: var(--qm-sp-6); border-top: 1px solid var(--qm-divider); background: color-mix(in srgb, var(--qm-bg) 92%, transparent); backdrop-filter: blur(10px); }
.qm-compose-perm { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-compose-foot .qm-btn { margin-left: auto; }
/* ==========================================================================
* G. 消息中心
* ========================================================================*/
.qm-msg-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; min-height: 560px; border-radius: var(--qm-r-xl); overflow: hidden; border: 1px solid var(--qm-border); background: var(--qm-surface); box-shadow: var(--qm-sh-sm); }
@media (max-width: 900px) { .qm-msg-wrap { grid-template-columns: minmax(0, 1fr); } }
.qm-msg-list { border-right: 1px solid var(--qm-border); display: flex; flex-direction: column; }
.qm-msg-list-head { display: flex; align-items: center; gap: var(--qm-sp-3); padding: var(--qm-sp-5); border-bottom: 1px solid var(--qm-border); }
.qm-msg-list-head h2 { margin: 0; font-size: var(--qm-fs-lg); font-weight: var(--qm-fw-bold); }
.qm-msg-items { flex: 1; overflow: auto; }
.qm-msg-item { display: flex; gap: var(--qm-sp-3); padding: var(--qm-sp-4) var(--qm-sp-5); border-bottom: 1px solid var(--qm-divider); cursor: pointer; transition: background var(--qm-dur-1); position: relative; }
.qm-msg-item:hover { background: var(--qm-surface-hover); }
.qm-msg-item.unread { background: color-mix(in srgb, var(--qm-primary) 4%, var(--qm-surface)); }
.qm-msg-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--qm-primary); }
.qm-msg-item-main { flex: 1; min-width: 0; }
.qm-msg-item-top { display: flex; align-items: center; gap: var(--qm-sp-2); }
.qm-msg-item-top b { font-size: var(--qm-fs-base); font-weight: var(--qm-fw-semi); }
.qm-msg-item.unread .qm-msg-item-top b { font-weight: var(--qm-fw-bold); }
.qm-msg-item-top time { margin-left: auto; font-size: 11px; color: var(--qm-text-3); flex: none; }
.qm-msg-item-text { margin-top: 2px; font-size: var(--qm-fs-sm); color: var(--qm-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-msg-item.unread .qm-msg-item-text { color: var(--qm-text); }
.qm-chat { display: flex; flex-direction: column; }
.qm-chat-head { display: flex; align-items: center; gap: var(--qm-sp-3); padding: var(--qm-sp-4) var(--qm-sp-5); border-bottom: 1px solid var(--qm-border); }
.qm-chat-body { flex: 1; overflow: auto; padding: var(--qm-sp-6); display: flex; flex-direction: column; gap: var(--qm-sp-4); background: var(--qm-bg-soft); }
.qm-bubble { display: flex; gap: var(--qm-sp-3); max-width: 74%; }
.qm-bubble-in { align-self: flex-start; }
.qm-bubble-out { align-self: flex-end; flex-direction: row-reverse; }
.qm-bubble-body { padding: 10px 14px; border-radius: var(--qm-r-md); background: var(--qm-surface); font-size: var(--qm-fs-base); line-height: 1.7; box-shadow: var(--qm-sh-xs); }
.qm-bubble-out .qm-bubble-body { background: var(--qm-grad-brand); color: #fff; border-radius: var(--qm-r-md) var(--qm-r-md) var(--qm-r-xs) var(--qm-r-md); }
.qm-bubble-in .qm-bubble-body { border-radius: var(--qm-r-md) var(--qm-r-md) var(--qm-r-md) var(--qm-r-xs); }
.qm-bubble-meta { margin-top: 3px; font-size: 11px; color: var(--qm-text-3); }
.qm-bubble-out .qm-bubble-meta { text-align: right; }
.qm-chat-input { display: flex; gap: var(--qm-sp-3); padding: var(--qm-sp-4) var(--qm-sp-5); border-top: 1px solid var(--qm-border); background: var(--qm-surface); }
.qm-chat-input .qm-input { flex: 1; }
/* ==========================================================================
* H. 用户中心
* ========================================================================*/
.qm-uc-page { padding: var(--qm-sp-8) 0 var(--qm-sp-12); }
.qm-uc-hero { position: relative; overflow: hidden; padding: var(--qm-sp-8); border-radius: var(--qm-r-2xl); background: var(--qm-surface); border: 1px solid var(--qm-border); box-shadow: var(--qm-sh-md); }
.qm-uc-hero::before { content: ""; position: absolute; inset: 0; background: var(--qm-grad-hero); pointer-events: none; }
.qm-uc-hero.is-vip::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, color-mix(in srgb, var(--qm-vip-c1) 16%, transparent), transparent 60%);
}
.qm-uc-hero-in { position: relative; display: flex; align-items: flex-start; gap: var(--qm-sp-6); }
.qm-uc-hero-main { flex: 1; min-width: 0; }
.qm-uc-hero-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qm-sp-3); margin: 0 0 var(--qm-sp-2); font-size: var(--qm-fs-3xl); font-weight: var(--qm-fw-black); letter-spacing: var(--qm-ls-tight); }
.qm-uc-hero-num { display: flex; align-items: center; gap: var(--qm-sp-3); margin: var(--qm-sp-3) 0; font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-uc-hero-num .qm-number { font-size: var(--qm-fs-3xl); }
.qm-uc-hero-meta { display: flex; flex-wrap: wrap; gap: var(--qm-sp-4); font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-uc-hero-meta b { color: var(--qm-text); }
.qm-uc-hero-acts { display: flex; flex-wrap: wrap; gap: var(--qm-sp-2); margin-top: var(--qm-sp-5); }
.qm-uc-hero-side { flex: none; text-align: right; }
@media (max-width: 720px) { .qm-uc-hero-in { flex-direction: column; } .qm-uc-hero-side { text-align: left; } }
/* 卡片网格 */
.qm-uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--qm-sp-5); margin-top: var(--qm-sp-6); }
@media (max-width: 1000px) { .qm-uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qm-uc-grid { grid-template-columns: minmax(0, 1fr); } }
.qm-stat { display: flex; flex-direction: column; gap: var(--qm-sp-2); padding: var(--qm-sp-6); min-height: 132px; }
.qm-stat-label { display: flex; align-items: center; gap: var(--qm-sp-2); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-stat-value { font-size: var(--qm-fs-4xl); font-weight: var(--qm-fw-black); line-height: 1.1; letter-spacing: -.03em; }
.qm-stat-value small { font-size: var(--qm-fs-md); font-weight: var(--qm-fw-semi); color: var(--qm-text-3); }
.qm-stat-foot { margin-top: auto; display: flex; align-items: center; gap: var(--qm-sp-3); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-stat-actions { margin-left: auto; display: flex; gap: var(--qm-sp-2); }
.qm-stat.is-balance { background: linear-gradient(150deg, #EEF2FF, #E0E7FF 62%, #EDE9FE); border-color: #C7D2FE; }
.dark-mode .qm-stat.is-balance { background: linear-gradient(150deg, #1E1B4B, #262154); border-color: #3730A3; }
.qm-stat.is-vip { background: linear-gradient(150deg, #FFF9E8, #FFEFC9 62%, #FFE3B3); border-color: #F5D79A; }
.dark-mode .qm-stat.is-vip { background: linear-gradient(150deg, #2B2418, #3A2F1C); border-color: #55452A; }
/* 快捷入口 */
.qm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--qm-sp-3); }
@media (max-width: 640px) { .qm-quick { grid-template-columns: repeat(2, 1fr); } }
.qm-quick a { display: flex; flex-direction: column; align-items: center; gap: var(--qm-sp-2); padding: var(--qm-sp-5) var(--qm-sp-2); border-radius: var(--qm-r-md); background: var(--qm-surface); border: 1px solid var(--qm-border); font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-quick a:hover { border-color: var(--qm-primary-300); color: var(--qm-primary); transform: translateY(-2px); box-shadow: var(--qm-sh-sm); }
.qm-quick svg { width: 20px; height: 20px; }
.qm-quick b { font-size: var(--qm-fs-lg); color: var(--qm-text); }
/* 绑定行 */
.qm-bind-row { display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-4); border-radius: var(--qm-r-md); border: 1px solid var(--qm-border); }
.qm-bind-row + .qm-bind-row { margin-top: var(--qm-sp-3); }
.qm-bind-ico { width: 34px; height: 34px; flex: none; border-radius: var(--qm-r-sm); display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, var(--c, var(--qm-primary)) 12%, transparent); }
.qm-bind-main { flex: 1; min-width: 0; }
.qm-bind-main b { display: block; font-size: var(--qm-fs-base); }
.qm-bind-main em { font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* ==========================================================================
* I. 移动端页面骨架
* ========================================================================*/
.qm-m-head {
position: sticky; top: 0; z-index: var(--qm-z-sticky);
display: flex; align-items: center; gap: var(--qm-sp-3);
height: 52px; padding: 0 var(--qm-sp-4);
background: color-mix(in srgb, var(--qm-bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--qm-border);
}
.qm-m-head h1 { margin: 0; font-size: var(--qm-fs-xl); font-weight: var(--qm-fw-black); letter-spacing: var(--qm-ls-tight); }
.qm-m-head .qm-grow { display: flex; align-items: center; gap: var(--qm-sp-2); }
.qm-m-body { padding: var(--qm-sp-4); }
/* 移动端用户头 */
.qm-m-profile { position: relative; overflow: hidden; padding: var(--qm-sp-7) var(--qm-sp-5) var(--qm-sp-6); border-radius: var(--qm-r-2xl); color: #fff; background: linear-gradient(150deg, #4B3CC0, #6C5CE7 45%, #8B7BFF); }
.qm-m-profile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px 180px at 85% 0%, rgba(255, 255, 255, .28), transparent 70%); }
.qm-m-profile > * { position: relative; }
.qm-m-profile .qm-name { color: #fff; }
.qm-m-profile-stats { display: flex; gap: var(--qm-sp-6); margin-top: var(--qm-sp-5); font-size: var(--qm-fs-xs); opacity: .92; }
.qm-m-profile-stats b { display: block; font-size: var(--qm-fs-xl); font-weight: var(--qm-fw-black); }
/* 移动端抽屉菜单 */
.qm-m-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 78%; max-width: 320px; background: var(--qm-surface); box-shadow: var(--qm-sh-xl); padding: var(--qm-sp-6); animation: qmSlideRight var(--qm-dur-3) var(--qm-ease-out); }
@keyframes qmSlideRight { from { transform: translateX(-100%); } to { transform: none; } }
/* ==========================================================================
* J. 后台主题设置
* ========================================================================*/
.qm-admin { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; background: var(--qm-bg); }
.qm-admin-nav { background: var(--qm-surface); border-right: 1px solid var(--qm-border); padding: var(--qm-sp-5) var(--qm-sp-3); }
.qm-admin-nav a { display: flex; align-items: center; gap: var(--qm-sp-3); padding: 9px 12px; border-radius: var(--qm-r-sm); font-size: var(--qm-fs-base); color: var(--qm-text-2); }
.qm-admin-nav a:hover { background: var(--qm-surface-hover); color: var(--qm-text); }
.qm-admin-nav a.on { background: var(--qm-primary-50); color: var(--qm-primary); font-weight: var(--qm-fw-semi); }
.qm-admin-nav a svg { width: 16px; height: 16px; opacity: .8; }
.qm-admin-nav-sec { margin: var(--qm-sp-4) 0 var(--qm-sp-2); padding: 0 12px; font-size: 11px; letter-spacing: var(--qm-ls-wide); text-transform: uppercase; color: var(--qm-text-3); }
.qm-admin-main { display: flex; flex-direction: column; min-width: 0; }
.qm-admin-brand { display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-5) var(--qm-sp-8); background: linear-gradient(100deg, #241C4E, #3B2E85 55%, #4B3CC0); color: #fff; }
.qm-admin-brand b { font-size: var(--qm-fs-lg); font-weight: var(--qm-fw-bold); }
.qm-admin-brand span { margin-left: auto; font-size: var(--qm-fs-xs); opacity: .7; letter-spacing: var(--qm-ls-wide); }
.qm-admin-body { padding: var(--qm-sp-8); flex: 1; }
.qm-admin-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--qm-sp-4); padding: var(--qm-sp-4) var(--qm-sp-8); background: var(--qm-surface); border-top: 1px solid var(--qm-border); box-shadow: 0 -4px 20px rgba(22, 27, 40, .06); }
.qm-admin-bar .qm-btn-text { margin-right: auto; }
/* 后台卡片网格 */
.qm-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--qm-sp-5); }
/* 财务小卡 */
.qm-fin-card { padding: var(--qm-sp-5) var(--qm-sp-6); }
.qm-fin-card .k { display: flex; align-items: center; gap: var(--qm-sp-2); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-fin-card .v { margin-top: var(--qm-sp-2); font-size: var(--qm-fs-3xl); font-weight: var(--qm-fw-black); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qm-fin-card .d { margin-top: var(--qm-sp-2); font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* 简易柱状图（纯 CSS） */
.qm-bars { display: flex; align-items: flex-end; gap: var(--qm-sp-3); height: 150px; padding-top: var(--qm-sp-4); }
.qm-bars i { flex: 1; border-radius: var(--qm-r-xs) var(--qm-r-xs) 0 0; background: var(--qm-grad-brand); opacity: .9; position: relative; min-height: 4px; }
.qm-bars i:nth-child(even) { background: linear-gradient(180deg, var(--qm-primary-300), var(--qm-primary-100)); }
.qm-bars-x { display: flex; gap: var(--qm-sp-3); margin-top: var(--qm-sp-2); font-size: 10px; color: var(--qm-text-3); }
.qm-bars-x span { flex: 1; text-align: center; }
/* ---------- 法律文档页：用户协议 / 隐私政策（2.6.6） ---------- */
.qm-legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--qm-sp-6); align-items: start; }
.qm-legal-toc { position: sticky; top: calc(var(--qm-header-h) + 16px); padding: var(--qm-sp-5); font-size: var(--qm-fs-sm); min-width: 0; }
.qm-legal-toc > b { display: block; margin-bottom: var(--qm-sp-3); font-size: var(--qm-fs-xs); font-weight: var(--qm-fw-semi); letter-spacing: var(--qm-ls-wide); color: var(--qm-text-3); }
.qm-legal-toc-nav { display: flex; flex-direction: column; gap: 2px; max-height: 62vh; overflow-y: auto; }
.qm-legal-toc-nav > span { color: var(--qm-text-3); font-size: var(--qm-fs-xs); }
.qm-legal-toc-nav a {
padding: 6px var(--qm-sp-3);
border-left: 2px solid transparent;
border-radius: 0 var(--qm-r-xs) var(--qm-r-xs) 0;
color: var(--qm-text-2); line-height: 1.5;
transition: color var(--qm-dur-1) var(--qm-ease), background var(--qm-dur-1) var(--qm-ease);
}
.qm-legal-toc-nav a:hover { color: var(--qm-primary); background: var(--qm-surface-hover); }
.qm-legal-toc-nav a.on { color: var(--qm-primary); border-left-color: var(--qm-primary); background: var(--qm-primary-50); font-weight: var(--qm-fw-medium); }
.qm-legal-toc-foot { margin-top: var(--qm-sp-4); padding-top: var(--qm-sp-3); border-top: 1px solid var(--qm-divider); font-size: var(--qm-fs-xs); }
.qm-legal-toc-foot a { color: var(--qm-text-3); }
.qm-legal-doc .qm-prose h2 { scroll-margin-top: calc(var(--qm-header-h) + 24px); }
.qm-legal-doc .qm-prose > h2:first-child { margin-top: 0; }
.qm-legal-foot {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--qm-sp-3);
margin-top: var(--qm-sp-8); padding-top: var(--qm-sp-5);
border-top: 1px dashed var(--qm-border);
}
@media (max-width: 900px) {
.qm-legal-layout { grid-template-columns: minmax(0, 1fr); }
.qm-legal-toc { position: static; order: -1; padding: var(--qm-sp-4); }
.qm-legal-toc-nav { flex-direction: row; gap: var(--qm-sp-2); overflow-x: auto; max-height: none; }
.qm-legal-toc-nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--qm-r-xs); }
.qm-legal-toc-nav a.on { border-left-color: transparent; border-bottom-color: var(--qm-primary); }
.qm-legal-toc-foot { display: none; }
}
/* ==========================================================================
用户中心 2.0（2.6.8）：封面头部卡 + 统计条 + 左侧栏导航
参照主流社区主题布局：cover 渐变/自定义图 → 头像上浮叠加 → 统计数字条
======================================================================== */
.qm-uc-head { position: relative; overflow: hidden; border-radius: var(--qm-r-2xl); background: var(--qm-surface); border: 1px solid var(--qm-border); box-shadow: var(--qm-sh-md); }
.qm-uc-cover { position: relative; height: 168px; background: var(--qm-grad-brand), var(--qm-grad-hero); background-size: cover; background-position: center; }
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover { background-image: var(--qm-uc-cover); background-size: cover; background-position: center; }
.qm-uc-head.is-vip .qm-uc-cover { background-image: var(--qm-grad-vip), var(--qm-grad-hero); }
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover { background-image: var(--qm-uc-cover); }
.qm-uc-cover-mask { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,22,34,.32) 0%, rgba(20,22,34,0) 55%); pointer-events: none; }
.qm-uc-head-in { display: flex; align-items: flex-end; gap: var(--qm-sp-5); padding: 0 var(--qm-sp-7); }
.qm-uc-avatar { width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--qm-surface); box-shadow: var(--qm-sh-md); margin-top: -54px; margin-bottom: calc(-1 * var(--qm-sp-2)); flex: none; background: var(--qm-bg-soft); object-fit: cover; }
.qm-uc-head-main { flex: 1; min-width: 0; padding: var(--qm-sp-3) 0 var(--qm-sp-4); }
.qm-uc-head-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qm-sp-3); margin: 0; font-size: var(--qm-fs-2xl); font-weight: var(--qm-fw-black); letter-spacing: var(--qm-ls-tight); }
.qm-uc-head-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qm-sp-2); margin: var(--qm-sp-2) 0 0; font-size: var(--qm-fs-sm); }
.qm-uc-head-sub .qm-number { font-size: var(--qm-fs-lg); }
.qm-uc-head-acts { display: flex; gap: var(--qm-sp-2); padding-bottom: var(--qm-sp-5); flex: none; }
.qm-btn-glass { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.38); backdrop-filter: blur(6px); }
.qm-btn-glass:hover { background: rgba(255,255,255,.28); color: #fff; }
.qm-badge-sm { font-size: var(--qm-fs-xs); padding: 2px 8px; }
.qm-uc-stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qm-sp-2); padding: var(--qm-sp-4) var(--qm-sp-7); border-top: 1px solid var(--qm-divider); }
.qm-uc-stats > a { display: flex; align-items: baseline; gap: 6px; padding: 2px var(--qm-sp-4); border-right: 1px solid var(--qm-divider); text-decoration: none; }
.qm-uc-stats > a:last-of-type { border-right: 0; }
.qm-uc-stats b { font-size: var(--qm-fs-xl); font-weight: var(--qm-fw-bold); font-variant-numeric: tabular-nums; }
.qm-uc-stats span { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-uc-stats > a:hover b { color: var(--qm-primary); }
.qm-uc-stats-extra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--qm-sp-3); margin-left: auto; font-size: var(--qm-fs-sm); }
/* 左侧栏 + 内容 */
.qm-uc-layout { display: flex; gap: var(--qm-sp-5); align-items: flex-start; margin-top: var(--qm-sp-5); }
.qm-uc-side { width: 232px; flex: none; position: sticky; top: calc(var(--qm-head-h, 64px) + 16px); }
.qm-uc-nav { display: flex; flex-direction: column; padding: var(--qm-sp-2); }
.qm-uc-nav-item { display: flex; align-items: center; gap: var(--qm-sp-3); padding: 11px var(--qm-sp-4); border-radius: var(--qm-r-md); color: var(--qm-text-2); font-size: var(--qm-fs-base); text-decoration: none; transition: background var(--qm-dur-2) var(--qm-ease), color var(--qm-dur-2) var(--qm-ease); }
.qm-uc-nav-item:hover { background: var(--qm-bg-soft); color: var(--qm-text); }
.qm-uc-nav-item.on { background: var(--qm-primary-soft, rgba(108,92,231,.1)); color: var(--qm-primary); font-weight: var(--qm-fw-semibold); }
.qm-uc-nav-item span { flex: 1; }
.qm-uc-nav-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--qm-danger); color: #fff; font-size: var(--qm-fs-xs); font-style: normal; line-height: 18px; text-align: center; font-weight: var(--qm-fw-bold); }
.qm-uc-body { flex: 1; min-width: 0; }
@media (max-width: 768px) {
.qm-uc-cover { height: 120px; }
/* 手机端资料头去掉卡片感：无底、无边、无投影，融入页面（2.6.8-f11） */
.qm-uc-page .qm-uc-head { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.qm-uc-head-in { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 2px; }
.qm-uc-avatar { width: 84px; height: 84px; margin-top: -42px; }
.qm-uc-head-acts { padding-bottom: var(--qm-sp-4); }
.qm-uc-stats { padding: var(--qm-sp-3) var(--qm-sp-5); }
.qm-uc-stats-extra { margin-left: 0; width: 100%; }
.qm-uc-layout { flex-direction: column; }
.qm-uc-side { position: static; width: 100%; }
.qm-uc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
.qm-uc-nav::-webkit-scrollbar { display: none; }
.qm-uc-nav-item { white-space: nowrap; padding: 8px var(--qm-sp-3); }
.qm-uc-nav-item span { flex: none; }
}
/* 暗色 */
html[data-qm-theme="dark"] .qm-btn-glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }
html[data-qm-theme="dark"] .qm-uc-nav-item.on { background: rgba(108,92,231,.22); }
/* ============ 2.6.8 首页补充：轮播搜索行 / 侧栏搜索与发帖入口 ============ */
.qm-hero-searchline { margin-top: var(--qm-sp-6); }
.qm-hero-searchline .qm-hero-search { margin-bottom: var(--qm-sp-4); }
.qm-hero-searchline .qm-hero-hot { margin-bottom: 0; }
.qm-side-search { width: 100%; margin: 0; box-shadow: none; padding: 4px 4px 4px 14px; }
.qm-side-search input { font-size: var(--qm-fs-sm); }
.qm-widget-cta { text-align: center; }
.qm-widget-cta p { margin: 0 0 var(--qm-sp-4); font-size: var(--qm-fs-sm); line-height: 1.7; }
.qm-widget-cta .qm-btn { display: inline-block; }
/* ============ 2.6.8-f8 用户中心仪表盘（排版稿重排） ============ */
.qm-uc-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .qm-uc-grid.is-2 { grid-template-columns: minmax(0, 1fr); } }
/* ① 个人信息卡 */
.qm-uc-info-main { display: flex; gap: var(--qm-sp-5); align-items: flex-start; }
.qm-uc-info-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--qm-surface); box-shadow: var(--qm-sh-lg); }
.qm-uc-info-name { margin: 2px 0 var(--qm-sp-3); font-size: var(--qm-fs-2xl); font-weight: var(--qm-fw-black); display: flex; align-items: center; gap: var(--qm-sp-2); flex-wrap: wrap; }
.qm-uc-info-row { margin: 5px 0; font-size: var(--qm-fs-sm); color: var(--qm-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qm-uc-info-row b { color: var(--qm-text); font-weight: var(--qm-fw-bold); }
.qm-uc-info-acts { display: flex; gap: var(--qm-sp-3); flex-wrap: wrap; margin-top: var(--qm-sp-5); padding-top: var(--qm-sp-4); border-top: 1px dashed var(--qm-divider); }
/* ② 侧栏信息卡 */
.qm-uc-widgets { display: flex; flex-direction: column; gap: var(--qm-sp-4); margin-top: var(--qm-sp-4); }
.qm-uc-widget { padding: var(--qm-sp-5); }
.qm-uc-widget h3 { display: flex; align-items: center; gap: var(--qm-sp-2); margin: 0 0 var(--qm-sp-3); font-size: var(--qm-fs-md); font-weight: var(--qm-fw-bold); }
.qm-uc-widget h3::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--qm-grad-brand); }
.qm-uc-quick-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--qm-divider); font-size: var(--qm-fs-sm); color: var(--qm-text); }
.qm-uc-quick-item:last-of-type { border-bottom: 0; }
.qm-uc-quick-item svg { color: var(--qm-text-3); flex: none; }
.qm-uc-quick-item i { margin-left: auto; font-style: normal; font-size: var(--qm-fs-xs); font-weight: var(--qm-fw-bold); color: var(--qm-primary); }
.qm-uc-quick-item em.qm-tag { margin-left: auto; flex: none; }
.qm-uc-msg-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--qm-divider); font-size: var(--qm-fs-sm); color: var(--qm-text); }
.qm-uc-msg-item span { flex: 1; min-width: 0; color: var(--qm-text-2); }
.qm-uc-msg-item i { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--qm-r-full); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: var(--qm-fw-bold); color: #fff; background: var(--qm-danger); }
.qm-uc-widget-more { display: block; margin-top: var(--qm-sp-3); font-size: var(--qm-fs-sm); }
.qm-uc-widget-bind > .qm-uc-panel > h3 { display: none; }
.qm-uc-widget-bind .qm-uc-panel { padding: 0; }
.qm-uc-widget-bind .qm-bind-row { padding: var(--qm-sp-3); }
@media (max-width: 768px) {
.qm-uc-info-main { gap: var(--qm-sp-4); }
.qm-uc-info-avatar { width: 64px; height: 64px; }
.qm-uc-info-acts .qm-btn { flex: 1 1 40%; justify-content: center; }
}
/* ============ 2.6.8-f9 用户中心：后台可配置 + 宽度间距规范 ============ */
/* 桌面：侧栏 280px、卡片圆角 8px、卡片间距 16px */
.qm-uc-layout { gap: 16px; }
.qm-uc-side { width: clamp(208px, 19vw, 280px); }
.qm-uc-page .qm-card { border-radius: 8px; }
.qm-uc-mods { margin-top: 16px; }
.qm-uc-mods + .qm-uc-m-edit { margin-top: 16px; }
.qm-uc-grid.is-1 { grid-template-columns: minmax(0, 1fr); }
.qm-uc-m-profile, .qm-uc-m-history, .qm-uc-m-fav { grid-column: 1 / -1; }
.qm-uc-widgets { margin-top: 16px; }
/* 2.6.8-f11：用户中心与全站同宽（后台「内容宽度」统一控制，默认 1200），卡片跟随屏幕 */
.qm-uc-head-in { flex-wrap: wrap; }
.qm-uc-head-main { flex: 1 1 320px; }
.qm-uc-head-acts { flex-wrap: wrap; }
.qm-uc-cover { height: clamp(112px, 15vw, 176px); }
.qm-uc-avatar { width: clamp(72px, 9vw, 108px); height: clamp(72px, 9vw, 108px); margin-top: calc(clamp(72px, 9vw, 108px) / -2); }
.qm-uc-info-main { flex-wrap: wrap; }
.qm-uc-info-avatar { width: clamp(56px, 7vw, 88px); height: clamp(56px, 7vw, 88px); }
.qm-uc-info-body { flex: 1 1 260px; min-width: 0; }
.qm-uc-info-number { row-gap: 6px; }
.qm-uc-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .qm-uc-page .qm-uc-side { width: 100%; } }
@media (max-width: 640px) { .qm-uc-grid.is-2 { grid-template-columns: minmax(0, 1fr); } }
/* 移动端（≤768px）：整页展平为单列，按固定交错顺序堆叠 */
@media (max-width: 768px) {
.qm-uc-page > .qm-container { display: flex; flex-direction: column; }
.qm-uc-page .qm-uc-head { order: 0; }
.qm-uc-page .qm-flash { order: 0; }
.qm-uc-layout { display: contents; }
.qm-uc-body, .qm-uc-side, .qm-uc-widgets, .qm-uc-mods { display: contents; }
.qm-uc-page .qm-uc-nav { order: 1; margin-bottom: 16px; }
.qm-uc-m { margin: 0 0 16px; }
.qm-uc-m-profile { order: 2; }
.qm-uc-m-pretty { order: 3; }
.qm-uc-m-balance { order: 4; }
.qm-uc-m-member { order: 5; }
.qm-uc-m-auth { order: 6; }
.qm-uc-m-level { order: 7; }
.qm-uc-m-quick { order: 8; }
.qm-uc-m-bind { order: 9; }
.qm-uc-m-msgs { order: 10; }
.qm-uc-m-orders { order: 11; }
.qm-uc-m-fav { order: 12; }
.qm-uc-m-history { order: 13; }
.qm-uc-m-edit { order: 14; }
.qm-uc-m-settings{ order: 15; }
/* 底部预留悬浮栏高度，五按钮不遮挡最后一张卡片 */
.qm-uc-page { padding-bottom: 88px; }
/* 点击导航后直接落到内容区，不用再往下翻 */
#qm-uc-main { scroll-margin-top: calc(var(--qm-head-h, 64px) + 12px); }
}
/* ==========================================================================
* 2.6.8-f12 资料卡封面（2000×800 物料）+ 靓号英雄卡 + 手机端头部与资料头
* ========================================================================*/
/* 资料卡封面：按物料 2.5:1 裁切，电脑最高 300、手机不挤压 */
.qm-uc-head { overflow: hidden; }
.qm-uc-cover {
height: auto;
aspect-ratio: 2000 / 800;
min-height: 108px;
max-height: 300px;
background-size: cover;
background-position: center;
}
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover { background-image: var(--qm-uc-cover); }
/* ---------- 靓号英雄卡 ---------- */
.qm-uc-m-pretty { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.qm-pretty-hero {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 6px;
padding: 15px 17px 16px;
min-height: 148px;
border-radius: var(--qm-r-lg);
color: #fff;
background:
radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--c, #E9A94E) 52%, transparent) 0%, transparent 58%),
linear-gradient(152deg, #1C1533 0%, #251A41 46%, #120E22 100%);
border: 1px solid color-mix(in srgb, var(--c, #E9A94E) 36%, transparent);
box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--c, #E9A94E) 62%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.qm-pretty-hero.is-empty {
background: linear-gradient(152deg, #241C3C 0%, #17112A 70%);
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 12px 26px -18px rgba(20, 16, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.qm-pretty-aura {
position: absolute; top: -50%; right: -18%; width: 62%; height: 190%;
background: radial-gradient(circle, color-mix(in srgb, var(--c, #E9A94E) 48%, transparent), transparent 62%);
filter: blur(16px); opacity: .9; pointer-events: none;
}
/* 表面斜扫光：慢速一次，和「靓」字节奏一致 */
.qm-pretty-hero::after {
content: ""; position: absolute; inset: -30% -10%;
background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .04) 55%, transparent 64%);
transform: translateX(-120%);
animation: qmPrettyCard 6.8s cubic-bezier(.42, 0, .28, 1) infinite;
pointer-events: none;
}
@keyframes qmPrettyCard {
0%, 52% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) { .qm-pretty-hero::after { animation: none; opacity: 0; } }
.qm-pretty-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qm-pretty-cap {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255, 255, 255, .7);
}
.qm-pretty-tag {
font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: 999px;
color: #fff; background: color-mix(in srgb, var(--c, #E9A94E) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--c, #E9A94E) 55%, #fff);
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--c, #E9A94E) 80%, transparent);
}
.qm-pretty-num {
position: relative;
font-size: clamp(26px, 3.4vw, 34px);
line-height: 1.08;
letter-spacing: .06em;
}
.qm-pretty-none { font-size: var(--qm-fs-xl); font-weight: 800; color: rgba(255, 255, 255, .58); letter-spacing: 0; }
.qm-pretty-sub { position: relative; display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255, 255, 255, .55); }
.qm-pretty-sub i { width: 1px; height: 10px; background: rgba(255, 255, 255, .22); }
.qm-pretty-acts { position: relative; display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.qm-pretty-acts .qm-btn { border-radius: 999px; }
.qm-pretty-main {
background: linear-gradient(135deg, color-mix(in srgb, var(--c, #E9A94E) 92%, #fff), color-mix(in srgb, var(--c, #E9A94E) 74%, #000));
color: #fff; border: 0;
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c, #E9A94E) 90%, transparent);
}
.qm-pretty-main:hover { color: #fff; filter: brightness(1.06); }
.qm-pretty-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .26); }
.qm-pretty-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
/* 我的靓号页：更大的英雄卡 */
.qm-pretty-hero-lg { min-height: 178px; padding: 20px 22px 20px; margin-bottom: 16px; }
.qm-pretty-hero-lg .qm-pretty-num { font-size: clamp(30px, 4.6vw, 46px); }
.qm-pretty-hero-lg .qm-pretty-sub { font-size: var(--qm-fs-xs); }
/* 头像一律等比裁切，不被 flex 压扁 */
.qm-avatar { object-fit: cover; flex: none; }
.qm-uc-avatar, .qm-uc-info-avatar { flex: none; object-fit: cover; aspect-ratio: 1; }
/* ---------- 手机端：头部排布 / 资料头高度 ---------- */
@media (max-width: 900px) {
.qm-header-in { gap: 10px; }
.qm-logo { flex: 1 1 auto; min-width: 0; gap: 8px; }
.qm-logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-logo .qm-logo-img { --qm-logo-h: 26px; --qm-logo-w: 78px; }
.qm-header-actions { gap: 8px; }
.qm-userpill { flex: none; }
.qm-userpill .qm-avatar { border-radius: 50%; }
}
@media (max-width: 768px) {
/* 资料头：封面按比例、统计四列紧凑，整卡不再被撑高 */
.qm-uc-cover { aspect-ratio: 2000 / 800; min-height: 96px; max-height: 170px; }
.qm-uc-head-in { padding: 0 2px; }
.qm-uc-head-main { padding: 8px 0 4px; }
.qm-uc-head-name { font-size: var(--qm-fs-xl); gap: 8px; }
.qm-uc-head-sub { margin-top: 2px; }
.qm-uc-head-sub .qm-number { font-size: var(--qm-fs-base); }
.qm-uc-head-acts { padding-bottom: 8px; gap: 6px; }
.qm-uc-head-acts .qm-btn { padding: 6px 12px; font-size: var(--qm-fs-xs); }
.qm-uc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 10px 2px; }
.qm-uc-stats > a { flex-direction: column; align-items: center; gap: 0; padding: 0; border-right: 0; }
.qm-uc-stats b { font-size: var(--qm-fs-lg); line-height: 1.2; }
.qm-uc-stats span { font-size: 10px; }
.qm-uc-stats-extra { width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--qm-divider); font-size: 11px; }
/* 靓号卡手机端更紧凑 */
.qm-pretty-hero { padding: 13px 15px 14px; min-height: 138px; }
.qm-pretty-hero-lg { min-height: 156px; padding: 16px 16px 16px; }
}
/* 手机端「我的」页：资料卡整体收紧，避免一张卡占满一屏 */
@media (max-width: 768px) {
.qm-uc-page .qm-uc-m { padding: 14px; }
.qm-uc-m-profile { padding: 12px 14px 14px; }
.qm-uc-info-main { gap: 10px; align-items: center; }
.qm-uc-info-avatar { width: 56px; height: 56px; }
.qm-uc-info-name { font-size: var(--qm-fs-lg); gap: 6px; }
.qm-uc-info-row { font-size: var(--qm-fs-xs); gap: 6px; margin: 4px 0 0; }
.qm-uc-info-row .qm-progress { width: 74px !important; }
.qm-uc-info-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.qm-uc-info-acts .qm-btn { width: 100%; justify-content: center; padding: 8px 10px; font-size: var(--qm-fs-xs); }
}
/* ============ 2.6.8-f13 用户中心「点击即得」：收藏列表 / 编辑资料独立页 ============ */
.qm-uc-fav-list { display: flex; flex-direction: column; gap: 8px; }
.qm-uc-fav-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: var(--qm-r-md);
background: var(--qm-bg-soft); color: var(--qm-text); text-decoration: none;
transition: background var(--qm-dur-2), transform var(--qm-dur-2) var(--qm-spring);
}
.qm-uc-fav-item:hover { background: var(--qm-primary-soft, rgba(108, 92, 231, .1)); transform: translateX(2px); }
.qm-uc-fav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--qm-fs-sm); font-weight: var(--qm-fw-semibold); }
.qm-uc-fav-item em { flex: none; font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
@media (max-width: 768px) {
.qm-uc-fav-item { padding: 10px 12px; }
}
/* ==========================================================================
* 2.6.8-f14 资料卡封面铺满整卡 + 头像/封面可换（用户中心）
* 之前封面只是顶部一条 168px 的横条，与下方白底生硬接缝，看着奇怪；
* 现在封面作为整卡背景 cover 铺满，内容层叠在图上并加渐变蒙版保证白字可读。
* ========================================================================*/
.qm-uc-head {
position: relative;
display: flex;
flex-direction: column;
min-height: 236px;
isolation: isolate;
background: linear-gradient(150deg, #241C3C 0%, #17112A 100%);
}
/* 封面层：绝对定位铺满整卡（覆盖 f12 的 2000:800 条带写法） */
.qm-uc-head .qm-uc-cover {
position: absolute;
inset: 0;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: auto;
z-index: 0;
background-image: var(--qm-grad-brand), var(--qm-grad-hero);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover { background-image: var(--qm-uc-cover); }
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover-mask {
background: linear-gradient(180deg, rgba(12,14,24,.06) 0%, rgba(12,14,24,.30) 42%, rgba(12,14,24,.74) 100%);
}
.qm-uc-head .qm-uc-cover-mask {
background: linear-gradient(180deg, rgba(12,14,24,.10) 0%, rgba(12,14,24,.34) 46%, rgba(12,14,24,.72) 100%);
}
/* 内容层浮在封面之上 */
.qm-uc-head .qm-uc-head-in {
position: relative;
z-index: 1;
margin-top: auto;
align-items: center;
padding: 30px var(--qm-sp-7) var(--qm-sp-5);
}
.qm-uc-head .qm-uc-avatar-wrap { position: relative; flex: none; display: block; line-height: 0; }
.qm-uc-head .qm-uc-avatar {
margin: 0;
border-color: rgba(255, 255, 255, .92);
box-shadow: 0 10px 24px -10px rgba(8, 10, 20, .7);
}
.qm-uc-head-name { color: #fff; text-shadow: 0 1px 12px rgba(8, 10, 20, .45); }
.qm-uc-head .qm-uc-head-sub .qm-number { text-shadow: 0 1px 7px rgba(8, 10, 20, .55); }
.qm-uc-head-sub,
.qm-uc-head-sub .qm-dim { color: rgba(255, 255, 255, .84); }
.qm-uc-head-sub .qm-link { color: #fff; }
.qm-uc-stats { position: relative; z-index: 1; }
/* 统计条：玻璃条压在封面上 */
.qm-uc-head .qm-uc-stats {
border-top: 1px solid rgba(255, 255, 255, .18);
background: rgba(10, 12, 20, .30);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
}
.qm-uc-head .qm-uc-stats > a { border-right-color: rgba(255, 255, 255, .16); }
.qm-uc-head .qm-uc-stats b { color: #fff; }
.qm-uc-head .qm-uc-stats span { color: rgba(255, 255, 255, .72); }
.qm-uc-head .qm-uc-stats > a:hover b { color: #fff; opacity: .82; }
.qm-uc-head .qm-uc-stats-extra .qm-dim { color: rgba(255, 255, 255, .72); }
/* 封面右上角「更换封面」 */
.qm-uc-cover-edit {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .42);
background: rgba(12, 14, 24, .34);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #fff;
font-size: var(--qm-fs-xs);
line-height: 1;
cursor: pointer;
transition: background var(--qm-dur-2) var(--qm-ease), transform var(--qm-dur-2) var(--qm-ease);
}
.qm-uc-cover-edit:hover { background: rgba(12, 14, 24, .58); transform: translateY(-1px); }
.qm-uc-cover-edit svg { width: 15px; height: 15px; }
/* 头像右下角小相机 */
.qm-uc-avatar-edit {
position: absolute;
right: 0;
bottom: 2px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 2px solid rgba(255, 255, 255, .92);
border-radius: 50%;
background: var(--qm-primary, #6C5CE7);
color: #fff;
cursor: pointer;
transition: transform var(--qm-dur-2) var(--qm-spring), filter var(--qm-dur-2);
}
.qm-uc-avatar-edit:hover { transform: scale(1.08); filter: brightness(1.08); }
.qm-uc-avatar-edit svg { width: 13px; height: 13px; }
/* ---------- 编辑资料里的头像 / 封面上传区 ---------- */
.qm-uc-media { display: grid; gap: 12px; margin: 0 0 var(--qm-sp-5); }
.qm-uc-media-item {
display: flex;
align-items: center;
gap: var(--qm-sp-4);
padding: 12px;
border-radius: var(--qm-r-lg);
border: 1px solid var(--qm-border);
background: var(--qm-bg-soft);
}
.qm-uc-media-item.is-cover { display: block; }
.qm-uc-media-av {
position: relative;
flex: none;
width: 76px;
height: 76px;
padding: 0;
border: 0;
border-radius: 50%;
overflow: hidden;
background: var(--qm-surface);
box-shadow: var(--qm-sh-sm);
cursor: pointer;
}
.qm-uc-media-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qm-uc-media-av .qm-uc-media-cam {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 14, 24, .62);
color: #fff;
font-style: normal;
}
.qm-uc-media-av .qm-uc-media-cam svg { width: 13px; height: 13px; }
.qm-uc-media-body { flex: 1; min-width: 0; }
.qm-uc-media-body b { display: block; font-size: var(--qm-fs-base); font-weight: var(--qm-fw-semibold); margin-bottom: 2px; }
.qm-uc-media-body p { margin: 0 0 8px; font-size: var(--qm-fs-xs); color: var(--qm-text-3); line-height: 1.6; }
.qm-uc-media-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.qm-uc-media-cover {
position: relative;
display: block;
width: 100%;
aspect-ratio: 2000 / 800;
max-height: 190px;
margin-bottom: 10px;
padding: 0;
border: 0;
border-radius: var(--qm-r-md);
overflow: hidden;
cursor: pointer;
background: var(--qm-bg-soft);
}
.qm-uc-media-cover-img {
position: absolute;
inset: 0;
display: block;
background-image: linear-gradient(150deg, #241C3C 0%, #17112A 100%);
background-size: cover;
background-position: center;
transition: transform var(--qm-dur-3) var(--qm-ease);
}
.qm-uc-media-cover:hover .qm-uc-media-cover-img { transform: scale(1.02); }
.qm-uc-media-cover .qm-uc-media-cam {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(12, 14, 24, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #fff;
font-size: 11px;
font-style: normal;
line-height: 1;
}
.qm-uc-media-cover .qm-uc-media-cam svg { width: 14px; height: 14px; }
/* 上传中的状态：可选图元素降透明度，避免连点 */
.qm-img-busy [data-qm-img] { opacity: .55; pointer-events: none; }
/* ---------- 手机端：封面仍铺满，内容更紧凑 ---------- */
@media (max-width: 768px) {
.qm-uc-page .qm-uc-head {
min-height: 196px;
border: 0;
border-radius: var(--qm-r-lg);
box-shadow: var(--qm-sh-sm);
overflow: hidden;
background: linear-gradient(150deg, #241C3C 0%, #17112A 100%);
}
.qm-uc-head .qm-uc-head-in {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 18px 12px 10px;
}
.qm-uc-head .qm-uc-avatar { width: 64px; height: 64px; border-width: 3px; }
.qm-uc-head .qm-uc-head-main { flex: 1 1 auto; min-width: 0; padding: 0; }
.qm-uc-head .qm-uc-head-name { font-size: var(--qm-fs-lg); gap: 6px; }
.qm-uc-head .qm-uc-head-sub { margin-top: 2px; font-size: var(--qm-fs-xs); }
.qm-uc-head .qm-uc-head-acts { width: 100%; padding: 4px 0 0; gap: 6px; }
.qm-uc-head .qm-uc-head-acts .qm-btn { padding: 6px 12px; font-size: var(--qm-fs-xs); }
.qm-uc-head .qm-uc-stats { padding: 9px 10px 10px; }
.qm-uc-head .qm-uc-stats-extra { border-top-color: rgba(255, 255, 255, .2); padding-top: 6px; margin-top: 6px; }
.qm-uc-cover-edit { top: 10px; right: 10px; padding: 5px 10px; font-size: 11px; gap: 4px; }
.qm-uc-cover-edit svg { width: 13px; height: 13px; }
.qm-uc-avatar-edit { width: 26px; height: 26px; bottom: 0; }
.qm-uc-media-item { gap: 12px; padding: 10px; }
.qm-uc-media-av { width: 64px; height: 64px; }
.qm-uc-media-cover { max-height: 150px; }
}
/* ==========================================================================
* 2.6.8-f15 手机端首页适配修复
* 根因：主题没有全局 img 保护，2000px 宽的物料图直接当文章封面时，
* 固有宽度会把 ≤700px 断点下的 1fr 网格轨道撑爆，整页出现横向滚动。
* 全局 img{max-width:100%} 与断点 minmax(0,1fr) 已加（components.css / 各断点），
* 这里再收紧首屏与 CTA 的手机端表现。
* ========================================================================*/
@media (max-width: 768px) {
/* 首屏高度收紧，别一屏只剩 hero */
.qm-hero-in { padding: var(--qm-sp-9) 0 var(--qm-sp-8); }
.qm-hero-sub { font-size: var(--qm-fs-base); margin-bottom: var(--qm-sp-6); }
.qm-hero-hot { margin-bottom: var(--qm-sp-6); }
/* CTA 三按钮均分一行，不再依赖固定 min-width 换行 */
.qm-hero-cta { gap: var(--qm-sp-2); }
.qm-hero-cta .qm-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--qm-sp-3); }
/* 公告条：文案可换行，按钮不再被挤出屏幕 */
.qm-assist { flex-wrap: wrap; row-gap: 6px; }
.qm-assist-actions { margin-left: auto; }
}
/* ==========================================================================
* 2.6.8-f18 头像防压扁 + 右下角认证标识
* 手机端部分容器（flex 收缩 / 全局 img height:auto）会把头像挤成椭圆，
* 统一加 aspect-ratio:1 锁死正圆；认证用户头像右下角显示认证类型徽标。
* ========================================================================*/
img.qm-avatar { aspect-ratio: 1 / 1; object-fit: cover; flex: none; }
.qm-av { position: relative; display: inline-flex; line-height: 0; flex: none; }
.qm-av-badge {
position: absolute;
right: -3px;
bottom: -3px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44%;
min-width: 15px;
max-width: 20px;
aspect-ratio: 1;
padding: 0;
border: 2px solid var(--qm-surface);
border-radius: 50%;
background: var(--c, #6c5ce7);
color: #fff;
font-style: normal;
line-height: 0;
box-shadow: 0 1px 4px rgba(12, 14, 24, .28);
}
.qm-av-badge svg { width: 62%; height: 62%; display: block; stroke-width: 2.4; }
/* 用户中心英雄卡：右下角是「更换头像」相机按钮，认证角标移到左下 */
.qm-uc-avatar-wrap .qm-av-badge { right: auto; left: -3px; bottom: 6px; }
/* 头像自身带圆形边框的容器（顶栏胶囊）同样锁正圆 */
.qm-userpill .qm-av .qm-avatar,
.qm-userpill .qm-avatar { border-radius: 50%; }
/* ---- f18：标签云（原便签云）链接化 ---- */
a.qm-note { text-decoration: none; color: #3A3320; font-weight: 500; }
a.qm-note:hover { color: #3A3320; }
/* ---- f18：发布页标签内联输入 ---- */
.qm-tag-new { display: inline-flex; align-items: center; gap: 6px; }
.qm-tag-new input {
width: 170px;
padding: 6px 12px;
border: 1px solid var(--qm-border);
border-radius: 999px;
background: var(--qm-surface);
font-size: var(--qm-fs-xs);
outline: none;
}
.qm-tag-new input:focus { border-color: var(--qm-primary-300); }
/* ==========================================================================
* 2.6.8-f20 · 文章分类背景图
* ==========================================================================*/
.qm-cat-hero { position: relative; overflow: hidden; }
.qm-cat-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.qm-cat-hero.has-cover { border-color: transparent; background: #1b1c22; }
.qm-cat-hero.has-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(10, 11, 16, .78) 0%, rgba(10, 11, 16, .52) 55%, rgba(10, 11, 16, .3) 100%);
}
.qm-cat-hero.has-cover > *:not(.qm-cat-hero-bg) { position: relative; z-index: 2; }
.qm-cat-hero.has-cover h1 { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.qm-cat-hero.has-cover p { color: rgba(255, 255, 255, .84); }
.qm-cat-hero.has-cover .qm-cat-hero-stats { color: rgba(255, 255, 255, .72); }
.qm-cat-hero.has-cover .qm-cat-hero-stats b { color: #fff; }
.qm-cat-hero.has-cover .qm-cat-hero-avatar {
background: rgba(255, 255, 255, .16);
color: #fff;
border: 1px solid rgba(255, 255, 255, .28);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.qm-cat-hero.has-cover .qm-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); color: #fff; backdrop-filter: blur(8px); }
.qm-cat-hero.has-cover .qm-btn:hover { background: rgba(255, 255, 255, .26); }
/* 广场分类卡片：同一张图做缩略背景 */
.qm-cat-card { position: relative; overflow: hidden; }
.qm-cat-card-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.qm-cat-card.has-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(10, 11, 16, .18) 0%, rgba(10, 11, 16, .74) 100%);
}
.qm-cat-card.has-cover > *:not(.qm-cat-card-bg) { position: relative; z-index: 2; }
.qm-cat-card.has-cover b { color: #fff; }
.qm-cat-card.has-cover em { color: rgba(255, 255, 255, .78); }
.qm-cat-card.has-cover .qm-cat-card-ico { background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(8px); }
/* 后台分类背景图字段 */
.qm-cat-cover-preview { margin: 6px 0 8px; max-width: 420px; }
.qm-cat-cover-preview img { width: 100%; height: auto; border-radius: 8px; display: block; box-shadow: 0 1px 6px rgba(0, 0, 0, .16); }
@media (max-width: 700px) {
.qm-cat-hero.has-cover { padding: var(--qm-sp-6) var(--qm-sp-5); align-items: flex-start; }
.qm-cat-hero.has-cover::after { background: linear-gradient(180deg, rgba(10, 11, 16, .5), rgba(10, 11, 16, .82)); }
.qm-cat-hero.has-cover .qm-cat-hero-acts { margin-left: 0; }
}
/* ---- f20：广场视频 Tab 顶部条（全屏播放入口） ---- */
.qm-video-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--qm-sp-3);
margin-bottom: var(--qm-sp-4);
padding: 12px 16px;
border-radius: var(--qm-r-lg);
background: var(--qm-surface);
border: 1px solid var(--qm-border);
}
.qm-video-bar b { display: block; font-size: var(--qm-fs-base); }
.qm-video-bar span { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-video-bar-go {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 15px;
border-radius: 999px;
background: var(--qm-primary);
color: #fff;
font-size: var(--qm-fs-xs);
font-weight: 600;
text-decoration: none;
}
.qm-video-bar-go:hover { color: #fff; filter: brightness(1.06); }
@media (max-width: 480px) {
.qm-video-bar { padding: 10px 12px; }
.qm-video-bar span { display: none; }
}
/* ==========================================================================
* 2.6.8-f22 头像防压扁总闸
* 手机上出现「头像变椭圆」的三个来源：
* ① 全局 img{height:auto} 在并列声明顺序上可能把 height 冲掉；
* ② flex/grid 父容器宽度不够时把 ![]()
压窄；
* ③ 认证角标包裹层 .qm-av 没有锁尺寸。
* 统一用 aspect-ratio + object-fit + flex:0 0 auto 三重锁死，任何容器里都是正圆。
* ========================================================================*/
img.qm-avatar,
img.qm-uc-avatar,
img.qm-uc-info-avatar,
.qm-av > img,
.qm-author img,
.qm-cmt-item img.qm-avatar {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
flex: 0 0 auto;
height: auto;
}
/* 圆形容器的外框也必须等比，否则边框会被拉成椭圆 */
.qm-av { aspect-ratio: 1 / 1; align-items: center; justify-content: center; }
/* f40：物料标识（认证/等级/VIP）不是头像——解除上面的正圆锁死，回归内联小图
* （.qm-author img 的 aspect-ratio+height:auto 会把标识 ![]()
放大到原始尺寸） */
.qm-author .qm-id-img,
.qm-author-top .qm-id-img {
height: 14px;
width: auto;
aspect-ratio: auto;
object-fit: contain;
flex: 0 0 auto;
}
.qm-av > img { display: block; }
/* ==========================================================================
* 2.6.8-f25 长词断行保险丝
* 正文、摘要、评论里出现无空格长串（长 URL、shortcode 残留、连续英文）时，
* 默认 word-break 不断行，会把手机端整页撑出横向滚动。
* 统一在内容区 overflow-wrap:anywhere，任何长串都能折行。
* ========================================================================*/
.qm-feed-text,
.qm-feed-title,
.qm-post-title,
.qm-post-excerpt,
.qm-prose,
.qm-thread-body,
.qm-comment-body,
.qm-cmt-main,
.qm-bbs-topic-title,
.qm-bbs-floor-text {
overflow-wrap: anywhere;
}
/* ==========================================================================
* 2.6.8-f27 用户中心资料卡：仿快手
* 封面在上（正常显示、不加蒙版）→ 头像压线一半 → 昵称 / 认证标识排在下排。
* 换头像 / 换封面的入口全部收进「设置」页，卡上只留一个「设置」按钮。
* ========================================================================*/
.qm-uc-head {
--qm-uc-av: 96px;
display: block;
min-height: 0;
padding: 0;
background: var(--qm-surface);
overflow: hidden;
border: 1px solid var(--qm-border);
border-radius: var(--qm-r-2xl);
box-shadow: var(--qm-sh-md);
}
/* 封面：回到正常文档流的一条，比例 2.5:1，不裁内容不加暗层 */
.qm-uc-head .qm-uc-cover {
position: relative;
inset: auto;
z-index: 0;
width: 100%;
height: auto;
aspect-ratio: 2000 / 800;
min-height: 104px;
max-height: 260px;
background-color: var(--qm-bg-soft);
background-image: var(--qm-grad-brand), var(--qm-grad-hero);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.qm-uc-head[style*="--qm-uc-cover"] .qm-uc-cover { background-image: var(--qm-uc-cover); }
.qm-uc-head.is-vip:not([style*="--qm-uc-cover"]) .qm-uc-cover {
background-image: var(--qm-grad-vip), var(--qm-grad-hero);
}
/* 一律不加蒙版，封面按原图正常显示 */
.qm-uc-cover-mask { display: none !important; }
/* 头像压线：容器整体上移半个头像高，文字再下移回来 */
.qm-uc-head .qm-uc-head-in {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--qm-sp-4);
margin-top: calc(var(--qm-uc-av) / -2);
padding: 0 var(--qm-sp-6) var(--qm-sp-4);
}
.qm-uc-head .qm-uc-avatar-wrap {
position: relative;
flex: none;
display: block;
line-height: 0;
}
.qm-uc-head .qm-uc-avatar {
width: var(--qm-uc-av);
height: var(--qm-uc-av);
margin: 0;
border: 4px solid var(--qm-surface);
border-radius: 50%;
background: var(--qm-bg-soft);
box-shadow: 0 8px 20px -12px rgba(8, 10, 20, .6);
}
/* 认证标识挪到原「更换头像」相机位（右下角） */
.qm-uc-head .qm-uc-avatar-wrap .qm-av-badge {
right: -2px;
left: auto;
bottom: 2px;
width: 26px;
min-width: 26px;
max-width: 26px;
border-width: 3px;
border-color: var(--qm-surface);
box-sizing: content-box;
}
.qm-uc-head .qm-uc-head-main {
flex: 1 1 240px;
min-width: 0;
padding-top: calc(var(--qm-uc-av) / 2 + 4px);
}
.qm-uc-head .qm-uc-head-name {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--qm-sp-2);
margin: 0;
color: var(--qm-text);
font-size: var(--qm-fs-2xl);
font-weight: var(--qm-fw-black);
letter-spacing: var(--qm-ls-tight);
text-shadow: none;
}
.qm-uc-head .qm-uc-head-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 0;
color: var(--qm-text-3);
font-size: var(--qm-fs-sm);
text-shadow: none;
}
.qm-uc-head .qm-uc-head-sub .qm-dim,
.qm-uc-head .qm-uc-head-sub .qm-number { color: var(--qm-text-3); text-shadow: none; }
/* 「账号：888888 靓」 */
.qm-uc-account { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.qm-uc-account-cap { color: var(--qm-text-3); font-size: var(--qm-fs-sm); }
.qm-uc-account-num {
color: var(--qm-text);
font-size: var(--qm-fs-md);
font-weight: var(--qm-fw-bold);
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
.qm-uc-account .qm-id { margin-left: 2px; }
/* 徽章按钮（点了才展开对应卡片） */
.qm-uc-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qm-uc-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border: 1px solid var(--qm-border);
border-radius: 999px;
background: var(--qm-bg-soft);
color: var(--qm-text-2);
font-size: 11px;
font-weight: var(--qm-fw-semibold);
line-height: 1.7;
cursor: default;
transition: background var(--qm-dur-2) var(--qm-ease), transform var(--qm-dur-2) var(--qm-ease), box-shadow var(--qm-dur-2);
}
.qm-uc-chip svg { width: 12px; height: 12px; flex: none; }
button.qm-uc-chip { cursor: pointer; font-family: inherit; }
button.qm-uc-chip:hover { transform: translateY(-1px); }
button.qm-uc-chip:active { transform: scale(.97); }
.qm-uc-chip.is-pretty {
color: color-mix(in srgb, var(--c, #E9A94E) 72%, #3a2a08);
border-color: color-mix(in srgb, var(--c, #E9A94E) 44%, transparent);
background: color-mix(in srgb, var(--c, #E9A94E) 14%, transparent);
}
.qm-uc-chip.is-vip {
color: #8A5C13;
border-color: rgba(233, 169, 78, .48);
background: linear-gradient(135deg, rgba(233, 169, 78, .2), rgba(233, 169, 78, .07));
}
.qm-uc-chip.is-level { color: var(--qm-text-3); }
button.qm-uc-chip[aria-expanded="true"] {
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 26%, transparent);
}
html[data-qm-theme="dark"] .qm-uc-chip.is-vip { color: #F2C87A; }
html[data-qm-theme="dark"] .qm-uc-chip.is-pretty { color: color-mix(in srgb, var(--c, #E9A94E) 82%, #fff); }
.qm-uc-head .qm-uc-head-acts {
flex: none;
padding: calc(var(--qm-uc-av) / 2 + 4px) 0 0;
}
/* 统计条回到正常底色（不再压玻璃） */
.qm-uc-head .qm-uc-stats {
border-top: 1px solid var(--qm-divider);
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: inherit;
padding: var(--qm-sp-3) var(--qm-sp-6);
}
.qm-uc-head .qm-uc-stats > a { border-right-color: var(--qm-divider); }
.qm-uc-head .qm-uc-stats b { color: var(--qm-text); }
.qm-uc-head .qm-uc-stats span { color: var(--qm-text-3); }
.qm-uc-head .qm-uc-stats > a:hover b { color: var(--qm-primary); opacity: 1; }
.qm-uc-head .qm-uc-stats-extra .qm-dim { color: var(--qm-text-3); }
/* 点徽章才展开的卡片 */
.qm-uc-m[hidden] { display: none !important; }
/* ---------- 设置页 ---------- */
.qm-uc-set-tip { margin: -4px 0 var(--qm-sp-4); font-size: var(--qm-fs-xs); }
.qm-uc-set-cap {
display: flex;
align-items: center;
gap: 8px;
margin: var(--qm-sp-5) 0 var(--qm-sp-3);
color: var(--qm-text);
font-size: var(--qm-fs-sm);
font-weight: var(--qm-fw-bold);
}
.qm-uc-set-cap::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--qm-grad-brand); }
.qm-uc-set .qm-uc-media { margin-bottom: 0; }
.qm-uc-set-save {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--qm-sp-3);
margin-top: var(--qm-sp-5);
padding-top: var(--qm-sp-4);
border-top: 1px dashed var(--qm-divider);
}
.qm-uc-set-save .zb-composer-tip { margin: 0; }
.qm-uc-set-bind { margin-top: 16px; }
.qm-uc-set-bind .qm-bind-panel { padding: 0; }
.qm-uc-set-bind .qm-bind-panel > h3 { display: none; }
.qm-uc-set-bind .qm-bind-panel > p { margin-top: 0; }
/* ---------- 手机端：封面一条、头像压线、文字下排 ---------- */
@media (max-width: 768px) {
.qm-uc-page .qm-uc-head {
--qm-uc-av: 76px;
min-height: 0;
background: var(--qm-surface);
border: 1px solid var(--qm-border);
border-radius: var(--qm-r-lg);
box-shadow: var(--qm-sh-sm);
overflow: hidden;
}
.qm-uc-head .qm-uc-cover {
aspect-ratio: 2000 / 800;
min-height: 84px;
max-height: 148px;
}
.qm-uc-head .qm-uc-head-in {
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
margin-top: calc(var(--qm-uc-av) / -2);
padding: 0 12px 10px;
}
.qm-uc-head .qm-uc-avatar { border-width: 3px; }
.qm-uc-head .qm-uc-avatar-wrap .qm-av-badge {
width: 21px; min-width: 21px; max-width: 21px; border-width: 2px; right: -1px; bottom: 1px;
}
.qm-uc-head .qm-uc-head-main { flex: 1 1 0; padding-top: calc(var(--qm-uc-av) / 2 + 2px); }
.qm-uc-head .qm-uc-head-name { font-size: var(--qm-fs-lg); gap: 6px; }
.qm-uc-head .qm-uc-head-sub { margin-top: 3px; }
.qm-uc-account-num { font-size: var(--qm-fs-base); }
.qm-uc-chips { margin-top: 6px; gap: 4px; }
.qm-uc-chip { padding: 2px 8px; font-size: 10px; }
.qm-uc-head .qm-uc-head-acts {
width: 100%;
padding: 2px 0 0;
justify-content: flex-end;
}
.qm-uc-head .qm-uc-head-acts .qm-btn { padding: 5px 11px; font-size: var(--qm-fs-xs); }
.qm-uc-head .qm-uc-stats { padding: 9px 12px 10px; }
.qm-uc-set-save { gap: 8px; }
.qm-uc-set-save .qm-btn { flex: 1 1 auto; justify-content: center; }
.qm-uc-set-save .zb-composer-tip { width: 100%; }
}
/* 靓号卡数字行：「账号：888888 靓」（2.6.8-f27） */
.qm-pretty-prefix {
margin-right: 2px;
font-size: 12px;
font-weight: var(--qm-fw-semibold);
letter-spacing: 0;
opacity: .58;
}
.qm-pretty-word {
margin-left: .18em;
color: var(--c, #E9A94E);
font-size: .44em;
font-style: normal;
font-weight: var(--qm-fw-black);
letter-spacing: 0;
vertical-align: .42em;
}
.qm-pretty-hero-lg .qm-pretty-prefix { font-size: 14px; }
/* ==========================================================================
* 2.6.8-f28 资料卡收口
* · 头像下面才开始排昵称 / 账号 / 徽章（不再右侧并排）
* · 原「个人信息卡」的会员、等级、未读私信全部并进这张卡
* · 统计改成五项：帖子 文章 评论 关注 粉丝
* · 手机端这张卡左右通栏铺满，其余卡片不动
* ========================================================================*/
.qm-uc-head .qm-uc-head-in {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: calc(var(--qm-uc-av) / -2);
padding: 0 var(--qm-sp-6) var(--qm-sp-4);
}
/* 电脑端：用户中心整页全屏铺满（不再锁 1240），hero 左右留足呼吸 */
@media (min-width: 769px) {
.qm-uc-container {
max-width: 100%;
padding-inline: clamp(24px, 2.5vw, 48px);
}
.qm-uc-head .qm-uc-head-in { padding-inline: clamp(20px, 2vw, 40px); }
}
.qm-uc-head .qm-uc-head-main {
flex: 0 0 auto;
width: 100%;
min-width: 0;
padding-top: var(--qm-sp-2);
}
.qm-uc-head .qm-uc-head-name { margin-top: 2px; }
.qm-uc-head .qm-uc-head-sub { margin-top: 4px; }
/* 资料卡签名（2.6.8-f37）：账号行下面的个人简介，浅灰小字 */
.qm-uc-head .qm-uc-head-bio {
margin: 6px 0 0;
color: var(--qm-text-3);
font-size: var(--qm-fs-xs);
line-height: 1.6;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 头像容器锁宽（横排里不拉伸），认证角标才能贴回头像右下角 */
.qm-uc-head .qm-uc-avatar-wrap {
width: var(--qm-uc-av);
flex: 0 0 auto;
}
/* 封面右上角的设置按钮 */
.qm-uc-setbtn {
position: absolute;
right: 14px;
top: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, .2);
border: 1px solid rgba(255, 255, 255, .34);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
text-decoration: none;
transition: background var(--qm-dur-2) var(--qm-ease), transform var(--qm-dur-2) var(--qm-ease);
}
.qm-uc-setbtn:hover { background: rgba(255, 255, 255, .32); color: #fff; }
.qm-uc-setbtn:active { transform: scale(.94); }
.qm-uc-setbtn svg { display: block; }
/* 徽章芯片里的小字与未读私信数字 */
.qm-uc-chip > em { font-style: normal; }
.qm-uc-chip-sub { margin-left: 3px; color: var(--qm-text-3); font-size: 10px; font-weight: var(--qm-fw-medium); }
.qm-uc-chip-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 15px;
height: 15px;
padding: 0 4px;
border-radius: 999px;
background: var(--qm-danger);
color: #fff;
font-size: 10px;
font-weight: var(--qm-fw-bold);
line-height: 1;
}
a.qm-uc-chip.is-unread {
color: var(--qm-primary);
border-color: color-mix(in srgb, var(--qm-primary) 30%, transparent);
background: color-mix(in srgb, var(--qm-primary) 9%, transparent);
text-decoration: none;
}
/* 会员到期提示 */
.qm-uc-head-note {
margin: 7px 0 0;
color: var(--qm-text-3);
font-size: var(--qm-fs-xs);
}
/* 统计五项与头像同一排（快手式）：头像在左，数字横排在右；昵称资料从头像下面开始。
统计贴齐头像底边，整体落在封面白边以下，数字不压到背景图上 */
.qm-uc-head .qm-uc-top {
display: flex;
align-items: flex-end;
gap: var(--qm-sp-5);
width: 100%;
}
.qm-uc-head .qm-uc-stats {
flex: 1 1 auto;
min-width: 0;
gap: 0;
margin-bottom: 2px;
padding: 0;
border-top: 0;
background: transparent;
}
.qm-uc-head .qm-uc-stats > a { flex: 1 1 0; justify-content: center; padding: 2px 4px; }
.qm-uc-head .qm-uc-stats b { font-size: var(--qm-fs-lg); }
@media (max-width: 768px) {
/* 通栏：抵消容器内距，加圆角柔化四角 */
.qm-uc-page .qm-uc-head {
margin-inline: calc(var(--qm-gutter) * -1);
border-radius: 16px;
border-inline: 0;
box-shadow: none;
}
.qm-uc-head .qm-uc-head-in { padding: 0 16px 12px; }
.qm-uc-head .qm-uc-head-main { padding-top: 8px; }
.qm-uc-setbtn { right: 12px; top: 12px; width: 32px; height: 32px; }
.qm-uc-head .qm-uc-stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
margin-top: 8px;
padding: 8px 0 0;
}
.qm-uc-head .qm-uc-stats > a,
.qm-uc-head .qm-uc-stats > a:first-of-type,
.qm-uc-head .qm-uc-stats > a:last-of-type {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 0;
border-right: 0;
}
.qm-uc-head .qm-uc-stats b { font-size: var(--qm-fs-base); line-height: 1.25; }
.qm-uc-head .qm-uc-stats span { font-size: 10px; }
.qm-uc-head .qm-uc-head-note { margin-top: 6px; font-size: 11px; }
}
/* 手机端：顶部下面的卡片与顶部同宽（通栏）；640 以下网格已是单列 */
@media (max-width: 640px) {
.qm-uc-page .qm-uc-layout .qm-card,
.qm-uc-page .qm-uc-body .qm-pretty-hero {
margin-inline: calc(var(--qm-gutter) * -1);
}
}
/* ========================================================================
* 2.6.8-f41 · 创作者中心 & 提现（前后台共用）
* ======================================================================*/
/* ---- 统计卡 ---- */
.qm-cr-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--qm-sp-3);
margin-bottom: var(--qm-sp-4);
}
.qm-cr-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--qm-sp-4);
border-radius: var(--qm-r-lg, 14px);
background: var(--qm-surface);
border: 1px solid var(--qm-divider);
min-width: 0;
}
.qm-cr-stat-cap { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-cr-stat b { font-size: var(--qm-fs-2xl, 24px); font-weight: var(--qm-fw-bold); color: var(--qm-text); line-height: 1.2; }
.qm-cr-stat em { font-style: normal; font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-cr-cards-admin .qm-cr-stat { background: var(--qm-bg-soft, #f7f7fb); }
/* ---- 面板 ---- */
.qm-cr-panel { margin-bottom: var(--qm-sp-4); }
.qm-cr-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--qm-sp-3);
margin-bottom: var(--qm-sp-3);
flex-wrap: wrap;
}
.qm-cr-panel-head h3 { margin: 0; font-size: var(--qm-fs-lg); }
.qm-cr-panel-sub { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
/* ---- 图表 ---- */
.qm-cr-chart { width: 100%; }
.qm-cr-svg { display: block; width: 100%; height: 170px; }
.qm-cr-axis { stroke: var(--qm-divider); stroke-width: 1; }
.qm-cr-bar { fill: var(--qm-primary); opacity: .42; }
.qm-cr-bar.is-peak { opacity: .92; }
.qm-cr-chart-foot {
display: flex;
justify-content: space-between;
gap: var(--qm-sp-3);
margin-top: 6px;
font-size: var(--qm-fs-xs);
color: var(--qm-text-3);
}
/* ---- 收款码 ---- */
.qm-cr-qrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qm-sp-4); }
.qm-cr-qr-box {
border: 1px solid var(--qm-divider);
border-radius: var(--qm-r-md, 12px);
padding: var(--qm-sp-4);
background: var(--qm-bg-soft, #fafafd);
display: flex;
flex-direction: column;
gap: var(--qm-sp-2);
min-width: 0;
}
.qm-cr-qr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qm-cr-qr-head b { font-size: var(--qm-fs-base); }
.qm-cr-qr-state { font-size: var(--qm-fs-xs); color: var(--qm-text-3); }
.qm-cr-qr-img {
width: 148px;
height: 148px;
border-radius: var(--qm-r-sm, 10px);
background: var(--qm-surface);
border: 1px dashed var(--qm-divider);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.qm-cr-qr-img.has { border-style: solid; }
.qm-cr-qr-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.qm-cr-qr-img span { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--qm-text-3); }
.qm-cr-qr-img em { font-style: normal; font-size: var(--qm-fs-xs); }
.qm-cr-qr-hint { margin: 0; font-size: var(--qm-fs-xs); color: var(--qm-text-3); line-height: 1.6; }
.qm-cr-qr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---- 明细表 ---- */
.qm-cr-td-title { max-width: 320px; }
.qm-cr-td-title a {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
/* ---- 提现 ---- */
.qm-wd-card { margin-bottom: var(--qm-sp-4); }
.qm-wd-balance { margin: 0 0 var(--qm-sp-3); font-size: var(--qm-fs-sm); color: var(--qm-text-2); }
.qm-wd-balance b { font-size: var(--qm-fs-lg); color: var(--qm-text); }
.qm-wd-balance em { font-style: normal; color: var(--qm-text-3); font-size: var(--qm-fs-xs); }
.qm-wd-form { display: flex; flex-direction: column; gap: var(--qm-sp-3); max-width: 460px; }
.qm-wd-methods { display: flex; gap: var(--qm-sp-2); flex-wrap: wrap; }
.qm-wd-method {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--qm-r-md, 12px);
border: 1px solid var(--qm-divider);
background: var(--qm-surface);
font-size: var(--qm-fs-sm);
cursor: pointer;
}
.qm-wd-method.is-empty { opacity: .6; cursor: not-allowed; }
.qm-wd-method input { margin: 0; }
.qm-wd-method-name { font-weight: var(--qm-fw-semi); }
.qm-wd-method-qr { font-size: 10px; color: var(--qm-text-3); }
.qm-wd-tip {
margin: 0;
padding: 8px 12px;
border-radius: var(--qm-r-sm, 10px);
background: rgba(232, 168, 74, .1);
font-size: var(--qm-fs-xs);
color: #9a6a12;
}
.qm-wd-status {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
line-height: 1.7;
white-space: nowrap;
}
.qm-wd-status-pending { background: rgba(232, 168, 74, .14); color: #9a6a12; }
.qm-wd-status-paid { background: rgba(47, 158, 110, .14); color: #2f7d5b; }
.qm-wd-status-rejected { background: rgba(220, 80, 80, .12); color: #b23b3b; }
.qm-cr-withdraw-line { margin: 0 0 var(--qm-sp-2); font-size: var(--qm-fs-sm); color: var(--qm-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 768px) {
.qm-cr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qm-cr-cards .qm-cr-stat b { font-size: var(--qm-fs-xl, 20px); }
.qm-cr-qrs { grid-template-columns: 1fr; }
.qm-cr-qr-img { width: 120px; height: 120px; }
.qm-cr-chart-foot span:nth-child(2) { display: none; }
}
/* ============================================================
后台 · 私信管理（2.6.8-f43）
============================================================ */
.qm-adm-msg-bar { align-items: center; flex-wrap: wrap; }
.qm-adm-msg-bar form { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qm-adm-msg-bar form input[type="search"] { min-width: 300px; }
.qm-adm-msg-hint { margin: -6px 0 10px; }
.qm-adm-msg-who { font-size: var(--qm-fs-sm); line-height: 1.5; }
.qm-adm-msg-who a { text-decoration: none; }
.qm-adm-msg-who a:hover { color: var(--qm-accent); }
.qm-adm-msg-who-lg { font-size: var(--qm-fs-md); font-weight: var(--qm-fw-semi); }
.qm-adm-msg-tag {
display: inline-block; padding: 2px 8px; border-radius: 999px;
font-size: var(--qm-fs-xs); line-height: 1.7;
background: var(--qm-accent-100, rgba(108, 92, 231, .12)); color: var(--qm-accent-600, #5b4bd6);
white-space: nowrap;
}
.qm-adm-msg-tag.is-sys { background: rgba(232, 168, 74, .16); color: #9a6a12; }
.qm-adm-msg-unread { color: var(--qm-danger, #d94a4a); }
.qm-adm-msg-table .button { white-space: nowrap; }
.qm-adm-msg-table .qm-adm-msg-last {
max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--qm-text-2); font-size: var(--qm-fs-sm);
}
.qm-adm-msg-back { margin: 0 0 14px; }
.qm-adm-msg-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.qm-adm-msg-head form { margin: 0; }
.qm-adm-thread {
display: flex; flex-direction: column; gap: 10px;
max-height: 720px; overflow-y: auto; padding: 2px;
}
.qm-adm-msg {
padding: 12px 14px; border-radius: var(--qm-r-md, 12px);
background: var(--qm-bg-soft, #f7f7fb);
border: 1px solid var(--qm-border, #e8eaf2);
}
.qm-adm-msg.is-sys { background: rgba(232, 168, 74, .07); border-color: rgba(232, 168, 74, .28); }
.qm-adm-msg-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: var(--qm-fs-xs); margin-bottom: 6px;
}
.qm-adm-msg-meta b { font-size: var(--qm-fs-sm); }
.qm-adm-msg-state { color: var(--qm-text-3); }
.qm-adm-msg-body {
font-size: var(--qm-fs-sm); line-height: 1.75; color: var(--qm-text);
white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 782px) {
.qm-adm-msg-bar form input[type="search"] { min-width: 0; width: 100%; }
.qm-adm-msg-table .qm-adm-msg-last { max-width: 180px; }
.qm-adm-thread { max-height: none; }
}