/* manfa.xyz /redeem 视觉优化 v1 — 2026-08-24
 * 注入方式: nginx sub_filter，回退删除注入行即可。
 * 原则: 只动 redeem 相关 class，不碰颜色主题（深浅模式由应用自己管）。 */

/* 1. 主按钮: 全宽、加高，从"孤立小胶囊"变成明确的行动点 */
.redeem-main .redeem-btn {
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.redeem-main .redeem-btn:not(:disabled) {
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.redeem-main .redeem-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgb(0 0 0 / .22);
}
.redeem-main .redeem-btn:not(:disabled):active {
  transform: translateY(0);
}

/* 2. 删除表单下方的装饰块 (SIMPLE. SECURE. SEAMLESS. 一整段)，卡片更聚焦 */
.redeem-main > .mt-12.text-center {
  display: none;
}

/* 3. 精简装饰性英文 eyebrow（SELF-SERVICE ACTIVATION / Step 01 / Redeem tips） */
.redeem-banner .theme-eyebrow,
.redeem-main .theme-eyebrow,
.redeem-aside .theme-eyebrow {
  display: none;
}

/* 4. hero 黑块压扁一点，把首屏空间让给表单 */
.redeem-banner {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* 5. 卡密输入框: 更明显的聚焦态 + 稍微加高 */
.redeem-input-wrap {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.redeem-input-wrap:focus-within {
  border-color: rgb(29 29 31 / .85);
  box-shadow: 0 0 0 3px rgb(29 29 31 / .10);
}
html.dark .redeem-input-wrap:focus-within,
[data-theme="dark"] .redeem-input-wrap:focus-within {
  border-color: rgb(255 255 255 / .75);
  box-shadow: 0 0 0 3px rgb(255 255 255 / .14);
}
.redeem-input {
  font-size: 15px;
}

/* ===== /guide 教程页 ===== */

/* 7. 步骤截图瘦身: 原图 w-full 撑满内容区(最高一张 1381px)，
 * 限宽 760px 居中 + 高度封顶，不裁切，点击放大不受影响 */
.warranty-block img {
  width: auto;
  max-width: min(760px, 100%);
  max-height: 520px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 8. 可放大的图片给出 zoom-in 光标提示（lightbox 由 redeem-polish.js 实现） */
main img[src^="/uploads/"]:not(a img) {
  cursor: zoom-in;
}

/* 6. 侧栏最容易卡住用户的第 2 条（获取登录态）高亮出来 */
.redeem-aside ol > li:nth-child(2) {
  background: rgb(0 0 0 / .045);
  border: 1px solid rgb(0 0 0 / .07);
  border-radius: 14px;
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
}
html.dark .redeem-aside ol > li:nth-child(2),
[data-theme="dark"] .redeem-aside ol > li:nth-child(2) {
  background: rgb(255 255 255 / .06);
  border-color: rgb(255 255 255 / .10);
}

/* ===== 2026-08-25 redesign 审计修复 ===== */

/* 9. 键盘焦点环(无障碍): 原样式 outline:none 导致键盘用户看不到焦点 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(29 29 31 / .65) !important;
  outline-offset: 2px;
}
html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark input:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible {
  outline-color: rgb(245 245 247 / .7) !important;
}

/* 10. hero 环境光晕: 给纯平背景一点深度,保持克制 */
main {
  background-image: radial-gradient(1100px 560px at 82% -8%, rgb(255 255 255 / .85), transparent 62%);
  background-repeat: no-repeat;
}
html.dark main,
[data-theme="dark"] main {
  background-image: radial-gradient(1100px 560px at 82% -8%, rgb(255 255 255 / .05), transparent 62%);
}

/* 11. 套餐卡片价格基线对齐: 描述行的 min-h-[2.5rem](40px) 兜不住两行文案(46px),
 * 一行描述的卡价格线会比两行的高 6px。把保底提到两行高度,四卡价格/列表/按钮全对齐 */
.landing-plan p[class*="min-h-"] {
  min-height: 46px;
}

/* ===== 2026-08-25 v3 全站 polish (impeccable) ===== */

/* 12. muted 文本对比度: #86868b 在 #f5f5f7 上仅 3.7:1,加深一档到 5.0:1 */
.text-muted-foreground {
  color: #6e6e73;
}
html.dark .text-muted-foreground,
[data-theme="dark"] .text-muted-foreground {
  color: #a1a1a6;
}

/* 13. 公告滚动条: 视口两端渐隐,避免文字被硬切 */
.theme-ticker-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* 14. 兑换输入框: 通用焦点环(规则9)与 .redeem-input-wrap 的 focus-within 环叠加成双重描边,
 * 输入框自身的环去掉,焦点指示由外层卡片承担(无障碍不受损) */
.redeem-input-wrap .redeem-input:focus-visible,
.redeem-input-wrap .redeem-input:focus {
  outline: none !important;
}

/* 15. 禁用态主按钮: 原来是大块实心中灰+白字,视觉太重且像可点;
 * 弱化为浅灰底+中灰字,与"禁用"语义一致 */
.redeem-main .redeem-btn:disabled {
  background: #e8e8ed;
  color: #86868b;
  opacity: 1;
  box-shadow: none;
}
html.dark .redeem-main .redeem-btn:disabled,
[data-theme="dark"] .redeem-main .redeem-btn:disabled {
  background: rgb(255 255 255 / .08);
  color: rgb(255 255 255 / .38);
}

/* 16. 套餐卡: 纯描边太平,给软阴影(带偏移+大模糊)与悬停抬升;
 * 深色模式阴影不可见,改用边框提亮反馈 */
.landing-plan {
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1), border-color .25s ease;
}
.landing-plan:not(.is-featured) {
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -20px rgb(0 0 0 / .10);
}
.landing-plan:not(.is-featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgb(0 0 0 / .05), 0 22px 44px -20px rgb(0 0 0 / .16);
}
.landing-plan.is-featured {
  box-shadow: 0 0 0 1px #1d1d1f, 0 2px 6px rgb(0 0 0 / .06), 0 18px 40px -18px rgb(0 0 0 / .16);
}
.landing-plan.is-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px #1d1d1f, 0 3px 8px rgb(0 0 0 / .07), 0 26px 52px -20px rgb(0 0 0 / .20);
}
html.dark .landing-plan:not(.is-featured),
[data-theme="dark"] .landing-plan:not(.is-featured) {
  box-shadow: none;
}
html.dark .landing-plan:not(.is-featured):hover,
[data-theme="dark"] .landing-plan:not(.is-featured):hover {
  border-color: rgb(255 255 255 / .18);
  box-shadow: none;
}
html.dark .landing-plan.is-featured,
[data-theme="dark"] .landing-plan.is-featured {
  box-shadow: 0 0 0 1px rgb(245 245 247 / .85);
}
html.dark .landing-plan.is-featured:hover,
[data-theme="dark"] .landing-plan.is-featured:hover {
  box-shadow: 0 0 0 1px rgb(245 245 247 / .95);
}

/* 17. CTA 悬停反馈: 与 redeem-btn(规则1)同一套抬升语言,全站一致 */
.theme-hero-cta,
.landing-plan-cta {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.theme-hero-cta-primary:hover,
.landing-plan-cta.is-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .35);
}
.theme-hero-cta-primary:active,
.landing-plan-cta.is-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px rgb(0 0 0 / .3);
}
.theme-hero-cta-ghost:hover,
.landing-plan-cta:not(.is-primary):hover {
  border-color: rgb(29 29 31 / .4);
  background-color: rgb(0 0 0 / .03);
}
html.dark .theme-hero-cta-ghost:hover,
html.dark .landing-plan-cta:not(.is-primary):hover,
[data-theme="dark"] .theme-hero-cta-ghost:hover,
[data-theme="dark"] .landing-plan-cta:not(.is-primary):hover {
  border-color: rgb(255 255 255 / .45);
  background-color: rgb(255 255 255 / .05);
}

