/* ============================================================
   MiniZone Design System — Components (Layer 4)
   全部共享组件：按钮 / 表单 / 头像 / 帖子卡 / 列表 / 状态 / 各页共用类。
   旧类名契约完整保留（apps / messages / profile 页共用本层）。
   ============================================================ */

/* ===== 图标按钮（顶栏 / 返回 / 关闭） ===== */
.icon-button {
  position: relative;
  width: 44px; height: 44px;
  border: 0; border-radius: 15px;
  display: grid; place-items: center;
  color: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease;
}
.icon-button:active { transform: scale(.88); background: rgba(24, 32, 48, .07); }

/* ===== MiniGlassButton ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:active { transform: scale(var(--scale-press-deep)); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary {
  background: var(--accent); color: var(--text-on-accent);
  box-shadow: 0 8px 20px rgba(35, 104, 245, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-secondary {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 8px 20px rgba(238, 82, 98, .25); }
.btn-block { width: 100%; }
/* 玻璃按钮（低强调操作） */
.btn-glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text-primary);
}

/* ===== 表单 ===== */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--text-secondary); margin-bottom: 6px;
}
.form-input, .form-textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-body);
  background: var(--bg-card-soft);
  color: var(--text-primary);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--faint); }
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-card);
}
.form-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.field-error { font-size: 12px; color: var(--error); margin-top: 6px; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; }
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: var(--text-tertiary);
}

/* ===== MiniPostCard（.feed / .post 契约保留，改为独立悬浮卡） ===== */
.feed { display: flex; flex-direction: column; gap: 12px; }
.post {
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease);
}
.post:active { transform: scale(.985); }
.post-head { display: flex; align-items: center; gap: 11px; }
.avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 14px;
  overflow: hidden;
  display: grid; place-items: center;
  font-size: 14px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(145deg, #4d7de8, #2aa5a0);
  box-shadow: 0 4px 12px rgba(24, 40, 80, .15), inset 0 0 0 1px rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.author { min-width: 0; flex: 1; }
.author strong { display: block; font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.author span { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-tertiary); }
.sample-tag {
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10.5px; font-weight: var(--fw-bold); flex: 0 0 auto;
}
.post .post-title {
  margin: 12px 0 4px;
  font-size: var(--fs-card-title); line-height: 1.4;
  letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold);
}
.post h3 {
  margin: 12px 0 4px;
  font-size: var(--fs-card-title); line-height: 1.4;
  letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold);
}
.post .post-excerpt, .post p.body {
  color: var(--text-secondary);
  font-size: var(--fs-body-small); line-height: var(--lh-body);
}
.post p { color: var(--text-secondary); font-size: var(--fs-body-small); line-height: var(--lh-body); }
/* head/标题 与正文的间距（--sp-3=12px；base 全局 reset 清零了 p 的 margin）：
   共用 .post 组件统一生效——发现页/搜索/他人主页「TA的帖子」/我的帖子/详情页及
   应用页同类卡片一并覆盖；p 限直接子元素，卡内嵌套 p（用户列表行等）不受影响。
   标题在前时与 h3 的 margin-bottom 折叠（取 max），不会叠加 */
