/* ═══════════════════════════════════════════════════════
   求助大厅 / Help Hall — Stylesheet
   卡片样式匹配 aid.html 设计语言
   ═══════════════════════════════════════════════════════ */

/* ── 共用引用变量来自 bbs/style.css ── */
@import url('/bbs/static/css/style.css');

/* ── 全局触摸优化 ── */
* {
  -webkit-tap-highlight-color: transparent;
}
/* 保留部分交互元素的轻触反馈 */
button, .chip, .aid-card, .pg-btn, .pg-num, .verify-upload-trigger, .modal-close-btn {
  -webkit-tap-highlight-color: rgba(227,107,62,.12);
  touch-action: manipulation;
}
/* 禁止 iOS 输入框自动缩放（16px 基准字号为防缩阈值），同时保留设计视觉 */
@media (max-width: 640px) {
  .form-input, .form-textarea, .form-select, #dt-cm-input, #help-title,
  #help-content, #help-pub-contact, #offer-contact, #offer-note,
  #verify-realname, #verify-phone, #verify-note {
    font-size: 16px;
  }
}
/* 移动端所有可点击区域最小触控尺寸 */
@media (max-width: 768px) {
  .chip, .pg-num, .modal-close-btn, .verify-preview-del,
  .ac-cheer, .ac-comment, .ac-offer-btn, .ac-offer-count,
  .ac-detail-hint, .pg-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ac-cheer, .ac-comment, .ac-offer-btn, .ac-offer-count {
    padding: 8px 14px;
  }
}

/* ── iOS 安全区域全局变量 ── */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Hero 区 ── */
.help-hero { border-bottom: 1px solid var(--line); }
.help-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 12px;
}
.help-eyebrow .dot { width: 7px; height: 7px; background: var(--rust-3); border-radius: 50%; }
.help-hero-sub {
  margin-top: 14px; font-size: 14px; color: var(--ink-1); line-height: 1.75; max-width: 680px;
}
.help-hero-sub strong { color: var(--ink-0); }
.help-note { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-2); }

/* ── 工具栏 ── */
.help-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.help-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.help-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.help-chips .chip {
  padding: 6px 16px; border: 1px solid var(--line-2);
  border-radius: 20px; font-size: 13px; color: var(--ink-1);
  background: transparent; cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.help-chips .chip:hover { border-color: var(--rust-3); color: var(--ink-0); }
.help-chips .chip.is-active {
  background: var(--rust-3); color: #fff; border-color: var(--rust-3);
}

.help-apply-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; background: var(--rust-3); color: #fff;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .2s;
  white-space: nowrap; cursor: pointer; border: none;
  font-family: inherit; flex-shrink: 0;
}
.help-apply-btn:hover { background: var(--rust-2); color: #fff; }
.help-apply-btn .arr { display: inline-block; transition: transform .2s; }
.help-apply-btn:hover .arr { transform: translateX(3px); }
.help-apply-btn .arr::after { content: '→'; }

/* 认证按钮 */
.help-verify-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; background: transparent; color: var(--rust-3);
  border: 1.5px solid var(--rust-3); border-radius: 6px;
  font-size: 14px; font-weight: 600;
  text-decoration: none; transition: all .2s;
  white-space: nowrap; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
}
.help-verify-btn:hover { background: var(--rust-3); color: #fff; }
.help-verify-btn.is-verified {
  border-color: var(--green); color: var(--green);
}
.help-verify-btn.is-verified:hover { background: var(--green); color: #fff; }
.help-verify-btn.is-pending {
  border-color: var(--amber); color: var(--amber); cursor: pointer;
}
.help-verify-btn.is-pending:hover { background: var(--amber); color: #fff; }

/* 认证弹窗 */
.verify-warn {
  border: 1px solid rgba(215,160,45,.35);
  border-radius: 10px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(250,220,140,.12), rgba(250,220,140,.04));
  overflow: hidden;
}
.verify-warn-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: rgba(215,160,45,.12);
  font-size: 13px; font-weight: 700; color: #b08020;
}
.verify-warn-header i { font-size: 14px; }
.verify-warn-list {
  margin: 0; padding: 14px 16px; list-style: none;
}
.verify-warn-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink-1); line-height: 1.7;
  padding: 4px 0;
}
.verify-warn-list li + li {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(215,160,45,.1);
}
.verify-warn-list li i {
  font-size: 13px; color: #b08020; flex-shrink: 0;
  margin-top: 2px; width: 16px; text-align: center;
}
.verify-warn-list li strong { color: var(--ink-0); }

.verify-upload-hint {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px;
  border: 1px solid rgba(197,131,45,.25);
  border-radius: 8px; background: rgba(250,220,140,.1);
  font-size: 13px; color: #a07020; font-weight: 500;
}
.verify-upload-hint i { font-size: 14px; flex-shrink: 0; }

.verify-intro {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 20px;
  border: 1px solid rgba(227,107,62,.15);
  border-radius: 10px; background: rgba(227,107,62,.04);
}
.verify-intro p { margin:0; font-size:13px; color:var(--ink-1); line-height:1.7; }
.verify-intro i { flex-shrink:0; margin-top:2px; }

.verify-upload-area { position: relative; }
.verify-upload-trigger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 28px 20px; border: 2px dashed var(--line-2);
  border-radius: 10px; cursor: pointer; transition: all .2s;
  background: var(--bg-1); text-align: center;
}
.verify-upload-trigger:hover { border-color: var(--rust-3); background: rgba(227,107,62,.03); }
.verify-upload-trigger i { font-size: 28px; color: var(--ink-2); }
.verify-upload-trigger span { font-size: 14px; color: var(--ink-1); font-weight: 500; }
.verify-upload-trigger small { font-size: 11px; color: var(--ink-3); }