/* 18. 黑色兑换横幅: 微弱环境光,与 hero 光晕(规则10)呼应,两种主题同样适用 */
.redeem-banner {
  background-image: radial-gradient(600px 220px at 85% -20%, rgb(255 255 255 / .10), transparent 65%);
  background-repeat: no-repeat;
}

/* 19. 价格数字用表格数字,多卡并排基线更稳 */
.landing-price {
  font-variant-numeric: tabular-nums;
}

/* 20. 文本选区跟随品牌黑白 */
::selection {
  background: #1d1d1f;
  color: #f5f5f7;
}
html.dark ::selection,
[data-theme="dark"] ::selection {
  background: #f5f5f7;
  color: #1d1d1f;
}

/* 21. 动效偏好: 减弱动态时不做位移 */
@media (prefers-reduced-motion: reduce) {
  .landing-plan,
  .theme-hero-cta,
  .landing-plan-cta {
    transition: none;
  }
  .landing-plan:hover,
  .theme-hero-cta-primary:hover,
  .landing-plan-cta.is-primary:hover {
    transform: none;
  }
}

/* 22. /redeem 黑色横幅在窄屏被右侧徽章挤压,标题竖排成两字一行;
 * <768px 改为上下堆叠(首页同类横幅本就是 !flex-col,不受影响) */