.post > p { margin-top: var(--sp-3); }
/* MiniImageGrid：单图自适应大图（超高裁切），多图紧凑网格（2图2列 / ≥3图3列，最多6张 +N） */
.post-images { display: grid; gap: 6px; margin-top: 12px; }
.post-images.cols-1 img {
  width: 100%; height: auto; max-height: 460px; object-fit: cover;
  border-radius: var(--r-md);
}
.post-images.cols-2 { grid-template-columns: 1fr 1fr; }
.post-images.cols-3 { grid-template-columns: repeat(3, 1fr); }
.post-img-cell {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface);
}
.post-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-img-cell.more img { filter: brightness(.55); }
.img-more {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.post-images img { background: var(--surface); }
.post-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  margin-top: 13px;
  color: var(--text-tertiary);
  font-size: 12px; font-weight: var(--fw-regular);
}
.post-meta button {
  display: flex; align-items: center; gap: 5px;
  color: inherit; padding: 2px 0;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.post-meta button.liked { color: var(--danger); }
.post-meta button.liked svg { fill: currentColor; }
.post-meta button:active { transform: scale(.88); }
.post-meta button.pop svg { animation: likePop .38s var(--ease-spring); }
@keyframes likePop {
  0% { transform: scale(.6); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* ===== 表白墙互动条（列表与详情共用）：真实 button + inline-flex 对齐，不靠空格/偏移凑位 ===== */
.wall-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 13px; }
.wall-meta button {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; padding: 2px 0;
  color: var(--text-tertiary); font-size: 12px; font-weight: var(--fw-semibold); line-height: 1;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.wall-meta button svg { display: block; flex-shrink: 0; }
.wall-meta button.liked { color: var(--danger); }
.wall-meta button.liked svg { fill: currentColor; }
.wall-meta button:active { transform: scale(.88); }
.wall-meta button.pop svg { animation: likePop .38s var(--ease-spring); }
/* 表白墙详情评论区（复用帖子详情 .comment-card 体系，仅补区块间距） */
.wall-comments { margin-top: 16px; }
.m-pin {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent-deep); font-size: 10.5px; font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); flex: 0 0 auto;
}

/* 排序按钮（首页 feed 内联补充样式） */
.sort-btn {
  font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  padding: 5px 12px; border-radius: var(--r-pill);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.sort-btn.active { color: var(--text-primary); background: var(--bg-card); box-shadow: var(--shadow-soft); }

/* ===== 骨架屏 ===== */
.skeleton-item { display: flex; gap: 12px; padding: 6px 0 18px; }
.sk {
  background: linear-gradient(90deg, var(--surface) 25%, #e7ebf2 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s infinite;
  border-radius: 8px;
}
html[data-theme='dark'] .sk { background: linear-gradient(90deg, #1c222c 25%, #242b37 50%, #1c222c 75%); background-size: 200% 100%; }
@keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-avatar { width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto; }
.sk-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 12px; }
.sk-spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 空 / 错误状态（MiniEmptyState / MiniLoadingState） ===== */
.empty-state, .error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 24px; text-align: center;
}
.empty-icon, .error-icon {
  width: 64px; height: 64px; border-radius: 22px;
  background: var(--surface); color: var(--faint);
  display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.empty-title, .error-title { font-size: 16px; font-weight: var(--fw-bold); margin-bottom: 6px; letter-spacing: -.01em; }
.empty-body, .error-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; max-width: 260px; }
@keyframes wavePulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.voice-duration { font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-secondary); flex: 0 0 auto; }
.voice-player.mine .voice-duration { color: rgba(255, 255, 255, .8); }
.voice-player.error .voice-play { background: var(--danger); }

/* ===== 登录页 ===== */
.auth-page { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 32px 6px; }
.auth-logo {
  width: 88px; height: 72px; object-fit: contain; border-radius: 0; margin: 0 auto 20px;
}
.auth-title { text-align: center; font-size: 27px; font-weight: var(--fw-black); letter-spacing: var(--ls-tighter); margin-bottom: 6px; }
.auth-sub { text-align: center; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 28px; }
.auth-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  padding: 4px; border-radius: var(--r-pill);
  background: rgba(24, 32, 48, .05);
}
.auth-tab {
  flex: 1; padding: 10px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: var(--fw-bold);
  color: var(--text-secondary); text-align: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.auth-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.auth-link { text-align: center; font-size: 13px; color: var(--accent); margin-top: 16px; display: block; font-weight: var(--fw-semibold); }

/* ===== 私信会话页（固定 Header + 独立滚动消息区 + 固定 InputBar） ===== */
/* 全屏铺满：messages/index.js 进入 dm 时清掉 #scroll 与容器 padding（main.js 渲染前复位）。
   根容器高度=视口、overflow hidden，滚动只允许发生在 .dm-messages（隐藏滚动条但保留滚动）。 */
.dm-page {
  display: flex; flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
.dm-header {
  display: flex; align-items: center; gap: 6px;
  padding: calc(8px + var(--safe-top)) 10px 8px;
  flex: 0 0 auto;
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--border);
}
.dm-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text-primary); transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.dm-back:active { background: rgba(24, 32, 48, .06); transform: scale(.9); }
.dm-peer {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; padding: 4px; border-radius: var(--r-md);
  cursor: pointer;
}
.dm-peer:active { background: rgba(24, 32, 48, .05); }
.dm-peer-avatar { flex: 0 0 auto; display: block; }
.dm-peer-avatar .avatar { width: 36px; height: 36px; font-size: 13px; border-radius: 13px; }
.dm-peer-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dm-peer-name { font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-peer-status { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-more { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); flex: 0 0 auto; transition: background var(--dur-fast); }
.dm-more:active { background: rgba(24, 32, 48, .06); }

/* 消息区：唯一滚动容器（flex:1 占满 Header 与 InputBar 之间；滚动条隐藏但可滚） */
.dm-messages {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 14px 16px 18px;
  display: flex; flex-direction: column;
}
.dm-messages::-webkit-scrollbar { display: none; }
.dm-time-sep { align-self: center; font-size: 11px; color: var(--text-tertiary); padding: 10px 0 6px; }

/* 消息行：对方=头像+左气泡；自己=右气泡（不重复头像）；气泡最宽 76% */
.dm-msg { max-width: 76%; display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.dm-msg.peer { align-self: flex-start; }
.dm-msg.mine { align-self: flex-end; flex-direction: row-reverse; margin-left: auto; }
.dm-msg.peer .dm-msg-col { align-items: flex-start; }
.dm-msg-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-msg.mine .dm-msg-col { align-items: flex-end; }
.dm-bubble { padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.55; word-break: break-word; }
.dm-msg.peer .dm-bubble { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-soft); border-bottom-left-radius: 7px; }
.dm-msg.mine .dm-bubble { background: var(--accent); color: var(--text-on-accent); border-bottom-right-radius: 7px; box-shadow: 0 6px 16px rgba(35, 104, 245, .22); }
.dm-msg.recalled { max-width: 100%; }
.dm-msg.recalled .dm-bubble { background: transparent; color: var(--text-tertiary); font-style: italic; font-size: 12px; padding: 2px 6px; box-shadow: none; }
.dm-status { font-size: 10.5px; color: var(--text-tertiary); padding: 0 6px; }
.dm-status.read { color: var(--accent); }
.dm-status.failed { color: var(--danger); font-weight: var(--fw-semibold); cursor: pointer; }
.dm-msg.pending .dm-bubble { opacity: .65; }

/* 输入区：固定底部 + 轻量 Glass + 键盘由 interactive-widget=resizes-content 适配。
   输入框为 textarea：初始单行、随内容自动增高（JS scrollHeight，约 5 行封顶后内部滚动），
   底部工具栏位置稳定不被撑出屏幕。语音按钮已下线（历史语音消息仍可播放）。 */
.dm-input-bar {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 8px 12px calc(10px + var(--safe-bottom));
  flex: 0 0 auto;
  position: relative; z-index: 2;
  border-top: 1px solid var(--border);
}
.dm-tool {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-card-soft); border: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--text-secondary); flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.dm-tool:active { transform: scale(.88); }
.dm-tool:disabled { opacity: .4; }
.dm-input {
  flex: 1; min-width: 0; padding: 10px 15px;
  border: 0; border-radius: 18px;
  font: inherit; font-size: 14px; line-height: 20px;
  background: var(--bg-card-soft); color: var(--text-primary);
  resize: none; display: block;
  height: 40px;                      /* 单行初始高度（10+20+10） */
  max-height: 120px;                 /* ≈5 行封顶，超出内部滚动 */
  overflow-y: hidden;                /* 由 JS 在封顶时切 auto */
  transition: background var(--dur-fast);
}
.dm-input:focus { outline: none; background: var(--bg-card); }
.dm-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent);
  border: 0; cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(35, 104, 245, .28);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.dm-send:active { transform: scale(.88); }