.verify-preview {
  position: relative; display: inline-block; margin-top: 8px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2);
}
.verify-preview img { max-width: 200px; max-height: 150px; display: block; }
.verify-preview-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.verify-other-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* 认证状态展示 */
.verify-status-wrap {
  padding: 24px; text-align: center;
}
.verify-status-icon { font-size: 48px; margin-bottom: 12px; }
.verify-status-icon.pending { color: var(--amber); }
.verify-status-icon.approved { color: var(--green); }
.verify-status-icon.rejected { color: var(--rev); }
.verify-status-title { font-size: 18px; font-weight: 700; color: var(--ink-0); margin-bottom: 8px; }
.verify-status-desc { font-size: 13px; color: var(--ink-2); margin-bottom: 0; line-height: 1.6; }
.verify-status-note {
  margin-top: 16px; padding: 12px; background: var(--bg-1);
  border-radius: 8px; font-size: 12px; color: var(--ink-2);
  text-align: left; line-height: 1.6;
}

/* ── 网格 ── */
.aid-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 720px) { .aid-grid { grid-template-columns: 1fr; } }

/* ═══════════════ 卡片（匹配 aid.html）═══════════════ */
.aid-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.025);
  transition: border-color .25s, background .25s, transform .25s;
  min-width: 0; cursor: pointer;
}
.aid-card:hover {
  border-color: var(--line-3); background: rgba(255,255,255,.04); transform: translateY(-2px);
}
.aid-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 3px;
  background: var(--ink-2);
}
.aid-card.urgency-high::before   { background: var(--rev); }
.aid-card.urgency-medium::before { background: var(--amber); }
.aid-card.urgency-low::before    { background: var(--green); }
.aid-card.status-completed { opacity: .62; }
.aid-card.status-completed::before { background: var(--green); }
.aid-card.is-pinned { border-color: rgba(197,131,45,.35); }
.aid-card.is-pinned::after {
  content: '顶置'; position: absolute; top: 10px; right: 10px;
  background: var(--amber); color: #000; font-size: 10px;
  padding: 2px 8px; border-radius: 10px; font-weight: 700;
  letter-spacing: .04em;
}

/* ── 卡片 header ── */
.aid-card header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ac-urg {
  padding: 3px 8px; border: 1px solid currentColor; font-weight: 600;
  color: var(--ink-2);
}
.aid-card.urgency-high .ac-urg   { color: var(--rev); }
.aid-card.urgency-medium .ac-urg { color: var(--amber); }
.aid-card.urgency-low .ac-urg    { color: var(--green); }
.ac-cat { padding: 3px 8px; border: 1px dashed var(--line-2); color: var(--ink-1); }
.ac-status { color: var(--ink-2); }
.aid-card.status-completed .ac-status  { color: var(--green); }
.aid-card.status-reviewing .ac-status  { color: var(--amber); }
.aid-card.status-closed .ac-status     { color: var(--ink-3); }
.ac-date { margin-left: auto; color: var(--ink-3); }

/* ── 卡片标题 ── */
.aid-card h3 {
  font-family: var(--cn); font-weight: 500; font-size: 18px; color: var(--ink-0);
  letter-spacing: .02em; line-height: 1.45; margin: 0;
}

/* ── 卡片用户信息 ── */
.ac-meta-user {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--cn); font-size: 13px;
}
.acm-nick { color: var(--ink-0); font-weight: 500; }
.acm-shard {
  color: var(--ink-2); font-size: 11px; letter-spacing: .04em;
  font-family: var(--cn);
  padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.acm-verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--blue); letter-spacing: .04em;
}

/* ── 卡片故事 ── */
.ac-story {
  font-family: var(--cn); font-size: 13px; color: var(--ink-1); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}

/* ── 卡片底部操作 ── */
.ac-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0 0; border-top: 1px solid var(--line);
  margin-top: auto;
}
.ac-cheer, .ac-comment {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255,255,255,.015);
  font-family: var(--mono); font-size: 11px; color: var(--ink-1);
  letter-spacing: .06em; cursor: pointer; transition: all .22s ease;
  position: relative; overflow: hidden;
}
.ac-cheer::after, .ac-comment::after {
  content: ''; position: absolute; inset: 0;
  background: var(--rust-3); opacity: 0; transition: opacity .22s ease;
  border-radius: 8px; z-index: 0;
}
.ac-cheer:hover, .ac-comment:hover {
  border-color: var(--ink-2); color: var(--ink-0);
  background: rgba(255,255,255,.03); transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ac-cheer.is-cheered {
  border-color: var(--rust-3); color: var(--bone);
  background: rgba(201,90,68,.1);
  box-shadow: inset 0 0 0 1px rgba(201,90,68,.15);
}
.ac-cheer.is-cheered:hover { background: rgba(201,90,68,.15); border-color: var(--rust-2); }
.ac-comment.is-commented {
  border-color: var(--green); color: var(--bone);
  background: rgba(90,155,106,.1);
  box-shadow: inset 0 0 0 1px rgba(90,155,106,.15);
}
.acc-icon {
  position: relative; z-index: 1;
  font-size: 13px; line-height: 1;
  display: flex; align-items: center;
}
.acc-num {
  position: relative; z-index: 1;
  font-weight: 700; color: var(--ink-0);
  font-size: 11px; line-height: 1;
}
.acc-lab {
  position: relative; z-index: 1;
  color: var(--ink-2); font-size: 10.5px; line-height: 1;
}
.ac-spacer { flex: 1; }
.ac-done { color: var(--green); font-size: 10px; letter-spacing: .16em; }
.ac-detail-hint {
  color: var(--ink-3); font-size: 11px; letter-spacing: .06em;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; padding: 4px 0;
}
.ac-detail-hint .arr { display: inline-block; transition: transform .2s ease; }
.ac-detail-hint .arr::after { content: '→'; }
.aid-card:hover .ac-detail-hint { color: var(--ink-1); }
.aid-card:hover .ac-detail-hint .arr { transform: translateX(3px); }

/* ── 帮助Ta 按钮 ── */
.ac-offer-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px;
  border: 1px solid var(--rust-3);
  border-radius: 8px;
  background: rgba(201,90,68,.06);
  font-family: var(--mono); font-size: 11px; color: var(--rust-3);
  letter-spacing: .06em; cursor: pointer; transition: all .22s ease;
  position: relative; overflow: hidden;
}
.ac-offer-btn:hover {
  background: var(--rust-3); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(201,90,68,.25);
}
.ac-offer-btn.is-offered {
  border-color: var(--green); color: var(--green);
  background: rgba(90,155,106,.1);
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(90,155,106,.15);
}
.ac-offer-btn.is-offered:hover {
  background: rgba(90,155,106,.12); color: var(--green);
  transform: none; box-shadow: inset 0 0 0 1px rgba(90,155,106,.15);
}
.ac-offer-btn .acc-icon { font-size: 12px; line-height: 1; }

