:root {
  --brand: #4d6bfe;
  --brand-strong: #3a55e8;
  --aqua: #35c9e6;
  --ink: #10243d;
  --ink-2: #3c5c82;
  --mute: #7d96b4;
  --line: #dfeaf6;
  --card: #ffffff;
  --bg-a: #eef4fd;
  --bg-b: #ffffff;
  --r-card: 20px;
  --r-btn: 14px;
  --shadow: 0 10px 30px rgba(24, 60, 120, .10);
  --shadow-sm: 0 4px 14px rgba(24, 60, 120, .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 12% -10%, #e4f1ff 0%, transparent 60%),
    radial-gradient(900px 480px at 96% 4%, #eaf6ff 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-a), var(--bg-b) 42%);
  -webkit-text-size-adjust: 100%;
}

.wrap {
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

/* ---------- 顶栏 ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .8);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s var(--ease), background .18s var(--ease);
}

.back:hover { background: #fff; transform: translateY(-1px); }
.back:active { transform: translateY(0); }

.top-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: .04em;
}

/* ---------- 主卡 ---------- */
.ask {
  position: relative;
  border-radius: 26px;
  padding: 22px 20px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 251, 255, .99));
  box-shadow: var(--shadow);
  border: 1px solid rgba(223, 234, 246, .9);
  overflow: hidden;
}

.ask::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 260px;
  background: radial-gradient(closest-side, rgba(77, 107, 254, .14), transparent 72%);
  pointer-events: none;
}

.ask > * { position: relative; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(77, 107, 254, .10);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 立绘是 gpt-image 出的白底图，靠 multiply 让白底融进浅色卡片，
   比抠透明边干净（抠图会在发丝处留下硬边）。 */
.mascot {
  display: block;
  width: min(250px, 66%);
  margin: 6px auto -6px;
  mix-blend-mode: normal;
}

h1 {
  margin: 10px 0 8px;
  font-size: 25px;
  line-height: 1.32;
  letter-spacing: -.01em;
  text-align: center;
  font-weight: 800;
}

.lead {
  margin: 0 auto;
  max-width: 30em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}

.lead em {
  font-style: normal;
  color: var(--brand-strong);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 62%, rgba(77, 107, 254, .16) 62%);
}

/* ---------- 收款码 ---------- */
.pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.pay-card {
  border-radius: var(--r-card);
  padding: 12px 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* v2.44.21：收款码改成 canvas 现场画，尺寸规则要从 img 复制一份过来，
   否则 canvas 会按 1400x1400 的属性尺寸铺开，手机上直接撑爆屏幕 */
.pay-card canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
}

.pay-card img {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: #fff;
}

.pay-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
}

.pay-name i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pay-name.alipay i { background: #1677ff; }
.pay-name.wechat i { background: #07c160; }

.pay-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mute);
  text-align: center;
}

/* ---------- 说明 ---------- */
.note {
  margin-top: 16px;
  border-radius: var(--r-card);
  padding: 15px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 250, 255, .94));
  border: 1px solid var(--line);
}

.note h2 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.note ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
}

.note li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua);
}

/* ---------- 榜单 ---------- */
.board {
  margin-top: 16px;
  border-radius: var(--r-card);
  padding: 15px 16px 6px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.board-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
}

.board-head span {
  font-size: 11.5px;
  color: #5d7590;
}

.board-empty {
  margin: 14px 0 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--mute);
  text-align: center;
}

.donor {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.donor:first-of-type { border-top: 0; }

.donor-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(53, 201, 230, .16) center/cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-strong);
}

.donor-body { min-width: 0; }

.donor-name {
  font-size: 13px;
  font-weight: 700;
}

.donor-msg {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  word-break: break-word;
}

/* ---------- 页脚 ---------- */
.foot {
  margin-top: 20px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--mute);
}