.dm-send:disabled { opacity: .4; }

/* ===== 应用网格 ===== */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 4px 12px;
  border-radius: var(--r-lg);
  min-height: 48px;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.app-item:active { transform: scale(.93); background: rgba(24, 32, 48, .05); }
.app-item-icon {
  width: 46px; height: 46px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--bg-card); color: var(--accent);
  box-shadow: var(--shadow-card);
}
.app-item-label { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-primary); text-align: center; }

/* ===== 个人页（Profile Header 见 components/profile-header.js + user.css 的 pf- 与 u- 前缀规则） ===== */
.profile-stats { display: flex; gap: 24px; padding: 18px 0; margin-bottom: 18px; }
.profile-stat { text-align: center; flex: 1; }
.profile-stat-num { display: block; font-size: 19px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.profile-stat-label { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.menu-list {
  background: var(--bg-card); border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; text-align: left;
  padding: 15px 16px; font-size: 14.5px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:active { background: rgba(24, 32, 48, .035); }
.menu-item-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  flex: 0 0 auto;
}
.menu-item-text { flex: 1; }
.menu-item-chevron { color: var(--faint); }
.menu-sub { font-size: 12px; color: var(--text-tertiary); }
.sub-title { font-size: var(--fs-title-section); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 24px 2px 12px; }
.read-all-btn { font-size: 12px; color: var(--accent); font-weight: var(--fw-semibold); padding: 6px 10px; border-radius: var(--r-pill); }
.read-all-btn:active { background: var(--accent-soft); }
.msg-tab {
  padding: 7px 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: var(--fw-bold);
  color: var(--text-secondary); background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.msg-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-soft); }

/* ===== 发帖编辑器（Sheet 内） ===== */
.composer-page { display: flex; flex-direction: column; height: 100%; }
.composer-header { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--safe-top)) 12px 10px; flex: 0 0 auto; }
.composer-cancel { padding: 8px 14px; font-size: 14px; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.composer-submit {
  padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: var(--fw-bold);
  box-shadow: 0 6px 16px rgba(35, 104, 245, .28);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.composer-submit:active { transform: scale(.92); }
.composer-submit:disabled { opacity: .4; }
.composer-body { flex: 1; padding: 16px; overflow-y: auto; }
.sheet-header.has-header-action { justify-content: flex-start; gap: 10px; }
.has-header-action .sheet-title { flex: 0 0 auto; }
.composer-scope-wrap { position: relative; display: inline-flex; max-width: min(55vw, 240px); }
.composer-scope {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; min-height: 32px; max-width: min(55vw, 240px); padding: 0 10px;
  border-radius: var(--r-pill); background: var(--bg-card-soft);
  color: var(--text-primary); font-size: 17px; font-weight: var(--fw-semibold);
  width: 100%; border: 0; cursor: pointer;
}
.composer-scope::before { content: ''; position: absolute; inset: -6px 0; }
.composer-scope-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-scope svg { flex: 0 0 auto; }
.composer-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.composer-scope:disabled { opacity: .5; cursor: default; }
.composer-scope-menu {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 2;
  display: flex; flex-direction: column; background: var(--bg-card);
  border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden;
}
.composer-scope-option {
  width: 100%; height: 32px; min-height: 32px; padding: 0 10px; border: 0;
  background: transparent; color: var(--text-primary); font: inherit; font-size: 17px;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer-scope-option[aria-checked='true'] { color: var(--accent); background: var(--accent-soft); }
.composer-scope-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.composer-scope-option:hover { background: var(--accent-soft); }
.composer-textarea {
  width: 100%; min-height: 160px; border: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.6;
  color: var(--text-primary); resize: none;
}
.composer-textarea:focus { outline: none; }
.composer-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.composer-img-wrap { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.composer-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.composer-img-remove {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.composer-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + var(--safe-bottom)); flex: 0 0 auto; }
.composer-tool {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-card-soft);
  display: grid; place-items: center;
  color: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.composer-tool:active { transform: scale(.88); background: var(--surface); }

/* ===== 搜索页 ===== */
.search-page { padding-top: calc(12px + var(--safe-top)); }
.search-input-row { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px; }
.search-input {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--bg-card); border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
}
.search-input input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; outline: none; color: var(--text-primary); }
.search-cancel { padding: 8px; font-size: 14px; color: var(--accent); font-weight: var(--fw-semibold); }

/* ===== 通知列表 ===== */
.notif-item { display: flex; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: 0; }
.notif-icon {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-deep);
}
.notif-content { flex: 1; min-width: 0; }
.notif-text { font-size: 13.5px; line-height: 1.5; }
.notif-time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; margin-top: 6px; }
/* 全局统一未读小红点：有未读显示、无未读隐藏；不承载数字（全 App 一律 8px 圆点） */
.mz-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; display: inline-block; }