/* ── 援助计数（已有X人援助） ── */
.ac-offer-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255,255,255,.015);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  letter-spacing: .06em; white-space: nowrap;
}
.ac-offer-count .acc-lab { color: var(--ink-2); }
.ac-offer-count .acc-num {
  font-weight: 700; color: var(--ink-0); font-size: 11px;
}

/* ── 分页器 ── */
.paginator {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 40px; flex-wrap: wrap;
}
.pg-btn {
  padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 13px; color: var(--ink-1); cursor: pointer;
  background: transparent; transition: all .2s;
}
.pg-btn:hover:not(:disabled) { border-color: var(--rust-3); color: var(--ink-0); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-pages { display: flex; gap: 4px; }
.pg-num {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 13px; color: var(--ink-1); cursor: pointer;
  background: transparent; transition: all .2s;
}
.pg-num:hover { border-color: var(--rust-3); color: var(--ink-0); }
.pg-num.is-active { background: var(--rust-3); color: #fff; border-color: var(--rust-3); }
.pg-gap { padding: 0 4px; color: var(--ink-3); font-size: 13px; }

/* ── 空态 ── */
.help-empty {
  text-align: center; padding: 60px 20px; color: var(--ink-2);
  grid-column: 1 / -1;
}
.help-empty p { margin-top: 8px; font-size: 14px; }

/* ── 加载 ── */
.help-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 20px; gap: 12px; color: var(--ink-2);
}
.help-loading .spinner {
  width: 24px; height: 24px; border: 2px solid var(--line-2);
  border-top-color: var(--rust-3); border-radius: 50%;
  animation: help-spin .7s linear infinite;
}
@keyframes help-spin { to { transform: rotate(360deg); } }

/* ── 表单组件 ── */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 13px; color: var(--ink-1);
  font-weight: 600; margin-bottom: 8px;
}
.form-group label .req { color: var(--rust-3); margin-right: 2px; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--bg-1); color: var(--ink-0);
  font-size: 14px; font-family: inherit; transition: border-color .2s;
  box-sizing: border-box;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--rust-3);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-select { cursor: pointer; }
.form-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* 伸出援手 — 昵称只读展示 */
.offer-nickname-display {
  padding: 10px 14px; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--bg-1); color: var(--ink-0);
  font-size: 14px; font-weight: 600;
}

/* 表单分区标题 */
.saved-section { margin-bottom: 16px; }
.saved-section-title {
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.form-submit {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
}
.btn {
  padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .2s; border: none;
}
.btn-primary { background: var(--rust-3); color: #fff; }
.btn-primary:hover { background: var(--rust-2); }
.btn-ghost {
  background: transparent; color: var(--ink-1);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink-0); }

/* ── 流程说明 ── */
.help-process-section {
  border-top: 1px solid var(--line); margin-top: 50px; padding-top: 50px;
}
.help-process h3 {
  font-size: 18px; font-weight: 700; color: var(--ink-0); margin-bottom: 28px;
}
.help-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 900px) { .help-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .help-steps { grid-template-columns: 1fr; } }
.help-steps article {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 20px;
}
.help-steps article span {
  display: block; font-size: 28px; font-weight: 800; color: var(--rust-3);
  margin-bottom: 8px; font-family: var(--mono);
}
.help-steps article strong {
  display: block; font-size: 14px; color: var(--ink-0); margin-bottom: 6px;
}
.help-steps article p {
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
}

/* ── Login-prompt ── */
.help-login-prompt {
  text-align: center; padding: 20px; color: var(--ink-2);
  border: 1px dashed var(--line-2); border-radius: 8px;
}
.help-login-prompt a { color: var(--rust-3); text-decoration: underline; }

/* ═══════════════ 弹窗通用 ═══════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-fade-in .2s ease;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-dialog {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%; max-width: 600px; max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: modal-slide-in .25s ease;
}
.modal-dialog.modal-detail { max-width: 580px; }
@keyframes modal-slide-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2); z-index: 1;
  border-radius: 14px 14px 0 0;
}
.modal-header h3 { font-size: 18px; font-weight: 700; color: var(--ink-0); margin: 0; }
.modal-close-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-2);
  font-size: 18px; cursor: pointer; border-radius: 6px; transition: all .2s;
}
.modal-close-btn:hover { background: var(--hover-fill); color: var(--ink-0); }
.modal-body { padding: 20px; }

/* ═══════════════════════════════════════════════════════
   详情弹窗内容 — 紧凑有序 · 层次分明
   ═══════════════════════════════════════════════════════ */
.detail-wrap {
  display: flex; flex-direction: column; gap: 0;
}

/* ── 分隔线 ── */
.dt-divider {
  height: 1px; background: rgba(255,255,255,.05);
  margin: 14px 0;
}