@media (max-width: 380px) {
  h1 { font-size: 22px; }
  .mascot { width: 82%; }
  .pay { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== 留言表单（v2.44.4 · 榜单方案 B） ===== */
.donor-form{margin:0 0 16px;padding:14px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid rgba(77,107,254,.14);box-shadow:0 8px 22px rgba(31,63,120,.07)}
.df-row{display:flex;gap:8px;margin-bottom:8px}
.df-row input{flex:1 1 0;min-width:0}
.donor-form input,.donor-form textarea{width:100%;font:inherit;font-size:13px;color:#10243d;background:#f6f9ff;border:1px solid rgba(77,107,254,.16);border-radius:11px;padding:9px 11px;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}
.donor-form textarea{resize:vertical;line-height:1.6;min-height:70px;margin-bottom:8px}
.donor-form input:focus,.donor-form textarea:focus{background:#fff;border-color:rgba(77,107,254,.5);box-shadow:0 0 0 3px rgba(77,107,254,.13)}
.donor-form button{width:100%;margin-top:10px;border:0;border-radius:12px;padding:11px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#5b76ff,#3a55e8);box-shadow:0 9px 20px rgba(63,92,240,.24)}
.donor-form button[disabled]{opacity:.6}
.df-msg{margin-top:9px;font-size:12px;color:#7d96b4;text-align:center;min-height:16px}
/* 表单栅格修正：两列等宽、不溢出 */
.donor-form{margin-top:12px}
.df-row{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.df-row input{width:100%;min-width:0}
.board-empty{margin-top:14px}
@media (max-width:360px){ .df-row{grid-template-columns:1fr} }

/* ===== v2.44.13 打赏截图凭证 ===== */
.proof{margin:2px 0 8px}
.proof-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:#3c5c82;margin:0 2px 6px}
.proof-head b{color:#d33b37;font-weight:700}
.proof-head>span:first-child{white-space:nowrap}
.proof-hint{flex:0 1 auto;min-width:0;text-align:right;font-size:11px;color:#5d7590}
.proof-box{position:relative;border-radius:14px;border:1px dashed rgba(77,107,254,.32);background:#f6f9ff;min-height:96px;display:grid;place-items:center;overflow:hidden;padding:8px}
.proof-box img{max-width:100%;max-height:220px;border-radius:10px;display:block}
/* [hidden] 是 UA 样式，会被上面的 display:block 盖掉，这里单独压回来 */
.proof-box img[hidden]{display:none!important}
.proof-empty{font-size:12.5px;color:#526d88;text-align:center;line-height:1.7;padding:10px 4px}
.proof-actions{display:flex;gap:8px;margin-top:8px}
/* 压过 .donor-form button 那条全宽主按钮样式 */
.donor-form .proof-actions button{width:auto;flex:1 1 0;margin-top:0;padding:9px;font-size:13px;font-weight:700;color:#3a55e8;background:#eef2ff;box-shadow:none;border:1px solid rgba(77,107,254,.2)}
.donor-form .proof-actions button:hover{background:#e3e9ff}
/* ===== v2.44.15 赞助留言榜（要显眼） ===== */
.honor{
  margin:18px 0 4px;padding:14px 14px 10px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff9ec 0%,#fff3d6 55%,#ffe9b8 100%);
  border:1px solid rgba(214,158,46,.35);
  box-shadow:0 14px 30px -14px rgba(196,138,26,.45),inset 0 1px 0 rgba(255,255,255,.85);
}
.honor::after{content:"";position:absolute;top:-40%;right:-60%;width:220px;height:220px;background:radial-gradient(circle,rgba(255,214,102,.55),transparent 70%);pointer-events:none}
.honor-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;position:relative;z-index:1}
.honor-head h2{margin:0;font-size:16px;font-weight:800;color:#8a5a12;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.honor-crown{font-size:18px;filter:drop-shadow(0 2px 3px rgba(160,110,10,.35))}
.honor-sub{font-size:11px;color:#a98230}
.honor-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.honor-item{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(214,158,46,.18)}
.honor-item.rank-1{background:linear-gradient(90deg,rgba(255,238,178,.95),rgba(255,255,255,.86));border-color:rgba(224,168,40,.55);box-shadow:0 6px 16px -8px rgba(200,140,20,.6)}
.honor-item.rank-2{background:linear-gradient(90deg,rgba(240,244,250,.95),rgba(255,255,255,.86))}
.honor-item.rank-3{background:linear-gradient(90deg,rgba(252,238,226,.95),rgba(255,255,255,.86))}
.honor-medal{font-size:17px;text-align:center}
.honor-name{font-size:13.5px;font-weight:700;color:#6a4a12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.honor-amount{font-size:15px;font-weight:800;color:#c8860d;font-family:ui-monospace,Menlo,Consolas,monospace}
.honor-item.rank-1 .honor-amount{font-size:17px;color:#b9740a}
.honor-msg{grid-column:2 / -1;margin:2px 0 0;font-size:12px;color:#8a6f3a;line-height:1.5}
.honor-foot{margin:9px 0 0;text-align:center;font-size:11px;color:#a98230}

/* ===== v2.44.15 我的留言状态 ===== */
.mine{margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:#f2f7ff;border:1px solid rgba(77,107,254,.18)}
.mine-head{font-size:13px;font-weight:700;color:#2f4a86;margin-bottom:8px}
.mine-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px dashed rgba(77,107,254,.16)}
.mine-item:first-child{border-top:0}
.mine-badge{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.st-pending{color:#8a6a12;background:#fdf0cd}
.st-ok{color:#1a6b3a;background:#d8f3e2}
.st-no{color:#8a3344;background:#fbdde3}
.mine-msg{font-size:12.5px;color:#3d5a86;line-height:1.5;word-break:break-word}
/* ===== v2.44.15：榜单本周/总榜切换 + 作者回复 + 空榜提示 ===== */
.honor-tabs { display: flex; gap: 6px; margin: 2px 0 10px; }
.honor-tab {
  font: inherit; font-size: 12.5px; padding: 5px 13px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(214, 158, 46, .35);
  background: rgba(255, 255, 255, .72); color: #8a5a12;
  transition: background .18s, color .18s, box-shadow .18s;
}
.honor-tab.on {
  background: linear-gradient(120deg, #f0b23e, #e08a1e);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(196, 138, 26, .7);
}
.honor-empty { padding: 16px 4px; font-size: 12.5px; color: #8a5a12; text-align: center; }
.donor-reply {
  margin-top: 7px; padding: 8px 11px; border-radius: 10px;
  background: #eef4ff; border-left: 3px solid #4d93e8;
  font-size: 13px; line-height: 1.65; color: #2c4f7c;
}
.donor-reply-tag { display: block; font-size: 11.5px; font-weight: 700; color: #3a55e8; margin-bottom: 3px; }

/* v2.44.20：Turnstile 人机验证容器，没配密钥时这个 div 是 hidden 的 */
.ts-box{display:flex;justify-content:center;margin:4px 0 10px;min-height:0}
.ts-box[hidden]{display:none!important}

/* v2.44.21：非官方签名时把收款码藏起来，免得有人改包换成自己的码 */
.pay-card.tampered img,\n.pay-card.tampered canvas { display: none !important; }
.pay-card.tampered { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.pay-card .qr-warn { display: none; text-align: center; padding: 14px 12px; }
.pay-card.tampered .qr-warn { display: block; }
.pay-card .qr-warn b { display: block; font-size: 13.5px; color: #c0392b; margin-bottom: 6px; }
.pay-card .qr-warn span { display: block; font-size: 12px; line-height: 1.6; color: #7089a3; }

/* v2.44.21：二维码核验状态 */
.qr-trust{margin-top:6px;font-size:12px;line-height:1.5;text-align:center;letter-spacing:.01em}
.qr-trust.ok{color:#12855f}
.qr-trust.bad{color:#c0392b;font-weight:600}
/* v2.44.21：看板娘换成带 alpha 的 webp，白底不再靠 multiply 融进卡片。
   深色模式下 multiply 会把整张图乘成黑的，这里显式关掉，两种模式都按原图画。 */


/* v2.44.21：官网不提供留言，只显示这个提示；App 内不显示 */
.web-tip {
  margin-top: 18px;
  padding: 20px 18px;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 250, 255, .96));
  border: 1px solid var(--line);
  text-align: center;
}
.web-tip-ico { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.web-tip h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.web-tip p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.web-tip b { color: var(--brand-strong); }

@media (prefers-color-scheme: dark) {
  html.dq-web .web-tip { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); }
}


/* ============================================================
   v2.44.21 官网桌面版
   手机（App 内）保持原单列：.col-left / .col-right 用 display:contents 透明掉
   宽屏：两栏加在 .ask 上（.ask 才是包住左栏右栏的容器），左栏 sticky
   ============================================================ */
.col-left,
.col-right { display: contents; }

@media (min-width: 900px) {
  body {
    background:
      radial-gradient(1400px 680px at 6% -14%, #e3f1ff 0%, transparent 56%),
      radial-gradient(1200px 560px at 99% 0%, #eef9ff 0%, transparent 58%),
      linear-gradient(180deg, #eef4fd, #ffffff 44%);
  }

  .wrap {
    width: min(1200px, calc(100% - 96px));
    padding: 26px 0 56px;
  }

  .top {
    padding: 0 0 18px;
    border-bottom: 1px solid var(--line);
  }

  /* —— 两栏落在 .ask 上：flex-wrap + foot 独占一行 —— */
  .ask {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 68px;
    padding-top: 32px;
  }
  .col-left {
    display: block;
    flex: 0 0 440px;
    width: 440px;
    position: sticky;
    top: 34px;
  }
  .col-right {
    display: block;
    flex: 1 1 0;
    min-width: 0;
  }
  .ask > .foot {
    flex: 0 0 100%;
    margin-top: 46px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  /* 左栏：文字在前、看板娘在后 */
  .col-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .col-left .kicker { order: 0; font-size: 12.5px; }
  .col-left h1 {
    order: 1;
    margin: 14px 0 16px;
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: -1.2px;
  }
  .col-left .lead {
    order: 2;
    margin: 0;
    font-size: 15px;
    line-height: 2;
    text-align: left;
    max-width: 26em;
    color: #4a6480;
  }
  .col-left .mascot {
    order: 3;
    width: min(352px, 100%);
    margin: 22px 0 0;
    align-self: center;
    filter: drop-shadow(0 18px 34px rgba(20, 78, 168, .16));
  }

  /* 右栏：加一句引导，让二维码不突兀 */
  .col-right::before {
    content: '扫一扫，给鲸鱼娘添一碗饭';
    display: block;
    margin-bottom: 16px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: #0e2238;
  }

  /* 氛围：卡片内叠加多层柔光，避免大片死白 */
  .wrap {
    position: relative;
    background:
      radial-gradient(760px 440px at 6% -4%, rgba(186, 224, 255, .58), transparent 62%),
      radial-gradient(700px 430px at 97% 6%, rgba(203, 240, 255, .52), transparent 60%),
      radial-gradient(980px 540px at 52% 106%, rgba(212, 238, 255, .5), transparent 66%),
      linear-gradient(180deg, #ffffff, #fbfdff 58%, #f6fbff);
    box-shadow:
      0 1px 0 rgba(14, 34, 56, .03),
      0 34px 92px -34px rgba(20, 78, 168, .22);
  }

  /* 收款码卡片：浅蓝玻璃 */
  .col-right .pay-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .92));
    border: 1px solid rgba(190, 216, 240, .85);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 18px 36px -22px rgba(20, 78, 168, .28);
  }

  /* 说明卡：更轻的底 */
  .col-right .note,
  .col-right .web-tip {
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(247, 252, 255, .9));
    border: 1px solid rgba(198, 222, 244, .8);
  }

  /* 右栏：收款码 */
  .col-right .pay {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 236px));
    gap: 18px;
    justify-content: start;
  }
  .col-right .pay-card { padding: 16px 16px 18px; border-radius: 18px; }
  .col-right .pay-hint { margin: 16px 2px 0; text-align: left; }

  .col-right .note { margin-top: 22px; padding: 22px 24px; }
  .col-right .note h2 { font-size: 15px; }
  .col-right .note ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
  }
  .col-right .note li {
    padding: 16px 15px;
    border-radius: 14px;
    background: rgba(244, 250, 255, .92);
    border: 1px solid var(--line);
    line-height: 1.8;
  }

  .col-right .web-tip {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 18px;
    text-align: left;
    padding: 22px 24px;
    align-items: center;
    margin-top: 22px;
  }
  .col-right .web-tip-ico { font-size: 30px; margin: 0; grid-row: 1 / span 2; }
  .col-right .web-tip h2 { margin: 0; font-size: 15.5px; }
  .col-right .web-tip p { margin: 0; }

  .col-right .honor,
  .col-right .mine,
  .col-right .board { margin-top: 22px; }
}

/* ===== v2.44.22：完整深色主题 =====
   目的有两个：
   1. 手机上开「强制深色网页」时浏览器会跳过本页（页面已声明支持深色），不会再把人像反色成黑白斑块；
   2. 系统深色模式下整页是深底，白底卡片和白裙子不再糊成一片。 */
/* v2.44.26：深色主题只给「手机浏览器网页版」用。
   App 内是 file:// 加载，加不上 html.dq-web，所以 App 保持原来的亮色皮肤。 */
@media (prefers-color-scheme: dark) {
  html.dq-web {
    color-scheme: dark;
    --ink: #e9f2fe;
    --ink-2: #b7cae2;
    --mute: #8fa7c5;
    --line: rgba(126, 165, 220, .22);
    --card: #101d31;
    --bg-a: #08111f;
    --bg-b: #0b1627;
    --shadow: 0 12px 34px rgba(0, 0, 0, .52);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, .42);
  }

  html.dq-web body {
    background:
      radial-gradient(1100px 520px at 12% -10%, #0e2444 0%, transparent 60%),
      radial-gradient(900px 480px at 96% 4%, #0b1e38 0%, transparent 62%),
      linear-gradient(180deg, var(--bg-a), var(--bg-b) 42%);
  }

  html.dq-web .mascot {
    mix-blend-mode: normal;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
  }

  html.dq-web .ask,
  html.dq-web .back,
  html.dq-web .pay-card,
  html.dq-web .note,
  html.dq-web .web-tip,
  html.dq-web .honor,
  html.dq-web .board,
  html.dq-web .visit,
  html.dq-web .mine,
  html.dq-web .donor-form input,
  html.dq-web .donor-form textarea,
  html.dq-web .board-item,
  html.dq-web .honor-row {
    background: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--ink);
  }
  html.dq-web .back:hover { background: #16253c !important; }
  html.dq-web .donor-form input:focus,
  html.dq-web .donor-form textarea:focus {
    background: #16253c !important;
    border-color: rgba(110, 150, 255, .55) !important;
  }
  html.dq-web .donor-form input::placeholder,
  html.dq-web .donor-form textarea::placeholder { color: #6f88a8; }

  html.dq-web .honor { background: linear-gradient(180deg, #1a2436 0%, #172233 55%, #141e2e 100%) !important; }
  html.dq-web .honor-row { background: rgba(255, 255, 255, .045) !important; }
  html.dq-web .honor-row:first-child { background: linear-gradient(180deg, rgba(255, 205, 120, .16), rgba(255, 190, 90, .07)) !important; }

  /* 二维码纸片保持白，否则相机扫不出来 */
  html.dq-web .pay-card canvas,
  html.dq-web .pay-card img { background: #fff; border-radius: 10px; padding: 6px; }

  html.dq-web .ask::before {
    background: radial-gradient(closest-side, rgba(90, 140, 255, .18), transparent 72%);
  }

  html.dq-web .mascot-cap { color: var(--mute); }
  html.dq-web .foot { color: var(--mute); }
}


/* ===== dq-web: 手机浏览器专属强调（App 内不生效） ===== */
@media (max-width:899px){
  /* 手机浏览器（非 App）：把打赏区做成页面上最抢眼的东西 */
  html.dq-web .pay{
    gap:14px;
    padding:14px 14px 12px;
    border-radius:22px;
    background:linear-gradient(168deg,#fffdf7 0%,#fff6e6 58%,#ffefd6 100%);
    border:1.5px solid rgba(214,158,46,.5);
    box-shadow:0 18px 40px -18px rgba(214,158,46,.55),0 0 0 5px rgba(255,248,232,.85);
  }
  html.dq-web .pay-card{
    padding:10px 10px 0;
    background:#fff;
    border:1px solid rgba(214,158,46,.28);
    border-radius:16px;
    box-shadow:0 8px 20px -12px rgba(180,120,20,.5);
  }
  html.dq-web .pay-card canvas{ border-radius:10px; display:block; }
  html.dq-web .pay-name{
    font-size:14.5px;font-weight:800;letter-spacing:.02em;
    padding:9px 0 11px;
  }
  html.dq-web .pay-name.alipay{ color:#1668c9 }
  html.dq-web .pay-name.wechat{ color:#12855f }
  html.dq-web .pay-hint{
    color:#8a5a12;font-weight:700;font-size:13.5px;line-height:1.75;
    margin-top:12px;
  }
  html.dq-web .pay-hint::first-line{ color:#6d4508 }

  /* dq-web-cta: 打赏区顶部召唤语（只手机浏览器） */
  html.dq-web .pay::before{
    content:"扫一下，请鲸鱼娘吃顿饱饭";
    grid-column:1 / -1;
    order:-1;
    text-align:center;
    font-weight:800;
    font-size:14.5px;
    letter-spacing:.02em;
    color:#8a5a12;
    padding:0 0 4px;
  }
}

/* ===== v2.44.26：手机网页版打赏入口强化（App 内全隐藏） ===== */
.pay-cta { display: none; }

html.dq-web .pay-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 20px;
  padding: 17px 22px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #5a3403;
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid rgba(214, 158, 46, .75);
  background: linear-gradient(180deg, #ffe9b8 0%, #ffd479 46%, #ffc44d 100%);
  box-shadow:
    0 10px 26px rgba(228, 160, 30, .34),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: payCtaPulse 2.4s ease-in-out infinite;
}
html.dq-web .pay-cta:active { transform: translateY(1px) scale(.995); }

@keyframes payCtaPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(228,160,30,.34), inset 0 1px 0 rgba(255,255,255,.7); }
  50%      { box-shadow: 0 14px 34px rgba(228,160,30,.55), inset 0 1px 0 rgba(255,255,255,.7); }
}

/* 网页版二维码区再抬一档存在感 */
html.dq-web .pay {
  border: 1px solid rgba(214, 158, 46, .55) !important;
  box-shadow: 0 14px 34px rgba(228, 160, 30, .22), 0 0 0 4px rgba(255, 214, 130, .18);
}

@media (prefers-reduced-motion: reduce) {
  html.dq-web .pay-cta { animation: none; }
}

@media (prefers-color-scheme: dark) {
  html.dq-web .pay-cta {
    color: #fff6e0;
    border-color: rgba(255, 205, 120, .7);
    background: linear-gradient(180deg, #c9861d 0%, #a8681a 55%, #8a5314 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 160, .35);
  }
}