/* ===== 会话列表：独立圆角卡片 + 左滑 置顶/删除 ===== */
.conv-list { display: flex; flex-direction: column; gap: 10px; }
.conv-swipe { position: relative; border-radius: var(--r-lg); overflow: hidden; }
/* 动作层仅在滑动展开时渲染：收起态完全隐藏，杜绝亚像素缝隙漏色（右缘红/蓝细线） */
.conv-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.conv-swipe.open .conv-actions { opacity: 1; pointer-events: auto; }
.conv-action {
  width: 64px; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold); color: #fff;
  letter-spacing: .02em;
}
.conv-action.act-pin { background: var(--accent); }
.conv-action.act-del { background: var(--danger); }
.conv-action:active { filter: brightness(.9); }
.conv-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  cursor: pointer;
  touch-action: pan-y;          /* 纵向滚动交还原生，横向手势归左滑 */
  user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.conv-item:active { filter: brightness(1.05); }
.conv-avatar {
  position: relative; overflow: hidden;
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 17px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(145deg, #4d7de8, #2aa5a0);
  box-shadow: 0 4px 12px rgba(24, 40, 80, .15);
  flex: 0 0 auto;
}
.conv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-size: 14.5px; font-weight: var(--fw-bold); }
.conv-last { font-size: 12px; color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { text-align: right; flex: 0 0 auto; }
.conv-time { font-size: 10.5px; color: var(--text-tertiary); }
.conv-badge {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  background: var(--danger);
  display: inline-block; margin-top: 6px;
}

/* ===== 一级页面 Large Title（应用/消息/我的 统一规格；发现为品牌头部变体，同一令牌） ===== */
.page-title-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px 18px;
}
.page-title {
  margin: 0; line-height: 1;
  font-size: var(--fs-large-title); font-weight: var(--fw-black); letter-spacing: var(--ls-tighter);
  color: var(--text-primary);
}
.page-title-sub { margin: 8px 0 0; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-secondary); }
.page-title-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ===== 帖子详情评论区：主评论独立圆角卡 + 卡内子回复同左缘连续排布（抖音式层级） ===== */
.comment-card {
  padding: 12px 14px;
  background: var(--bg-card); border-radius: var(--r-lg);
  margin-bottom: 10px;
}
.cc-row { display: flex; gap: 10px; align-items: flex-start; }
.comment-card .avatar { flex: 0 0 auto; cursor: default; }
.cc-main { flex: 1; min-width: 0; }
.cc-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-primary);
}
.cc-name[data-user-link] { cursor: pointer; }
.cc-lv { font-size: 10px; font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.cc-replyto { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.cc-text { font-size: 13.5px; line-height: 1.55; margin-top: 3px; color: var(--text-primary); word-break: break-word; }
.cc-text.deleted { color: var(--text-tertiary); }
.cc-ops { display: flex; align-items: center; gap: 14px; margin-top: 5px; }
.cc-time { font-size: 10.5px; color: var(--text-tertiary); }
.cc-ops button {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer; padding: 2px 0;
  color: var(--text-tertiary); font-size: 11px; font-weight: var(--fw-semibold);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.cc-ops button.liked { color: var(--danger); }
.cc-ops button.liked svg { fill: currentColor; }
.cc-ops button:active { transform: scale(.9); }
.cc-ops button.pop svg { animation: likePop .38s var(--ease-spring); }
/* 子回复：与主评论同左缘、同头像尺寸；更小间距 + 更弱文字层级 + 细分隔线体现层级 */
.cc-replies {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.cc-reply-item { display: flex; gap: 10px; align-items: flex-start; }
.cc-reply-item .cc-text { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.cc-reply-item .cc-ops { margin-top: 3px; }
.cc-expand {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 0 42px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: var(--fw-semibold);
  padding: 5px 0;
}
.cc-replying {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--accent);
  padding: 0 2px 6px;
}
.cc-replying button {
  display: inline-flex; align-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-tertiary); padding: 2px;
}

/* ===== 帖子详情页：固定头部 + 内部滚动 + 常驻评论输入条 =====
   横向对齐基准 = 发现页内容边界 var(--page-h)（卡片外缘线）；进页时 main.js/discover 复位
   container 与 #scroll 的 padding（双清零），页面外边距由 .detail-nav/.detail-content/
   .detail-input-bar 自行补回；卡片内边距（.post --card-pad / .comment-card 12px 14px）不再叠加页面边距 */
.detail-page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.detail-nav {
  display: flex; align-items: center; gap: 8px;
  padding: calc(12px + var(--safe-top)) var(--page-h) 12px;
  flex: 0 0 auto;
}
.detail-nav-title { font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.detail-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 8px; }
.detail-scroll::-webkit-scrollbar { display: none; }
.detail-content { padding: 0 var(--page-h); }
.detail-input-bar { flex: 0 0 auto; padding: 10px var(--page-h) calc(10px + var(--safe-bottom)); }
.detail-input-bar .cc-replying { padding: 0 2px 6px; }

/* 评论不感兴趣 + 折叠区（规则只在代码中应用） */
.cc-ops button.disliked { color: var(--warning); }
.cc-fold-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 0 10px 2px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-tertiary); font-size: 12px; font-weight: var(--fw-semibold);
  padding: 5px 0;
}
.cc-fold-btn[hidden] { display: none; }
.cc-fold-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cc-fold-box[hidden] { display: none; }
/* 无回复的评论不渲染空的子回复区（此前留下一条隔离缝隙） */
.cc-replies:empty { display: none; }
/* 评论操作行：时间+回复靠左，♡/心碎 靠右 */
.cc-ops .cc-like { margin-left: auto; }

/* ===== 统一举报组件（Mos 2.0）：入口克制、进流程才用警示色 =====
   规则：红色只出现在菜单举报文字 / 选中原因 / 必要警示；弹窗本体保持中性可读；
   全部明暗两套令牌见 variables.css（--danger / --danger-soft / --report-btn-*）。 */

/* 详情操作栏胶囊（[分享][举报][打 Call] 中的次级按钮；打 Call 等主按钮不参与） */
.report-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px;
  border: var(--report-btn-border); border-radius: 12px;
  background: var(--report-btn-bg);
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: var(--fw-semibold);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.report-btn svg { flex: 0 0 auto; }
.report-btn:hover { background: var(--danger-soft); color: var(--danger); }
.report-btn:active { transform: scale(.96); }
.report-btn.reported { opacity: .55; }
.report-btn.reported:hover { background: var(--report-btn-bg); color: var(--text-secondary); }

/* 「…」更多菜单：分享 / 举报此内容 */
.report-menu { display: flex; flex-direction: column; padding-bottom: 6px; }
.report-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 4px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer;
  font-size: 15px; color: var(--text-primary); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.report-menu-item:last-child { border-bottom: 0; }
.report-menu-item svg { color: var(--faint); flex: 0 0 auto; }
.report-menu-item:active { background: var(--bg-card-soft); }
.report-menu-item.danger, .report-menu-item.danger svg { color: var(--danger); }
.report-menu-item.danger:active { background: var(--danger-soft); }
.report-menu-item.reported, .report-menu-item.reported svg { color: var(--text-tertiary); }

/* 举报 Sheet：两步（选原因 → 补充说明）；本体中性，仅选中原因用警示色 */
.report-sheet { display: flex; flex-direction: column; }
.report-object {
  margin: 0; padding: 8px 4px 0;
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-tip { margin: 0; padding: 2px 4px 10px; font-size: 13px; color: var(--text-tertiary); }
.report-opts { display: flex; flex-direction: column; }
.report-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 4px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer;
  font-size: 15px; color: var(--text-primary); text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast);
}
.report-opt:last-child { border-bottom: 0; }
.report-opt svg { color: var(--faint); flex: 0 0 auto; }
.report-opt:hover, .report-opt:active { background: var(--danger-soft); border-radius: 10px; }