/* ── 元数据行：标签 + 日期同行 ── */
.dt-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
}
.dt-meta-row .ac-urg,
.dt-meta-row .ac-cat,
.dt-meta-row .ac-status {
  font-size: 10px; padding: 2px 10px; border-radius: 12px;
  border-width: 1px; border-style: solid; white-space: nowrap;
}
.dt-meta-row .ac-urg {
  border-color: var(--amber); color: var(--amber);
  background: rgba(197,131,45,.08);
}
.dt-meta-row .ac-cat {
  border-color: var(--ink-3); color: var(--ink-2);
  border-style: dashed; background: transparent;
}
.dt-meta-row .ac-status {
  border-color: var(--green); color: var(--green);
  background: rgba(90,155,106,.06);
}
.dt-meta-row .ac-date {
  margin-left: auto; color: var(--ink-3);
  font-size: 11px; letter-spacing: .03em; white-space: nowrap;
}
.dt-pinned-tag {
  font-family: var(--mono); font-size: 10px;
  background: rgba(197,131,45,.15); color: var(--amber);
  padding: 2px 10px; border: 1px solid rgba(197,131,45,.25);
  border-radius: 12px; font-weight: 600; letter-spacing: .08em;
  white-space: nowrap;
}

/* ── 标题 ── */
.dt-title {
  font-family: var(--cn); font-weight: 600;
  font-size: 20px; color: var(--bone);
  line-height: 1.5; letter-spacing: .02em;
  padding: 6px 0 0; margin: 0;
}

/* ── 发布者行（轻量内联） ── */
.dt-author-inline {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
}
.dt-author-inline .dt-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.dt-author-inline .dt-avatar-fb {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #c98b3e, #a0622a);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.dt-author-name {
  font-size: 14px; font-weight: 600; color: var(--ink-0);
}
.dt-author-name .dt-verified {
  font-size: 10px; color: var(--blue);
  background: rgba(98,154,219,.1);
  padding: 1px 7px; border-radius: 6px;
  font-weight: 500; margin-left: 6px; vertical-align: middle;
}
.dt-author-sub {
  font-size: 11px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
}
.dt-author-shard {
  font-size: 11px; color: var(--ink-2);
  padding: 1px 8px; border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; font-family: var(--cn);
}
.dt-author-time {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .03em;
}

/* ── 正文 ── */
.dt-body-section {
  padding: 6px 0 12px;
}
.dt-body {
  font-family: var(--cn); font-size: 14.5px; color: var(--ink-1);
  line-height: 2; white-space: pre-wrap; word-break: break-word;
  letter-spacing: .015em;
}

/* ── 联系方式行 ── */
.dt-contact-section { margin: 4px 0; }
.dt-contact-visible {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(90,155,106,.1);
  border-radius: 8px;
  background: rgba(90,155,106,.03);
}
.dt-contact-visible .dt-pc-icon { font-size: 16px; flex-shrink: 0; }
.dt-contact-visible .dt-pc-label {
  font-size: 11px; color: var(--green); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.dt-contact-visible .dt-pc-badge {
  font-size: 9px; padding: 2px 8px; border-radius: 10px;
  background: rgba(90,155,106,.08); color: var(--green);
  border: 1px solid rgba(90,155,106,.15);
  font-family: var(--mono); letter-spacing: .04em;
  white-space: nowrap; margin-left: auto; flex-shrink: 0;
}
.dt-contact-visible .dt-pc-val {
  font-size: 13px; color: var(--bone); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* 锁定态（单行） */
.dt-contact-locked {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 8px;
  background: rgba(255,255,255,.01);
}
.dt-contact-locked .dt-pc-lock-icon { font-size: 16px; opacity: .6; }
.dt-contact-locked .dt-pc-lock-text { font-size: 12px; color: var(--ink-2); }
.dt-contact-locked .dt-pc-lock-hint {
  font-size: 11px; color: var(--ink-3);
  margin-left: auto; padding: 2px 10px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; white-space: nowrap;
}

/* ── 操作栏 ── */
.dt-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
}
.dt-actions .ac-cheer,
.dt-actions .ac-comment {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  color: var(--ink-1); cursor: pointer;
  transition: all .2s ease; font-family: var(--cn);
}
.dt-actions .ac-cheer:hover {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  transform: translateY(-1px);
}
.dt-actions .ac-cheer.is-cheered {
  border-color: rgba(201,90,68,.2); color: var(--bone);
  background: rgba(201,90,68,.08);
}
.dt-actions .ac-comment { cursor: default; }
.dt-actions .acc-icon { font-size: 14px; }
.dt-actions .acc-num { font-size: 11px; color: var(--ink-2); }
.dt-actions .acc-lab { font-size: 11px; color: var(--ink-2); }
.dt-offer-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px;
  border: 1px solid rgba(201,90,68,.15);
  border-radius: 8px;
  background: rgba(201,90,68,.06);
  font-family: var(--cn); font-size: 12px; color: var(--rust-3);
  font-weight: 500; cursor: pointer;
  transition: all .2s ease;
}
.dt-offer-action:hover {
  background: var(--rust-3); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(201,90,68,.15);
  border-color: var(--rust-3);
}
.dt-offer-done {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 16px;
  border: 1px solid rgba(90,155,106,.12);
  border-radius: 8px;
  background: rgba(90,155,106,.04);
  font-family: var(--cn); font-size: 12px; color: var(--green);
  font-weight: 500;
}
.dt-pin-btn {
  margin-left: auto; padding: 7px 16px;
  background: linear-gradient(135deg, var(--rust-3), var(--rust-2));
  color: #fff; border: none; border-radius: 8px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .2s ease; letter-spacing: .02em;
  white-space: nowrap;
}
.dt-pin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(201,90,68,.15);
}
.dt-pin-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.dt-pinned-indicator {
  margin-left: auto; font-size: 10px; color: var(--amber);
  font-family: var(--mono); letter-spacing: .05em;
  padding: 5px 10px; border: 1px solid rgba(197,131,45,.12);
  border-radius: 8px; background: rgba(197,131,45,.04);
  white-space: nowrap;
}
.ac-spacer { flex: 1; }

