/* ===== 打赏页面 /dashang ===== */
/* 设计方向：不同底色区分层级，不用下划线，视觉主次分明 */

.page-donate { background: var(--bg-primary); min-height: 100vh; }

/* ---- 主容器 ---- */
.donate-main {
  max-width: 920px; margin: 0 auto; padding: 40px 20px 80px;
}

/* ---- 两列布局 ---- */
.donate-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start;
}

/* ---- 卡片通用 ---- */
.donate-card {
  background: var(--bg-card); border-radius: 16px; padding: 28px;
}

/* ---- 右列卡片堆叠 ---- */
.donate-stats-col {
  display: flex; flex-direction: column; gap: 20px;
}

/* ---- 标题 ---- */
.donate-title {
  font-size: 1.35rem; font-weight: 700; text-align: center;
  margin-bottom: 28px; color: var(--text-primary);
}

/* ---- 区块 ---- */
.donate-section { margin-bottom: 28px; }
.donate-section:last-child { margin-bottom: 0; }
.donate-label {
  font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ===== 金额按钮 ===== */
.donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.donate-amount-btn {
  padding: 14px 0; border: 1px solid var(--uc-divider); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-primary);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.donate-amount-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.donate-amount-btn.active {
  border-color: var(--accent);
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb, 72 107 175), 0.3);
}
/* 确认动画：提交前选中的金额按钮短暂脉动 */
@keyframes donate-confirm {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  65% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.donate-amount-btn.confirming {
  animation: donate-confirm 0.35s ease;
}
.donate-pay-btn:active {
  transform: scale(0.97);
}
.donate-amount-custom { font-size: 0.85rem; font-weight: 500; }

/* ---- 自定义金额 ---- */
.donate-custom {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
}
.donate-input {
  flex: 1; border: 1px solid var(--uc-divider); border-radius: 8px;
  padding: 10px 14px; background: var(--bg-primary);
  color: var(--text-primary); font-size: 0.9rem; outline: none;
  transition: border-color 0.15s;
}
.donate-input:focus { border-color: var(--accent); }
.donate-input::placeholder { color: var(--text-muted); }
.donate-input-unit { font-size: 0.82rem; color: var(--text-muted); }

/* ===== 支付方式 ===== */
.donate-paytypes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.donate-pay-btn {
  padding: 14px 0; border: 1px solid var(--uc-divider); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-primary);
  font-size: 0.9rem; font-weight: 500; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.donate-pay-btn i { margin-right: 5px; font-size: 1rem; }
.donate-pay-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.donate-pay-btn.active {
  border-color: var(--accent);
  background: var(--accent); color: #fff; font-weight: 600;
}
.donate-pay-btn--single {
  padding: 14px 0; font-size: 1rem; font-weight: 600;
}



/* 错误提示 */
.donate-err {
  margin-top: 10px; padding: 10px 14px;
  background: rgba(239,68,68,0.08); border-radius: 8px;
  color: #f87171; font-size: 0.82rem; text-align: center;
}

/* ===== 二维码 ===== */
.donate-qr-block { text-align: center; padding: 16px 0 10px; }
#donateQrCode {
  display: flex; justify-content: center; align-items: center;
  min-height: 200px;
}
.qr-card {
  background: #fff; border-radius: 10px; padding: 14px;
  display: inline-flex;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.qr-loading {
  padding: 50px 30px; text-align: center;
  color: var(--text-muted); font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#donateQrCode iframe { display: block; margin: 0 auto; }

.donate-qr-tip {
  margin-top: 14px; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: 20px;
}
.donate-qr-tip-wechat {
  color: #07C160; background: rgba(7,193,96,0.08);
}
.donate-qr-tip-alipay {
  color: #1677FF; background: rgba(22,119,255,0.08);
}
.donate-qr-tip-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}
.donate-qr-tip-wechat .donate-qr-tip-dot { background: #07C160; }
.donate-qr-tip-alipay .donate-qr-tip-dot { background: #1677FF; }
.donate-qr-cancel {
  display: block; margin: 16px auto 0; padding: 8px 20px;
  border: 1px solid var(--uc-divider); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}
.donate-qr-cancel:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== 支付成功 ===== */
.donate-success { text-align: center; padding: 16px 0 6px; }
.donate-success-title {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 18px;
}

/* ===== 留言 ===== */
.donate-message-collapse { margin-top: 14px; }
.donate-message-toggle {
  padding: 5px 16px; border: none; border-radius: 20px;
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}
.donate-message-toggle:hover { background: var(--bg-hover); color: var(--accent); }
.donate-message-inputs {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; text-align: left;
}
.donate-message-actions { display: flex; gap: 8px; justify-content: flex-end; }
.donate-btn-save {
  padding: 7px 18px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 0.82rem; cursor: pointer;
}
.donate-btn-save:hover { opacity: 0.85; }
.donate-textarea {
  padding: 10px 14px; border: 1px solid var(--uc-divider); border-radius: 8px;
  background: var(--bg-primary); color: var(--text-primary);
  font-size: 0.82rem; resize: none; height: 56px; outline: none;
  transition: border-color 0.15s;
}
.donate-textarea:focus { border-color: var(--accent); }
.donate-msg-hint {
  font-size: 0.7rem; color: var(--text-dim);
  text-align: center; margin-top: 4px;
}
.donate-nickname-display {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.88rem; color: var(--text-primary);
}
.donate-nickname-display i { color: var(--accent); font-size: 0.82rem; }

/* ===== 支持者榜单 ===== */
.donate-leaderboard { display: flex; flex-direction: column; gap: 4px; }
.donate-rank-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px;
}
.donate-rank-item:nth-child(1) {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
}
.donate-rank-item:nth-child(2) {
  background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(192,192,192,0.01));
}
.donate-rank-item:nth-child(3) {
  background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(205,127,50,0.01));
}
.donate-rank-item:nth-child(n+4) { background: var(--uc-item); }
.donate-rank-num {
  width: 24px; text-align: center; font-size: 0.85rem; flex-shrink: 0; font-weight: 600;
}
.donate-rank-item:nth-child(1) .donate-rank-num { color: #f59e0b; }
.donate-rank-item:nth-child(2) .donate-rank-num { color: #94a3b8; }
.donate-rank-item:nth-child(3) .donate-rank-num { color: #d97706; }
.donate-rank-item:nth-child(n+4) .donate-rank-num { color: var(--text-dim); }
.donate-rank-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.donate-rank-avatar--empty {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-surface); color: var(--text-dim); font-size: 0.7rem;
}
.donate-rank-name {
  flex: 1; font-size: 0.88rem; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donate-rank-amount {
  font-size: 0.8rem; color: var(--accent); font-weight: 600; flex-shrink: 0;
}

/* ===== 最近支持 ===== */
.donate-recent { display: flex; flex-direction: column; gap: 5px; }
.donate-recent-item {
  display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px;
  background: var(--uc-item); align-items: center;
}
.donate-recent-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0;
}
.donate-recent-avatar--empty {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-surface); color: var(--text-dim); font-size: 0.72rem;
}
.donate-recent-body { flex: 1; min-width: 0; }
.donate-recent-top {
  display: flex; align-items: center; gap: 4px;
}
.donate-recent-city {
  color: var(--text-muted); font-size: 0.76rem;
}
.donate-recent-name {
  color: var(--text-primary); font-weight: 600; font-size: 0.82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
}
.donate-recent-action { color: var(--text-muted); font-size: 0.78rem; }
.donate-recent-amount {
  color: var(--accent); font-weight: 600; font-size: 0.8rem; margin-left: auto;
  white-space: nowrap; flex-shrink: 0;
}
.donate-recent-msg {
  font-size: 0.76rem; color: var(--text-dim);
  margin-top: 2px; line-height: 1.45;
}
.donate-empty {
  text-align: center; padding: 28px 0;
  font-size: 0.82rem; color: var(--text-muted);
}

/* ===== 移动端 ===== */
@media (max-width: 767px) {
  .donate-main { padding: 16px 12px 50px; }
  .donate-layout { grid-template-columns: 1fr; gap: 14px; }
  .donate-card { padding: 20px 18px; }
  .donate-title { font-size: 1.2rem; margin-bottom: 22px; }
  .donate-amounts { gap: 8px; }
  .donate-amount-btn { padding: 12px 0; font-size: 0.95rem; }
  .donate-pay-btn { padding: 12px 0; font-size: 0.88rem; }
}

/* ===== 用户中心打赏记录 ===== */
.donate-user-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--bg-card); border-radius: 10px; margin-bottom: 14px;
}
.donate-user-total { flex: 1; }
.donate-user-total-num { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.donate-user-total-label { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.donate-user-count { text-align: right; }
.donate-user-count-num { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.donate-user-count-label { font-size: 0.76rem; color: var(--text-muted); }

/* ===== 文章底部工具行（移动端：左打赏药丸 + 右收藏/复制链接，左右分开） ===== */
.article-bottom-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0;
}
.article-bottom-tools .article-actions {
  margin: 0;
  flex: 1;
  justify-content: flex-end;
}
/* 移动端药丸打赏按钮：默认隐藏（PC 侧边栏已有入口，文章底部不重复显示）
   与 PC 侧边栏同风格（淡绿底+绿字），融入页面仅稍作突出 */
.donate-pill-mobile {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.donate-pill-mobile:hover { color: var(--accent-hover); background: var(--accent-bg-hover); }
.donate-pill-mobile:active { opacity: 0.8; }

@media (max-width: 767px) {
  .article-bottom-tools { margin: 16px 0; }
  .donate-pill-mobile { display: inline-flex; }
}