/* 第二步：已选原因（警示色文字，可点「更改」返回）+ 补充说明 + 提交 */
.report-chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 2px 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-card-soft); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-chosen-label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--danger); }
.report-chosen-change { font-size: 12.5px; color: var(--accent); }
.report-detail { min-height: 96px; font-size: 14px; }
.report-count { margin: 6px 4px 14px; text-align: right; font-size: 11px; color: var(--faint); }
.report-submit { width: 100%; }
.report-submit[disabled] { opacity: .5; }

/* 评论卡 / 事迹卡行内「举报」小按钮：默认次级色，hover 轻警示；已举报置灰禁用 */
.cc-ops button.cc-report:not(.reported):hover, .pp-story-ops button.cc-report:not(.reported):hover { color: var(--danger); }
button.cc-report.reported { opacity: .6; }

/* ===== 帖子卡参数化扩展位（post-card.js opts；不传时卡片形态与原版完全一致） ===== */
/* opts.menu：右上「⋯」更多操作车位（我的帖子 编辑/删除等），阻断整卡跳转 */
.post-more {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  color: var(--text-tertiary);
}
.post-more:active { background: var(--bg-card-soft); }
/* opts.fav：收藏按钮（收藏页），激活态与点赞同构 */
.post-meta button.faved { color: var(--accent); }
.post-meta button.faved svg { fill: currentColor; }