/* ── 帮助者列表 ── */
.dt-helpers {
  margin-top: 8px;
}
.dt-hl-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-0); margin-bottom: 10px;
}
.dt-hl-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.04);
}
.dt-hl-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; background: rgba(0,0,0,.06);
  transition: border-color .2s;
}
.dt-hl-item:hover { border-color: rgba(255,255,255,.06); }
.dt-hl-item:last-child { margin-bottom: 0; }
.dt-hl-item.is-self {
  border-color: rgba(197,131,45,.12);
  background: rgba(197,131,45,.02);
}
.dt-hl-item.is-self:hover {
  border-color: rgba(197,131,45,.2);
  background: rgba(197,131,45,.04);
}
.dt-hl-self-tag {
  font-size: 9px; padding: 1px 7px; border-radius: 8px;
  font-weight: 600; letter-spacing: .04em;
  color: var(--rust-3); background: rgba(201,90,68,.08);
  border: 1px solid rgba(201,90,68,.1);
  font-family: var(--mono, monospace); text-transform: uppercase;
  white-space: nowrap;
}
.dt-hl-item-head {
  display: flex; align-items: center; gap: 10px;
}
.dt-hl-name {
  font-size: 13px; color: var(--ink-0); font-weight: 500;
}
.dt-hl-name-masked {
  font-size: 12px; color: var(--ink-3); font-style: italic;
}
.dt-hl-time {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: .03em; margin-left: auto;
}
.dt-hl-status {
  font-size: 9px; padding: 2px 8px; border-radius: 8px;
  font-family: var(--mono); letter-spacing: .04em;
}
.dt-hl-status.pending {
  color: var(--amber); background: rgba(197,131,45,.08);
  border: 1px solid rgba(197,131,45,.12);
}
.dt-hl-status.contacted {
  color: var(--green); background: rgba(90,155,106,.08);
  border: 1px solid rgba(90,155,106,.12);
}
.dt-hl-contacts {
  font-size: 11px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.dt-hl-contact {
  padding: 2px 8px; border: 1px solid rgba(255,255,255,.03);
  border-radius: 6px; font-size: 11px; color: var(--ink-1);
}
.dt-hl-item.is-self .dt-hl-contact {
  border-color: rgba(197,131,45,.12);
  background: rgba(197,131,45,.03);
  color: var(--ink-0);
}
.dt-hl-contact em {
  font-style: normal; color: var(--ink-3); margin-right: 3px;
}
.dt-hl-note {
  margin-top: 6px; font-size: 12px; color: var(--ink-2);
  line-height: 1.7;
  padding: 8px 12px; background: rgba(255,255,255,.015);
  border-radius: 8px; border-left: 2px solid rgba(197,131,45,.2);
}
.dt-hl-empty {
  color: var(--ink-3); font-size: 12px; text-align: center;
  padding: 14px 0;
  border: 1px dashed rgba(255,255,255,.03);
  border-radius: 8px;
}

/* ── 评论区域 ── */
.dt-comments {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.dt-cm-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-0);
  margin-bottom: 14px;
}
.dt-cm-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.04);
}
.dt-cm-count {
  font-size: 11px; font-weight: 400; color: var(--ink-2);
  font-family: var(--mono, monospace);
}

/* 单条留言 — 卡片式 */
.dt-comment {
  display: flex; gap: 10px;
  padding: 14px 16px; margin-bottom: 8px;
  background: rgba(255,255,255,.012);
  border-radius: 10px; border: 1px solid rgba(255,255,255,.025);
  transition: border-color .2s, background .2s;
}
.dt-comment:last-child { margin-bottom: 0; }
.dt-comment:hover {
  border-color: rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}
.dt-comment.is-author {
  border-color: rgba(201,90,68,.08);
  background: rgba(201,90,68,.015);
}
.dt-comment.is-author:hover {
  border-color: rgba(201,90,68,.12);
  background: rgba(201,90,68,.025);
}

/* 留言者头像 */
.dt-cm-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0; aspect-ratio: 1/1;
  image-rendering: auto;
}
.dt-cm-avatar-fb {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #5a5f6b, #3d4148);
  color: #bbb; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; user-select: none;
}
.dt-comment.is-author .dt-cm-avatar-fb {
  background: linear-gradient(135deg, #c98b3e, #a0622a);
  color: #fff;
}

/* 留言内容区域 */
.dt-cm-main { flex: 1; min-width: 0; }

.dt-cm-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.dt-cm-name {
  font-size: 13px; color: var(--ink-0); font-weight: 600;
}
.dt-cm-tag {
  font-size: 9px; padding: 1px 7px; border-radius: 8px;
  font-weight: 600; letter-spacing: .04em;
  font-family: var(--mono, monospace); text-transform: uppercase;
}
.dt-cm-tag.author {
  color: var(--rust-3); background: rgba(201,90,68,.08);
  border: 1px solid rgba(201,90,68,.1);
}
.dt-cm-time {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: .03em; margin-left: auto;
}
.dt-cm-body {
  font-size: 13px; color: var(--ink-1); line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}

/* 空留言 */
.dt-cm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 20px; text-align: center;
  border: 1px dashed rgba(255,255,255,.03);
  border-radius: 10px; color: var(--ink-3);
}
.dt-cm-empty-icon {
  font-size: 28px; opacity: .4; line-height: 1;
}
.dt-cm-empty-text {
  font-size: 13px; color: var(--ink-2);
}
.dt-cm-empty-sub {
  font-size: 11px; color: var(--ink-3);
}