@media (max-width: 767px) {
  .redeem-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem;
  }
}

/* ===== 2026-08-25 v5: 销量徽章 + 第二轮 polish ===== */

/* 23. 销量徽章(redeem-polish.js v2 注入)。
 * 套餐卡里是价格下的一行小字;商品详情页里是和「有库存」同排的软色徽章 */
.mf-sold {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mf-sold-line {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #bf4800;
}
.mf-sold-detail {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgb(255 105 0 / .09);
  color: #bf4800;
  vertical-align: middle;
}
html.dark .mf-sold-line,
[data-theme="dark"] .mf-sold-line {
  color: #ffb340;
}
html.dark .mf-sold-detail,
[data-theme="dark"] .mf-sold-detail {
  background: rgb(255 159 10 / .14);
  color: #ffb340;
}

/* 24. 公告滚动条: 悬停暂停,想读的人能读完 */
.theme-ticker:hover .theme-ticker-track {
  animation-play-state: paused;
}

/* 25. 卡片景深统一: 全站 rounded-3xl 白卡与套餐卡(规则16)同一套软阴影;
 * 警告块保持扁平,深色模式阴影不可见故关闭 */
main [class*="rounded-3xl"][class*="bg-card"]:not([class*="warning"]) {
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 28px -18px rgb(0 0 0 / .08);
}
html.dark main [class*="rounded-3xl"][class*="bg-card"]:not([class*="warning"]),
[data-theme="dark"] main [class*="rounded-3xl"][class*="bg-card"]:not([class*="warning"]) {
  box-shadow: none;
}

/* 26. 「不保封号」警告块: 整段亮橙太吵,压成深琥珀,读得进去才算警告 */
main p[class*="bg-warning-soft"] {
  color: #9a4b0f;
}
html.dark main p[class*="bg-warning-soft"],
[data-theme="dark"] main p[class*="bg-warning-soft"] {
  color: #e5b567;
}

/* 27. 滚动条跟随主题(浏览器默认件也是设计的一部分) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / .22);
  border-radius: 999px;
  border: 3px solid #f5f5f7;
}
::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / .34); }
html.dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / .22);
  border-color: #0c0c0e;
}
html.dark ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / .34);
}

/* ===== 2026-08-25 v6: 升级通道卡(redeem-polish.js v4 注入) ===== */
.mf-upgrade {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / .08);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 28px -18px rgb(0 0 0 / .08);
}
.mf-upgrade-txt strong {
  display: block;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.mf-upgrade-txt span {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  color: #6e6e73;
}
.mf-upgrade-btn {
  flex: none;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / .18);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.mf-upgrade-btn:hover {
  border-color: rgb(0 0 0 / .45);
  background: rgb(0 0 0 / .03);
}
.mf-upgrade-btn:active { transform: scale(.98); }
.mf-upgrade-btn.is-copied {
  border-color: transparent;
  background: #1d1d1f;
  color: #f5f5f7;
}
html.dark .mf-upgrade,
[data-theme="dark"] .mf-upgrade {
  background: #171719;
  border-color: rgb(255 255 255 / .10);
  box-shadow: none;
}
html.dark .mf-upgrade-txt span,
[data-theme="dark"] .mf-upgrade-txt span {
  color: #a1a1a6;
}
html.dark .mf-upgrade-btn,
[data-theme="dark"] .mf-upgrade-btn {
  border-color: rgb(255 255 255 / .22);
}
html.dark .mf-upgrade-btn:hover,
[data-theme="dark"] .mf-upgrade-btn:hover {
  border-color: rgb(255 255 255 / .5);
  background: rgb(255 255 255 / .05);
}
html.dark .mf-upgrade-btn.is-copied,
[data-theme="dark"] .mf-upgrade-btn.is-copied {
  background: #f5f5f7;
  color: #1d1d1f;
}
@media (max-width: 640px) {
  .mf-upgrade { padding: 20px; }
  .mf-upgrade-btn { width: 100%; }
}

/* ===== 2026-08-25 v7: 导航精简 ===== */

/* 28. 桌面顶栏只留转化路径(套餐/兑换/教程/售后/查单/登录),
 * 博客/公告/关于收进页脚(页脚本来就有);移动端抽屉菜单不动 */
.fixed.top-0.z-50 a[href="/blog"],
.fixed.top-0.z-50 a[href="/notice"],
.fixed.top-0.z-50 a[href="/about"] {
  display: none;
}

/* 29. 语言切换暂藏: 英文语言包是半成品(标题英文正文中文混排),
 * 补全翻译后删掉这条再放出来 */
button[aria-label="选择语言"] {
  display: none;
}

/* ===== 进站分流开屏 (2026-08-26) ===== */
#mf-gate{position:fixed;inset:0;z-index:100000;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease;padding:24px 24px 12vh;}
html.dark #mf-gate,[data-theme="dark"] #mf-gate{background:#0c0c10;}
#mf-gate.mf-gate-hide{opacity:0;pointer-events:none;}
.mf-gate-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:660px;animation:mfGateIn .5s cubic-bezier(.2,.7,.3,1) both;}
.mf-gate-inner img{width:84px;height:84px;border-radius:21px;box-shadow:0 10px 24px rgba(29,29,31,.10);}
.mf-gate-name{margin-top:16px;font-size:22px;font-weight:650;color:#1d1d1f;}
html.dark .mf-gate-name,[data-theme="dark"] .mf-gate-name{color:#f5f5f7;}
.mf-gate-sub{margin-top:7px;font-size:15px;color:#86868b;}
.mf-gate-btns{margin-top:36px;width:100%;display:flex;gap:16px;}
.mf-gate-btn{flex:1;display:block;padding:26px 24px;border-radius:20px;text-align:center;cursor:pointer;border:none;background:#f5f5f7;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
html.dark .mf-gate-btn,[data-theme="dark"] .mf-gate-btn{background:#1c1c21;}
.mf-gate-btn:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.09);}
html.dark .mf-gate-btn:hover,[data-theme="dark"] .mf-gate-btn:hover{background:#26262c;box-shadow:0 14px 36px rgba(0,0,0,.5);}
.mf-gate-btn .t{font-size:17px;font-weight:650;color:#1d1d1f;}
html.dark .mf-gate-btn .t,[data-theme="dark"] .mf-gate-btn .t{color:#f5f5f7;}
.mf-gate-btn .d{margin-top:6px;font-size:13px;color:#86868b;}
.mf-gate-skip{margin-top:28px;font-size:13px;color:#86868b;cursor:pointer;background:none;border:none;text-decoration:underline;text-underline-offset:3px;}
@keyframes mfGateIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
@media (max-width:600px){#mf-gate{padding-bottom:24px;}.mf-gate-btns{flex-direction:column;}.mf-gate-btn{text-align:left;padding:20px 22px;}}
@media (prefers-reduced-motion:reduce){.mf-gate-inner{animation:none;}}