/* ===== 统一用户列表（我的关注/我的粉丝）行内箭头兜底 ===== */
.user-row .user-row-chevron svg { display: block; }

/* ===== 全局搜索（帖子/公告/用户）：服务端分页检索 + 无限滚动 ===== */
.search-top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 10px; }
.search-tabs { align-self: flex-start; width: auto; margin: 0 4px; }
.search-tabs button { padding: 6px 16px; font-size: 12.5px; }

/* 关键词高亮：浅强调底，克制不刺眼 */
mark.search-hl {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 3px;
  padding: 0 1px;
}

/* 公告结果行 */
.notice-list { display: block; }
.notice-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 68px; padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--border);
  background: none; cursor: pointer; text-align: left;
  font: inherit; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast);
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:active { background: var(--bg-card-soft); }
.notice-row svg { color: var(--text-tertiary); flex: 0 0 auto; }
.notice-row-main { flex: 1; min-width: 0; }
.notice-row-title { font-size: 14.5px; font-weight: var(--fw-bold); color: var(--text-primary); }
.notice-row-snippet {
  margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notice-row-meta { display: flex; gap: 10px; margin-top: 5px; font-size: 11px; color: var(--text-tertiary); }

/* 列表底部：加载更多 / 没有更多了（轻量，不跳动） */
.search-foot {
  padding: 14px 0 18px;
  text-align: center;
  font-size: 12px; color: var(--text-tertiary);
}
.search-foot-loading { display: inline-flex; align-items: center; gap: 5px; }
.search-foot-loading svg { animation: searchSpin 1s linear infinite; }
@keyframes searchSpin { to { transform: rotate(360deg); } }

/* 尚未搜索：引导 + 最近搜索 */
.search-idle-hero { padding: 56px 24px 8px; text-align: center; }
.search-idle-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 18px; display: grid; place-items: center;
  background: var(--bg-card-soft); color: var(--text-tertiary);
}
.search-idle-hero h3 { margin: 0 0 6px; font-size: 16px; font-weight: var(--fw-bold); color: var(--text-primary); }
.search-idle-hero p { margin: 0; font-size: 13px; color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .search-foot-loading svg { animation: none; }
}

/* 搜索吸顶块包含 safe-area 内边距（sticky top:0 时内容不钻入状态栏） */
.search-page { padding-top: 0; }
.search-top { padding-top: 0; }
.search-top .search-input-row { padding: calc(12px + var(--safe-top)) 4px 12px; }

/* —— 搜索「全部」页分区头 —— */
.search-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
  font-size: 14.5px; font-weight: var(--fw-bold); color: var(--text-primary);
}
.search-sec-more {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--accent); padding: 4px;
}
.search-sec-more:active { opacity: .7; }