/* 评论表单 — 紧凑卡片 */
.dt-cm-form-wrap {
  margin-top: 12px; padding: 14px 16px;
  background: rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,.03);
  border-radius: 10px;
}
.dt-cm-form {
  display: flex; gap: 10px;
}
.dt-cm-form textarea {
  flex: 1; min-height: 52px; max-height: 120px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; background: rgba(0,0,0,.16);
  color: var(--ink-0); font-size: 13px; resize: none;
  font-family: inherit; transition: border-color .2s, background .2s;
  box-sizing: border-box; line-height: 1.6;
}
.dt-cm-form textarea:focus {
  outline: none; border-color: rgba(201,90,68,.2);
  background: rgba(0,0,0,.24);
}
.dt-cm-form textarea::placeholder { color: var(--ink-3); }
.dt-cm-form-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.dt-cm-form button {
  padding: 10px 20px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--rust-3), var(--rust-2));
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
  letter-spacing: .02em; white-space: nowrap;
}
.dt-cm-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(201,90,68,.15);
}
.dt-cm-form button:disabled {
  opacity: .4; cursor: not-allowed; transform: none; box-shadow: none;
}
.dt-cm-char-count {
  font-size: 10px; color: var(--ink-3);
  font-family: var(--mono, monospace);
  transition: color .2s;
}
.dt-cm-char-count.warning { color: var(--amber); }
.dt-cm-char-count.over { color: var(--rev); }

/* 未登录提示 */
.dt-cm-login {
  margin-top: 12px; padding: 16px;
  text-align: center; color: var(--ink-2);
  border: 1px dashed rgba(255,255,255,.03);
  border-radius: 10px; background: rgba(0,0,0,.04);
}
.dt-cm-login a { color: var(--rust-3); text-decoration: underline; font-weight: 500; }
.dt-cm-login a:hover { color: var(--rust-2); }

/* 已结束提示 */
.dt-cm-closed {
  margin-top: 12px; padding: 14px 16px;
  text-align: center; color: var(--ink-2); font-size: 14px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px; background: rgba(0,0,0,.05);
}

/* ── 查看联系方式按钮 ── */
.dt-hl-reveal-wrap { margin-top: 10px; }
.dt-hl-reveal-btn {
  padding: 8px 18px;
  border: 1px solid rgba(197,131,45,.15);
  border-radius: 10px;
  background: rgba(197,131,45,.04);
  font-family: var(--cn); font-size: 12px; color: var(--amber);
  font-weight: 500; cursor: pointer;
  transition: all .25s ease;
}
.dt-hl-reveal-btn:hover {
  background: rgba(197,131,45,.12);
  border-color: rgba(197,131,45,.3);
  color: var(--mustard);
  transform: translateY(-1px);
}
.dt-hl-reveal-btn:disabled {
  opacity: .5; cursor: wait; transform: none;
}
.dt-hl-privacy-note {
  font-size: 11px; color: var(--ink-3); margin-top: 6px;
}

/* ── 帮助者多选：复选框 + 全选栏 ── */
.dt-hl-item-selectable {
  cursor: default;
}
.dt-hl-item-selectable .dt-hl-item-head {
  gap: 6px;
}
.dt-hl-check {
  width: 18px; height: 18px;
  accent-color: var(--rust-3);
  cursor: pointer; flex-shrink: 0;
  margin: 0;
}
.dt-hl-select-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; background: rgba(0,0,0,.08);
}
.dt-hl-select-all-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-1); cursor: pointer;
  user-select: none;
}
.dt-hl-select-all-label input { accent-color: var(--rust-3); width: 16px; height: 16px; margin: 0; }
.dt-hl-selected-count {
  font-size: 11px; color: var(--ink-2);
  font-family: var(--mono, monospace);
}

/* ── 确认完成按钮 ── */
.dt-hl-actions-bar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.03);
}
.dt-complete-btn {
  padding: 10px 20px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #5a9b6a, #3d7a4e);
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
  letter-spacing: .02em; white-space: nowrap;
  align-self: flex-start;
}
.dt-complete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(90,155,106,.25);
  background: linear-gradient(135deg, #66a876, #458a56);
}
.dt-complete-btn:disabled {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}
.dt-complete-sub {
  font-size: 11px; color: var(--ink-3);
  line-height: 1.5;
}

/* ── 感谢标题 ── */
.dt-hl-title-thanks {
  color: var(--bone) !important;
  font-size: 15px !important;
  background: linear-gradient(135deg, rgba(90,155,106,.08), rgba(90,155,106,.02));
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(90,155,106,.1);
  margin-bottom: 6px;
}
.dt-hl-title-thanks i { margin-right: 6px; color: var(--bone); }

/* ── 已完成感谢名单 ── */
.dt-hl-thanks-section {
  display: flex; flex-direction: column; gap: 8px;
}
.dt-hl-thanks-list {
  display: flex; flex-direction: column; gap: 6px;
}
.dt-hl-thanks-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(90,155,106,.08);
  border-radius: 8px;
  background: rgba(90,155,106,.03);
  transition: border-color .2s;
}
.dt-hl-thanks-item:hover {
  border-color: rgba(90,155,106,.15);
}
.dt-hl-thanks-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #5a9b6a, #3d7a4e);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.dt-hl-thanks-name {
  font-size: 14px; color: var(--ink-0); font-weight: 500;
  flex: 1; min-width: 0;
}
.dt-hl-thanks-time {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: .03em; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════
   响应式适配 — 手机 / 平板
   ═══════════════════════════════════════════════════════ */

/* ── 平板 (≤ 1024px) ── */
@media (max-width: 1024px) {
  .help-hero-sub { max-width: 100%; }
  .help-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ── 手机横屏 / 小平板 (≤ 768px) ── */
@media (max-width: 768px) {
  /* Hero 区 */
  .subpage-h {
    flex-direction: column;
    gap: 20px;
  }
  .subpage-h h1 .zh { font-size: clamp(28px, 6vw, 40px); }
  .help-hero-sub { font-size: 13px; }
  .help-note { font-size: 11px; }

  /* 统计区 — 横向排列换横行 */
  .subpage-h .stat {
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: flex-start;
    font-size: 13px;
  }

  /* 网格 */
  .aid-grid { grid-template-columns: 1fr; gap: 12px; }

  /* 流程 */
  .help-process h3 { font-size: 16px; margin-bottom: 20px; }
  .help-steps { gap: 12px; }

  /* 工具栏 */
  .help-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .help-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .help-chips::-webkit-scrollbar { display: none; }
  .help-chips .chip {
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 14px;
  }
  .help-actions {
    justify-content: space-between;
    width: 100%;
  }
  .help-actions .help-verify-btn,
  .help-actions .help-apply-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* 弹窗 — 全屏适配 */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-dialog {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    width: 100%;
  }
  .modal-dialog.modal-detail { max-width: 100%; }
  .modal-header {
    border-radius: 16px 16px 0 0;
    padding: 16px 18px;
  }
  .modal-header h3 { font-size: 16px; }
  .modal-body { padding: 16px; }

  /* 认证弹窗内布局 */
  .verify-intro { flex-direction: column; align-items: flex-start; gap: 8px; }
  .verify-warn-list li { font-size: 12px; }

  /* 分页器 */
  .paginator { gap: 4px; margin-top: 28px; }
  .pg-btn { padding: 7px 12px; font-size: 12px; }
  .pg-num { width: 32px; height: 32px; font-size: 12px; }
  .pg-gap { padding: 0 2px; }
}

/* ── 竖屏手机 (≤ 640px) ── */
@media (max-width: 640px) {
  /* Hero */
  .subpage-crumbs {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .help-eyebrow { font-size: 10px; letter-spacing: .08em; }
  .help-hero-sub { font-size: 12.5px; line-height: 1.7; }
  .help-hero-sub br { display: none; }

  /* 卡片内边距 */
  .aid-card {
    padding: 16px 18px;
    gap: 8px;
  }
  .aid-card header { gap: 6px; font-size: 9px; padding-bottom: 8px; }
  .aid-card h3 { font-size: 16px; }
  .ac-urg, .ac-cat { font-size: 9px; padding: 2px 7px; }
  .ac-date { font-size: 9px; }
  .ac-story { font-size: 12.5px; -webkit-line-clamp: 3; }
  .ac-meta-user { font-size: 12px; gap: 6px; }
  .acm-shard { font-size: 10px; max-width: 110px; padding: 1px 6px; }

  /* 卡片底部操作 */
  .ac-actions {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 0;
  }
  .ac-cheer, .ac-comment, .ac-offer-count {
    padding: 6px 12px;
    font-size: 10.5px;
  }
  .ac-offer-btn {
    padding: 6px 14px;
    font-size: 10.5px;
  }
  .acc-icon { font-size: 12px; }
  .acc-num, .acc-lab { font-size: 10px; }
  .ac-detail-hint { font-size: 10px; }
  .ac-spacer { display: none; }

  /* 帮助Ta按钮 */
  .ac-offer-btn { width: 100%; justify-content: center; }

  /* 工具栏 */
  .help-actions {
    gap: 8px;
  }

  /* 流程步骤 */
  .help-process-section {
    margin-top: 36px;
    padding-top: 36px;
  }
  .help-steps { grid-template-columns: 1fr; gap: 10px; }
  .help-steps article { padding: 16px; }
  .help-steps article span { font-size: 24px; }
  .help-steps article strong { font-size: 13px; }
  .help-steps article p { font-size: 11.5px; }

  /* 弹窗 body */
  .modal-body { padding: 14px; }

  /* 表单 */
  .form-group { margin-bottom: 16px; }
  .form-group label { font-size: 12px; }
  .form-input, .form-textarea, .form-select {
    padding: 9px 12px;
    font-size: 13px;
  }
  .form-submit {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
  }
  .form-submit .btn { width: 100%; text-align: center; padding: 11px 16px; }
  .btn { font-size: 13px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }

  /* 认证上传区域 */
  .verify-upload-trigger { padding: 20px 14px; }
  .verify-upload-trigger i { font-size: 24px; }
  .verify-upload-trigger span { font-size: 13px; }

  /* ── 详情弹窗 · 移动端 ── */
  .detail-wrap { padding: 0; }
  .dt-title {
    font-size: 17px;
    line-height: 1.45;
    padding-top: 12px;
  }
  .dt-meta-row { gap: 4px; flex-wrap: wrap; }
  .dt-meta-row .ac-urg,
  .dt-meta-row .ac-cat,
  .dt-meta-row .ac-status {
    font-size: 9px;
    padding: 2px 8px;
  }
  .dt-meta-row .ac-date { margin-left: 0; width: 100%; text-align: left; margin-top: 2px; }
  .dt-pinned-tag { font-size: 9px; padding: 1px 8px; }

  /* 发布者行 — 紧凑 */
  .dt-author-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }
  .dt-author-inline .dt-avatar,
  .dt-author-inline .dt-avatar-fb {
    width: 32px;
    height: 32px;
  }
  .dt-author-name { font-size: 13px; }
  .dt-author-sub { font-size: 10px; }
  .dt-author-shard { font-size: 10px; padding: 1px 6px; }
  .dt-author-time { font-size: 9.5px; }
  .dt-author-name .dt-verified {
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 4px;
  }

  /* 正文 */
  .dt-body-section { padding: 4px 0 10px; }
  .dt-body { font-size: 13.5px; line-height: 1.85; }
  .dt-body::first-letter { font-size: 2em; }

  /* 联系方式 */
  .dt-contact-visible {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .dt-contact-visible .dt-pc-badge {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .dt-contact-locked { flex-wrap: wrap; gap: 6px; }

  /* 操作栏 */
  .dt-actions {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
  }
  .dt-actions .ac-cheer,
  .dt-actions .ac-comment {
    padding: 6px 10px;
    font-size: 11px;
  }
  .dt-actions .acc-icon { font-size: 13px; }
  .dt-actions .acc-num,
  .dt-actions .acc-lab { font-size: 10px; }
  .dt-actions .ac-spacer { display: none; }
  .dt-pin-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
    padding: 9px 14px;
    font-size: 12px;
  }
  .dt-pinned-indicator {
    margin-left: 0;
    width: 100%;
    text-align: center;
    font-size: 11px;
  }
  .dt-offer-action,
  .dt-offer-done {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* 帮助者列表 */
  .dt-hl-item { padding: 8px 10px; }
  .dt-hl-item-head { flex-wrap: wrap; gap: 4px; }
  .dt-hl-name { font-size: 12px; }
  .dt-hl-self-tag { font-size: 8px; padding: 1px 5px; }
  .dt-hl-time { font-size: 9px; }
  .dt-hl-status { font-size: 8px; padding: 1px 6px; }
  .dt-hl-check { width: 16px; height: 16px; }
  .dt-hl-select-bar { padding: 6px 10px; }
  .dt-hl-select-all-label { font-size: 11px; }
  .dt-hl-selected-count { font-size: 10px; }
  .dt-complete-btn { width: 100%; text-align: center; font-size: 12px; padding: 10px 16px; }
  .dt-complete-sub { font-size: 10px; }
  .dt-hl-note { font-size: 11px; padding: 7px 10px; }
  .dt-hl-contacts { gap: 4px; }
  .dt-hl-contact { font-size: 10px; padding: 2px 6px; }
  .dt-hl-reveal-btn { font-size: 11px; padding: 7px 14px; }
  .dt-hl-privacy-note { font-size: 10px; }
  .dt-hl-empty { font-size: 11px; padding: 10px; }

  /* 感谢名单 */
  .dt-hl-title-thanks { font-size: 13px !important; padding: 8px 12px; }
  .dt-hl-thanks-item { padding: 8px 12px; }
  .dt-hl-thanks-check { width: 20px; height: 20px; font-size: 10px; }
  .dt-hl-thanks-name { font-size: 12px; }
  .dt-hl-thanks-time { font-size: 9px; }

  /* 留言区 */
  .dt-comments { margin-top: 14px; padding-top: 12px; }
  .dt-cm-title { font-size: 13px; }
  .dt-cm-count { font-size: 10px; }
  .dt-comment { padding: 10px 12px; gap: 8px; }
  .dt-cm-avatar, .dt-cm-avatar-fb { width: 26px; height: 26px; }
  .dt-cm-name { font-size: 12px; }
  .dt-cm-time { font-size: 9px; }
  .dt-cm-body { font-size: 12.5px; }
  .dt-cm-tag { font-size: 8px; padding: 1px 5px; }

  /* 留言表单 */
  .dt-cm-form-wrap { padding: 10px 12px; }
  .dt-cm-form { flex-direction: column; gap: 8px; }
  .dt-cm-form textarea { min-height: 44px; font-size: 12px; padding: 8px 10px; }
  .dt-cm-form-right {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }
  .dt-cm-form button { padding: 8px 18px; font-size: 12px; }
  .dt-cm-char-count { font-size: 9px; }
  .dt-cm-login { font-size: 12px; padding: 12px; }
  .dt-cm-closed { font-size: 12px; padding: 10px; }
  .dt-cm-empty { padding: 20px; }
  .dt-cm-empty-text { font-size: 12px; }
  .dt-cm-empty-sub { font-size: 10px; }

  /* 帮助Ta 弹窗 */
  .offer-nickname-display { font-size: 13px; padding: 8px 12px; }
  .save-warn { padding: 10px 12px; }
  .save-warn ul { font-size: 11px; }

  /* 认证弹窗 */
  .verify-status-wrap { padding: 16px; }
  .verify-status-icon { font-size: 40px; }
  .verify-status-title { font-size: 16px; }
  .verify-status-desc { font-size: 12px; }
  .verify-status-note { font-size: 11px; padding: 10px; }
}

/* ── 超小屏 (≤ 360px) ── */
@media (max-width: 360px) {
  .aid-card { padding: 14px; }
  .aid-card h3 { font-size: 15px; }
  .ac-actions { gap: 4px; }
  .ac-cheer, .ac-comment { padding: 5px 10px; }
  .ac-offer-count { padding: 5px 10px; font-size: 10px; }
  .help-actions .help-verify-btn,
  .help-actions .help-apply-btn {
    font-size: 12px;
    padding: 9px 10px;
  }
  .subpage-h h1 .zh { font-size: clamp(24px, 7vw, 32px); }
  .subpage-crumbs { font-size: 10px; }
  .dt-title { font-size: 16px; }
}

/* ── iOS 安全区域适配 ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  /* 移动端底部弹出弹窗 — 留出 Home Indicator 空间 */
  @media (max-width: 768px) {
    .modal-dialog {
      padding-bottom: var(--safe-bottom);
      border-radius: 16px 16px 0 0;
    }
    .modal-body {
      padding-bottom: calc(14px + var(--safe-bottom));
    }
    .modal-header {
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }
    .form-submit {
      margin-bottom: var(--safe-bottom);
    }
    /* 底部固定操作区（如果将来有） */
    .dt-cm-form-wrap {
      margin-bottom: var(--safe-bottom);
    }
  }

  /* 横屏时左右安全区域 */
  @media (max-width: 1024px) and (orientation: landscape) {
    .modal-dialog {
      padding-left: var(--safe-left);
      padding-right: var(--safe-right);
    }
  }

  /* 页面级底部安全区 */
  .help-process-section {
    padding-bottom: calc(50px + var(--safe-bottom));
  }
}