/* ===== 切换校区双栏选择器（与注册页选择校区同款布局） ===== */
.campus-picker {
  display: grid; grid-template-columns: minmax(88px, .8fr) minmax(0, 1.6fr);
  height: min(330px, 50svh);
}
.campus-county-col, .campus-school-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.campus-county-col { padding-right: 14px; border-right: 1px solid var(--border); }
.campus-picker-label { flex-shrink: 0; margin: 0 0 12px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-secondary); }
.campus-county-list, .campus-school-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.campus-county {
  display: block; width: 100%; min-height: 48px; padding: 10px; margin-bottom: 6px;
  text-align: left; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.campus-county[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: var(--fw-bold); }
.campus-picker-empty { margin: 14px 0; color: var(--text-secondary); font-size: 13px; }
.campus-school {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 50px; width: 100%;
  border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text-primary);
  padding: 12px 2px; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.campus-school svg { opacity: 0; color: var(--accent-deep); flex: 0 0 auto; }
.campus-school[aria-pressed="true"] { color: var(--accent-deep); font-weight: var(--fw-semibold); }
.campus-school[aria-pressed="true"] svg { opacity: 1; }
.campus-school:disabled { opacity: .45; cursor: default; }
.campus-school:not(:disabled):active { background: var(--bg-card-soft); }

/* ============================================================
   Pull To Refresh（全局统一下拉刷新）：细圆环 + 简短结果反馈
   引擎与手势见 components/pull-refresh.js。
   内容推移由引擎管理的 .pr-spacer（布局级撑高）完成，不 transform 页面视图，
   fixed 控件（FAB 等）不受影响，直接保留页面自身背景。
   ============================================================ */
.pr-spacer { height: 0; overflow: hidden; pointer-events: none; }
.pr-spacer.pr-bleed { margin: 0 calc(-1 * var(--page-h)); }
.pr-spacer.pr-anim { transition: height 240ms cubic-bezier(.16, 1, .3, 1); }

.pr-layer {
  position: absolute; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
}
.pr-pill {
  position: absolute; top: 0; left: 50%;
  display: flex; align-items: center; gap: 7px;
  min-height: 24px;
  color: var(--text-secondary);
  opacity: 0;
  transform: translate(-50%, 0);
}
.pr-spinner {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.pr-spinner svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.pr-spinner circle {
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 4 100;
}
.pr-pill.ready { color: var(--text-primary); }
.pr-pill.refreshing .pr-spinner { animation: pr-spin 800ms linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-ico { display: none; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; }
.pr-pill.success .pr-spinner, .pr-pill.error .pr-spinner { display: none; }
.pr-pill.success .pr-ico-ok { display: grid; color: var(--success); }
.pr-pill.error .pr-ico-err { display: grid; color: var(--danger); }
.pr-text {
  font-size: 12px; line-height: 24px;
  color: var(--text-secondary); white-space: nowrap;
}
/* 刷新与成功只显示图形，文字仍供辅助技术播报；失败提示直接可见。 */
.pr-pill:not(.error) .pr-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pr-pill.pr-fade { transition: opacity 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pr-spacer.pr-anim, .pr-pill.pr-fade { transition: none; }
  .pr-pill.refreshing .pr-spinner { animation: none; }
}
/* 单选下拉：控件与展开列表采用相同圆角，列表不交给系统绘制。 */
.mz-select { position: relative; min-width: 0; }
.mz-select.open { z-index: 30; }
.mz-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-md); background: var(--bg-card-soft); color: var(--text-primary); text-align: left; font-size: 14.5px; }
.mz-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-select-trigger > svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.mz-select-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.mz-select-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; padding: 6px; border-radius: var(--r-md); background: var(--bg-card); box-shadow: var(--shadow-card-hover); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mz-select.open-up .mz-select-menu { top: auto; bottom: calc(100% + 6px); }
.mz-select-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px; border-radius: 10px; color: var(--text-primary); font-size: 14px; text-align: left; }
.mz-select-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-select-option > svg { flex-shrink: 0; visibility: hidden; }
.mz-select-option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: var(--fw-semibold); }
.mz-select-option[aria-selected="true"] > svg { visibility: visible; }
.mz-select-trigger:focus-visible, .mz-select-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mz-select-option:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .mz-select-option:hover { background: var(--bg-card-soft); } }
@media (prefers-reduced-motion: reduce) { .mz-select-trigger > svg { transition: none; } }
.post-community-source { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 10px; color: var(--text-secondary); font-size: 12px; line-height: 18px; }
.post-community-source svg { flex-shrink: 0; }
.post-community-source span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shared quota surfaces. */
.quota-page { max-width: 760px; margin-inline: auto; padding-bottom: var(--sp-8); }
.quota-page-header { align-items: center; justify-content: flex-start; gap: var(--sp-2); }
.quota-page-back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; color: var(--text-primary); font: inherit; background: transparent; border: 0; cursor: pointer; }
.quota-entry { display: block; width: 100%; margin: var(--sp-5) 0; padding: var(--sp-5); border: 0; border-radius: var(--r-md); background: var(--bg-card); color: var(--text-primary); text-align: left; font: inherit; cursor: pointer; }
.quota-entry:hover { background: var(--bg-card-soft); }
.quota-entry-head, .quota-section-head { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-5); }
.quota-entry-head > strong { font-size: var(--fs-card-title); margin-right: auto; }
.quota-plan-badge { display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); background: var(--bg-card-soft); color: var(--text-primary); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.quota-meter-head, .quota-meter-foot, .quota-detail-row, .quota-entry-extra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.quota-meter-head { font-size: var(--fs-body-small); }
.quota-meter { height: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--border); margin: var(--sp-3) 0; }
.quota-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--text-primary); }
.quota-meter-foot { flex-wrap: wrap; font-size: var(--fs-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.quota-entry-extra { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-body-small); }
.quota-panel { padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-card); }
.quota-section { margin-top: var(--sp-8); }
.quota-page h2, .quota-sheet-content h2 { font-size: var(--fs-card-title); font-weight: var(--fw-semibold); margin: 0; }
.quota-section-head h2 { flex: 1; }
.quota-detail-row { padding: var(--sp-4) 0 0; font-size: var(--fs-body); }
.quota-note { color: var(--text-secondary); font-size: var(--fs-body-small); line-height: var(--lh-body); margin: var(--sp-3) 0 var(--sp-4); }
.quota-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.quota-actions > .btn { flex: 1 1 150px; }
.btn.quota-button-primary, .btn.quota-button-secondary { min-height: 44px; border-radius: var(--r-pill); padding-inline: var(--sp-4); font-weight: var(--fw-semibold); }
.quota-button-primary { background: var(--text-primary); color: var(--bg-card); border: 0; }
.quota-button-secondary { background: var(--bg-card-soft); color: var(--text-primary); border: 1px solid var(--border); }
.quota-button-primary:hover, .quota-button-secondary:hover { filter: brightness(.94); }
.quota-button-primary:disabled, .quota-button-secondary:disabled { opacity: .55; cursor: default; }
.quota-cost-list { margin-top: var(--sp-3); }
.quota-cost-list > div { display: flex; gap: var(--sp-4); justify-content: space-between; padding-block: var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-body-small); }
.quota-cost-list dd { margin: 0; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* 使用记录：标签+时间+周/购买分额在左，消耗数值在右 */
.quota-history { margin-top: var(--sp-3); }
.quota-history-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--border); }
.quota-history-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quota-history-row strong { font-size: var(--fs-body-small); font-weight: var(--fw-semibold); }
.quota-history-row span, .quota-history-row small { font-size: var(--fs-meta); color: var(--text-tertiary); }
.quota-history-cost { flex-shrink: 0; font-size: var(--fs-body-small); font-variant-numeric: tabular-nums; }
.quota-history-more { margin-top: var(--sp-4); }
/* 「额度如何使用」独立页（#/profile/quota/usage）：面板仅承载「加热额度」h2 顶距 */
.quota-usage-panel h2 { margin-top: var(--sp-5); }
.quota-plan { padding: var(--sp-5); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
.quota-plan .quota-section-head { margin-bottom: var(--sp-3); }
.quota-price { display: flex; align-items: baseline; gap: var(--sp-1); margin: var(--sp-3) 0; font-variant-numeric: tabular-nums; }
.quota-price strong { font-size: var(--fs-large-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.quota-price span { color: var(--text-secondary); font-size: var(--fs-body-small); }
.quota-plan .btn { width: 100%; margin-top: var(--sp-3); }
.quota-plan .quota-note { margin-bottom: 0; }
.quota-plan .quota-price strong { font-size: var(--fs-title-page); }
.quota-plan-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.quota-plan-allowance { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: var(--fs-body-small); color: var(--text-secondary); }
.quota-plan-allowance strong { font-size: var(--fs-title-section); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quota-upgrade-section { margin-top: var(--sp-6); }
.seg.quota-plan-tabs { display: flex; width: 100%; margin: var(--sp-3) 0; }
.seg.quota-plan-tabs > button { flex: 1; min-width: 0; min-height: 44px; padding-inline: var(--sp-3); font-size: var(--fs-body); }
.seg.quota-plan-tabs > button:not(.active) { color: var(--text-secondary); }
.quota-plan-name { font-size: var(--fs-card-title); font-weight: var(--fw-semibold); margin: 0; }
.quota-plan-benefits { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-3) 0 0; font-size: var(--fs-body-small); color: var(--text-primary); }
.quota-plan-benefits > li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.quota-plan-benefits svg { flex-shrink: 0; }
.quota-upgrade-panel:focus-visible, .quota-plan-tabs > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quota-highest-plan { margin-top: var(--sp-4); }
.quota-highest-plan > .btn { width: 100%; }
.quota-subscription-note { margin-top: var(--sp-5); }
.quota-backdrop { z-index: 92; }
.quota-backdrop .sheet { background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
.quota-sheet-content { padding: 0 var(--sp-1) var(--sp-4); color: var(--text-primary); }
.quota-sheet-content > .btn { width: 100%; margin-top: var(--sp-4); }
.quota-limit-copy { font-size: var(--fs-body); margin: var(--sp-1) 0 var(--sp-5); line-height: var(--lh-body); }
.quota-purchase-total { margin-top: var(--sp-4); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.btn.quota-heat-button { display: flex; width: max-content; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 var(--sp-3) auto; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-pill); }
.quota-heat-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); border: 0; padding: 0; margin-block: var(--sp-5); }
.quota-heat-options.quota-pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quota-heat-options legend { font-size: var(--fs-body-small); margin-bottom: var(--sp-3); }
.quota-heat-options label { position: relative; display: block; min-width: 0; cursor: pointer; }
.quota-heat-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.quota-heat-options span { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); text-align: center; }
.quota-heat-options small { color: var(--text-secondary); }
.quota-heat-options input:checked + span { border-color: var(--text-primary); background: var(--bg-card-soft); }
.quota-heat-options input:focus-visible + span, .quota-page-back:focus-visible, .quota-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quota-heat-options input:disabled + span { opacity: .55; }
.quota-heat-prices { width: 100%; border-collapse: collapse; font-size: var(--fs-body-small); margin-top: var(--sp-3); font-variant-numeric: tabular-nums; }
.quota-heat-prices th, .quota-heat-prices td { padding: var(--sp-3) var(--sp-1); border-bottom: 1px solid var(--border); text-align: right; }
.quota-heat-prices th:first-child { text-align: left; }
.quota-heat-prices thead th { color: var(--text-secondary); font-weight: var(--fw-regular); }
.quota-promotion { font-size: var(--fs-meta); color: var(--text-secondary); margin-left: auto; }
.wall-page .quota-promotion { color: var(--wall-ink-2); }