/* ==========================================================================
   SoftShare 前台样式 — 白色大气主题
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e6eaf2;
  --brand: #2563eb;
  --brand-2: #4f46e5;
  --brand-soft: #eff4ff;
  --gold: #d97706;
  --gold-soft: #fff7eb;
  --ok: #16a34a;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
img { max-width: 100%; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }

/* ---------- 顶部动态提示（黑色浮层，从屏幕上方掉落） ---------- */
.sf-drop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; justify-content: center;
  padding: 10px 14px 0;
  pointer-events: none;              /* 浮层不挡点击 */
}
.sf-drop-inner {
  width: max-content;                /* 字多就宽、字少就窄 */
  max-width: min(86vw, 640px);
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(15, 16, 20, .95);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  word-break: break-word;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
/* 以下三个状态由 JS 配合切换：is-ready=收回屏幕上方 / is-show=掉下来 */
.sf-drop.is-ready .sf-drop-inner {
  transform: translateY(-180%);
  opacity: 0;
  transition: transform .42s cubic-bezier(.22, .9, .28, 1), opacity .3s ease;
}
.sf-drop.is-ready.is-show .sf-drop-inner {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sf-drop.is-ready .sf-drop-inner { transition: none; }
}

/* ---------- 内页顶部条（返回 + 标题） ---------- */
.m-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 14px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.m-topbar-title { font-weight: 600; font-size: 16px; color: var(--ink); }
.m-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--bg-soft); color: var(--ink-2);
  text-decoration: none !important; transition: background .15s ease;
}
.m-back:hover { background: var(--brand-soft); color: var(--brand); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 40px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 300px at 18% -10%, rgba(37, 99, 235, .09), transparent 70%),
    radial-gradient(620px 320px at 82% 0%, rgba(124, 58, 237, .08), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed 55%, #d97706);
  opacity: .75;
  display: none; /* 首页 hero 顶部不加线，避免与页头重叠；如需开启改为 block */
}
.hero-inner { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.2; margin: 0 0 14px; letter-spacing: .5px; }
.hero-sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 首页（移动端风格） ---------- */
.home-wrap {
  max-width: 560px; margin: 0 auto;
  padding: 30px 18px 46px;
}
.home-hero { text-align: center; margin-bottom: 22px; }
.home-title {
  font-size: 29px; line-height: 1.25; margin: 0 0 10px;
  letter-spacing: .3px; font-weight: 800; color: var(--ink);
}
.home-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 16px; }
.home-stat {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #fff7eb, #fff1f2);
  border: 1px solid #fde68a; color: #92400e;
  border-radius: 999px; padding: 8px 18px;
  font-size: 13.5px; font-weight: 600;
}
.home-stat-ico { font-size: 15px; line-height: 1; }
.home-banner { margin: 0 0 16px; }

.claim-list { display: grid; gap: 16px; }
.claim-card {
  position: relative; display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 22px 22px 20px; box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
.claim-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
}
.claim-vip::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.claim-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15, 23, 42, .12); }
.claim-card:active { transform: scale(.988); }
.claim-card.is-off { opacity: .82; }

.claim-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.claim-ico {
  width: 54px; height: 54px; flex: none; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
}
.claim-normal .claim-ico { background: var(--brand-soft); color: var(--brand); }
.claim-vip .claim-ico { background: var(--gold-soft); color: var(--gold); }
.claim-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.claim-name { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.claim-desc { font-size: 14px; color: var(--muted); line-height: 1.45; }

.claim-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 15px 18px; border-radius: 15px;
  font-size: 16.5px; font-weight: 700; color: #fff !important;
  letter-spacing: .5px;
}
.claim-btn-normal {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .30);
}
.claim-btn-vip {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 10px 24px rgba(217, 119, 6, .30);
}

/* ---------- 领取页（上下布局 · 应用商店风格） ---------- */
.store-wrap { max-width: 560px; margin: 0 auto; padding: 14px 15px 46px; }

.store-banner { margin-bottom: 14px; }
.store-banner img {
  width: 100%; display: block; border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}

/* 搜索 */
.store-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 16px; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.store-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ss-ico { color: var(--muted); display: flex; flex: none; }
.store-search input {
  flex: 1; min-width: 0; border: 0 !important; outline: none;
  /* 显式高度 + 行高，保证输入光标（|）完整可见、不被裁切 */
  height: 26px; line-height: 26px; padding: 0 3px !important;
  font-size: 15px; font-family: inherit; color: var(--ink); background: transparent;
  box-shadow: none !important; caret-color: var(--brand);
}
.store-search input::placeholder { color: #9aa7bb; }
.ss-clear {
  flex: none; border: 0; background: var(--bg-soft); color: var(--muted);
  width: 22px; height: 22px; border-radius: 999px; cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.ss-clear:hover { background: #e2e8f0; color: var(--ink); }

/* ---------- 分类（下划线式标签 · 左右滑动 + 可见滚动条） ---------- */
.store-cats-wrap { position: relative; margin-bottom: 8px; }
.store-cats {
  display: flex; gap: 22px; overflow-x: auto; padding: 0 2px;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* 原生滚动条隐藏，改用下方自绘滚动条（手机/电脑都能看见） */
  cursor: grab;
}
.store-cats::-webkit-scrollbar { display: none; height: 0; }
.store-cats.dragging { cursor: grabbing; }
.cat-chip {
  position: relative; flex: none;
  border: 0; background: none; padding: 12px 2px 11px;
  font-size: 15px; font-family: inherit; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color .16s ease;
  -webkit-user-select: none; user-select: none;
}
.cat-chip::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2.5px;
  border-radius: 3px; background: linear-gradient(90deg, #2563eb, #4f46e5);
  transition: left .2s ease, right .2s ease;
}
.cat-chip:hover { color: var(--ink-2); }
.cat-chip.active { color: var(--brand); font-weight: 600; }
.cat-chip.active::after { left: 0; right: 0; }

/* 可拖动的横向滚动条（分类过多时出现） */
.cats-bar {
  position: relative; height: 8px; margin: 10px 2px 0;
  background: #eef2f8; border-radius: 999px; overflow: hidden;
  touch-action: none;
}
.cats-thumb {
  position: absolute; top: 0; left: 0; height: 100%; width: 40px; min-width: 28px;
  background: linear-gradient(90deg, #9dbcf7, #4f7df0);
  border-radius: 999px; cursor: grab;
  transition: background .15s ease;
  will-change: transform;
}
.cats-thumb:hover { background: linear-gradient(90deg, #7fa6f5, #2563eb); }
.cats-thumb:active, .cats-thumb.dragging { cursor: grabbing; background: linear-gradient(90deg, #6f9cf3, #1d4ed8); }

/* ---------- 首页标题区 ---------- */
.home-headline { text-align: center; margin: 2px 0 16px; }
.home-title2 { font-size: 23px; font-weight: 800; margin: 0 0 10px; color: var(--ink); letter-spacing: .3px; }

.store-sec-count { float: right; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 24px; }

/* 区块标题 */
.store-sec { font-size: 17px; font-weight: 700; color: var(--ink); margin: 4px 2px 12px; }

/* 软件列表 */
.store-list { display: grid; gap: 10px; }
.store-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 14px; box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.store-row:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, .09); transform: translateY(-1px); }
.sr-ico {
  width: 48px; height: 48px; flex: none; border-radius: 14px; overflow: hidden;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.sr-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-name { font-size: 15.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.sr-ver {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 1px 6px;
}
.sr-meta { font-size: 12.5px; color: var(--muted); }
.sr-desc {
  font-size: 12.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-act { flex: none; }
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 74px; padding: 9px 16px; border-radius: 999px; border: 0;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none !important; line-height: 1; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.sr-btn:active { transform: scale(.96); }
.sr-btn-get {
  background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.sr-btn-dl {
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .28);
}
.sr-btn-wait { background: var(--warn-soft); color: var(--warn); border: 1px solid #fde68a; }

.store-empty {
  text-align: center; color: var(--muted); font-size: 14px;
  padding: 40px 16px; background: #fff; border: 1px dashed var(--line); border-radius: 16px;
}
.store-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 20px 0 0; }
.vip-quota-bar {
  text-align: center; font-size: 14px; font-weight: 600; color: #15803d;
  background: var(--ok-soft); border: 1px solid #bbf7d0; border-radius: 999px;
  padding: 10px 16px; margin-bottom: 14px;
}
.vip-quota-bar b { font-size: 16px; }

/* ---------- 获取方式选择（左右并排） ---------- */
.gm-choose-head { text-align: center; margin-bottom: 16px; }
.gm-choose-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.gm-choose-sub { font-size: 13px; color: var(--muted); }
.choose-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; align-items: stretch;
}
.choose-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; min-height: 188px; height: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 18px 14px 16px; cursor: pointer; font-family: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.choose-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .10); }
.choose-card:active { transform: scale(.985); }
.choose-card:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.choose-normal { border-color: #c7d8ff; }
.choose-vip { border-color: #fde68a; }
.cc-ico {
  width: 52px; height: 52px; flex: none; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
}
.choose-normal .cc-ico { background: var(--brand-soft); color: var(--brand); }
.choose-vip .cc-ico { background: var(--gold-soft); color: var(--gold); }
.cc-name {
  font-size: 16px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.cc-tag {
  font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px;
  padding: 2px 6px; background: var(--brand-soft); color: var(--brand);
}
.cc-tag-gold { background: var(--gold-soft); color: var(--gold); }
.cc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cc-state { font-size: 12px; margin-top: auto; line-height: 1.4; }
.cc-state:not(:empty) { padding-top: 4px; }

/* 弹窗返回按钮 */
.gm-back {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-2); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.gm-back:hover { background: var(--brand-soft); color: var(--brand); }

/* ---------- 获取弹窗 ---------- */
body.gm-open { overflow: hidden; }
/* html 上有 overflow-y: scroll 声明，所以滚动锁定必须同时作用在 html 上才有效
   （scrollbar-gutter: stable 会在隐藏时仍保留滚动条槽位，页面不会左右跳动） */
html.gm-open { overflow: hidden; }
/* 弹窗整体在屏幕正中显示 */
.gmodal {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.gm-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.gm-panel {
  position: relative; width: 100%; max-width: 560px;
  max-height: 86vh;
  display: flex; flex-direction: column;   /* 面板本身不滚动，交给内部区域各自滚动 */
  overflow: hidden;
  overscroll-behavior: contain;             /* 内部滚到头也不带动背后页面 */
  background: #fff; border-radius: 22px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .30);
  animation: gmIn .22s ease;
}
@keyframes gmIn { from { transform: translateY(14px) scale(.985); opacity: .5; } to { transform: translateY(0) scale(1); opacity: 1; } }
.gm-head {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
}
.gm-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px; overflow: hidden;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.gm-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-title { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; }
.gm-x {
  width: 32px; height: 32px; flex: none; border: 0; border-radius: 999px;
  background: var(--bg-soft); color: var(--muted); font-size: 19px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.gm-x:hover { background: #e2e8f0; color: var(--ink); }
.gm-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;   /* 选择页 / 尊享页：整块滚动 */
  padding: 16px 18px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---------- 普通获取 / 尊享获取：只有任务说明可上下滑动，上传区固定在底部 ---------- */
#gmNormal, #gmVip {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
}
/* 任务说明区：内容超出时可独立上下滑动（滚到头不会带着外层一起滚） */
#gmNormal > .gm-intro, #gmVip > .gm-intro {
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 3px; padding-bottom: 8px;
}
/* 上传区 / 等待审核区：固定，不随任务说明滚动 */
#gmNormal > .gm-upload, #gmVip > .gm-upload,
#gmNormal > .gm-state, #gmVip > .gm-state { flex: none; }
#gmNormal > .gm-upload, #gmVip > .gm-upload {
  margin-top: auto;                 /* 内容不够高时也贴在弹窗底部 */
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* 任务说明区滚动条：细一点、配色柔和，提示访客「这里能滑」 */
#gmNormal > .gm-intro::-webkit-scrollbar,
#gmVip > .gm-intro::-webkit-scrollbar { width: 6px; }
#gmNormal > .gm-intro::-webkit-scrollbar-thumb,
#gmVip > .gm-intro::-webkit-scrollbar-thumb { background: rgba(146, 64, 14, .22); border-radius: 999px; }
#gmNormal > .gm-intro::-webkit-scrollbar-track,
#gmVip > .gm-intro::-webkit-scrollbar-track { background: transparent; }
.gm-intro-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
/* 弹窗里的收款码整体左右居中（display:flex + margin:auto 才能真正居中） */
.gm-intro .qr-box {
  display: flex; width: fit-content; max-width: 100%;
  margin: 12px auto; align-items: center; justify-content: center;
}
.gm-intro .qr-box img { width: 190px; height: 190px; }
.gm-state {
  text-align: center; border-radius: 16px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.gm-state > b { font-size: 16px; }
.gm-state-ico { font-size: 36px; line-height: 1; }
.gm-state-ok { background: var(--ok-soft); border: 1px solid #bbf7d0; }
.gm-state-ok > b { color: #15803d; }
.gm-state-wait { background: var(--warn-soft); border: 1px solid #fde68a; }
.gm-state-wait > b { color: #92400e; }
.gm-state-pending { background: var(--warn-soft); border: 1px solid #fde68a; }
.gm-state-pending > b { color: #92400e; }
.gm-view { display: block; }
.gm-view.gm-state { display: flex; }
.gm-intro + .gm-upload { margin-top: 16px; }
.gm-upload { display: flex; flex-direction: column; gap: 1px; }
/* 弹窗内的上传区做紧凑处理：尽量把高度让给「任务说明」 */
.gm-upload .gm-intro-title { margin-bottom: 2px; }
/* 说明文字默认 p 自带 1em 上下边距，弹窗里收紧；长文字自动换行时行距也压一压 */
#gmUploadTip, #gmVipUploadTip { margin: 2px 0 6px; font-size: 12px; line-height: 1.45; }
.gm-upload .dropzone {
  margin: 0 0 6px; min-height: 66px;
  padding: 10px 12px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
/* 图标与第一行文字并排（省掉一整行高度），第二行说明独占一行 */
.gm-upload .dz-empty {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  column-gap: 6px; row-gap: 1px;
}
.gm-upload .dz-icon { font-size: 18px; margin: 0; line-height: 1; flex: none; }
.gm-upload .dz-empty p { margin: 0; }
.gm-upload .dz-empty p.muted { flex-basis: 100%; text-align: center; }
.gm-upload .dropzone > div { width: 100%; }
.gm-upload .btn { width: 100%; }
.gm-upload .btn-lg { padding: 10px 20px; font-size: 15px; border-radius: 11px; }
.gm-upload .upload-note { margin: 10px 0 0; text-align: center; min-height: 20px; }
/* 已选好图片时的预览也压一压（原来预览图最大 180px，太高） */
.gm-upload .dz-preview { gap: 6px; }
.gm-upload .dz-preview img { max-height: 96px; }
/* 普通/尊享两个流程的主体区最小高度一致（只在屏幕够高时生效，避免小屏挤占任务说明的可视高度） */
#gmNormal, #gmVip { min-height: 0; }
@media (min-height: 760px) {
  #gmNormal, #gmVip { min-height: 420px; }
}

/* 屏幕较矮时进一步压缩上传区（必须放在上面所有上传区规则之后才生效），把高度让给任务说明 */
@media (max-height: 700px) {
  .gm-upload .dropzone { min-height: 56px; padding: 8px 10px; }
  .gm-upload .dz-icon { font-size: 16px; }
  .gm-upload .dz-empty p { font-size: 13px; line-height: 1.4; }
  #gmUploadTip, #gmVipUploadTip { font-size: 11.5px; margin: 2px 0 5px; }
  #gmNormal > .gm-upload, #gmVip > .gm-upload { padding-top: 8px; }
  .gm-upload .btn-lg { padding: 9px 18px; font-size: 14.5px; }
  .gm-upload .dz-preview img { max-height: 80px; }
}
/* 窄屏放不下「（可多选）」时隐藏它，避免拖拽区文案换行撑高 */
@media (max-width: 400px) {
  .gm-upload .dz-more { display: none; }
}

/* ---------- 五角星评分 ---------- */
.sr-stars { display: inline-flex; gap: 1px; vertical-align: -1px; margin-left: 2px; }
.sr-stars i { font-style: normal; font-size: 13px; line-height: 1; }
.sr-stars i.on { color: #f5a524; }
.sr-stars i.off { color: #dfe5ee; }

/* ---------- 顶部图叠加区（左文字 + 右置顶软件） ---------- */
/* ---------- 顶部图 / 轮播图 + 叠加区（左文字 + 右置顶软件） ----------
   高度由「尺寸基准图」按图片原始比例撑起（和单张顶部图时完全一致）；
   叠加文字更长时容器会自动变高，文字不会被裁掉。 */
.banner-hero {
  position: relative; overflow: hidden; border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  display: grid;
}
/* 尺寸基准图：不可见，只为撑出与图片原比例一致的高度 */
.banner-hero > .bh-sizer {
  grid-area: 1 / 1; z-index: 0;
  width: 100%; display: block;
  visibility: hidden; pointer-events: none;
}
/* 轮播轨道：横向排列，切换时整体平移
   注意：这里不能写 overflow:hidden —— 轨道自己会平移，裁剪窗口跟着移动会把整块裁掉；
   裁剪统一交给外层 .banner-hero 的 overflow:hidden */
.banner-hero > .bh-track {
  grid-area: 1 / 1; z-index: 1;
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.banner-hero > .bh-track.is-dragging { transition: none; }
.bh-slide {
  flex: 0 0 100%; min-width: 0; display: block;
  border-radius: 0; box-shadow: none;
}
.bh-slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: 0; box-shadow: none;
}
a.bh-slide { cursor: pointer; }
/* 轮播圆点 */
.bh-dots {
  grid-area: 1 / 1; z-index: 3;
  align-self: end; justify-self: center;
  display: flex; gap: 6px; margin-bottom: 10px;
}
.bh-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .55); cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
  transition: width .22s ease, background .22s ease;
}
.bh-dot.on { width: 16px; background: #fff; }
.bh-inner {
  grid-area: 1 / 1; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2.4vw, 16px);
  padding: clamp(13px, 3.6vw, 20px) clamp(14px, 4vw, 20px);
  pointer-events: none;   /* 叠加层不挡住轮播图的点击跳转 */
}
.bh-inner a, .bh-inner button, .bh-inner .sr-btn { pointer-events: auto; }
.bh-left { min-width: 0; max-width: 56%; }
.bh-title {
  font-size: clamp(15px, 4.4vw, 19px); font-weight: 800; color: #fff; line-height: 1.35;
  text-shadow: 0 2px 10px rgba(15, 23, 42, .35); word-break: break-word;
}
.bh-sub {
  margin-top: 6px; font-size: clamp(11.5px, 3.3vw, 13px); color: rgba(255, 255, 255, .92); line-height: 1.5;
  text-shadow: 0 1px 8px rgba(15, 23, 42, .32); word-break: break-word;
}
/* 顶部图文字下方的「查看详情」链接（后台可自定义文字与地址） */
.bh-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  background: rgba(255, 255, 255, .93); color: #b45309;
  font-size: clamp(12px, 3.2vw, 12.5px); font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 7px 14px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .2); backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease;
}
.bh-link:hover { background: #fff; transform: translateY(-1px); }
.bh-link:active { transform: translateY(0); }
.bh-link i { font-style: normal; }
.bh-pins { display: flex; flex-direction: column; gap: 6px; flex: none; max-width: 46%; }
.pin-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  border-radius: 12px; padding: 6px 9px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
}
.pin-ico {
  width: 24px; height: 24px; flex: none; border-radius: 7px; overflow: hidden;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.pin-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pin-act { flex: none; }
.pin-act .sr-btn { min-width: 56px; padding: 6px 12px; font-size: 12.5px; }

/* 手机窄屏：保持左右并排（观感与原设计一致），但文字列适当放宽、置顶软件卡片收窄，
   这样短文字时高度仍按图片比例，文字长了容器才往上长 */
@media (max-width: 560px) {
  .bh-left { max-width: 60%; }
  .bh-pins { max-width: 38%; gap: 5px; }
  .pin-item { gap: 6px; padding: 5px 8px; }
  .pin-ico { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }
  .pin-name { font-size: 12px; }
  .pin-act .sr-btn { min-width: 48px; padding: 5px 9px; font-size: 11.5px; }
}
/* 超窄屏（小手机）：再收一档内边距与间距 */
@media (max-width: 360px) {
  .bh-inner { padding: 12px 12px; gap: 8px; }
  .bh-left { max-width: 58%; }
  .bh-pins { max-width: 40%; }
  .bh-sub { margin-top: 4px; }
  .bh-link { margin-top: 8px; padding: 6px 12px; }
  .pin-act .sr-btn { min-width: 44px; padding: 5px 8px; font-size: 11px; }
}

/* ---------- 多图上传 ---------- */
.need-tag {
  display: inline-block; margin-left: 6px; vertical-align: 2px;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: var(--warn-soft); color: #b45309; border: 1px solid #fde68a;
}
.need-tag.ok { background: var(--ok-soft); color: #15803d; border-color: #bbf7d0; }
.dz-more { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.dz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.dz-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-thumb-no {
  position: absolute; left: 4px; top: 4px; min-width: 16px; height: 16px;
  border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 24px; border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; box-shadow: 0 8px 22px rgba(37, 99, 235, .28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37, 99, 235, .34); }
.btn-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 8px 22px rgba(217, 119, 6, .28); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(217, 119, 6, .34); }
.btn-ok { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 8px 22px rgba(22, 163, 74, .28); }
.btn-ok:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22, 163, 74, .34); }
.btn-outline { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.btn-outline:hover { border-color: #cbd5e1; background: var(--bg-soft); }
.btn-lg { padding: 14px 30px; font-size: 16px; border-radius: 14px; }
.btn-xl { padding: 17px 34px; font-size: 17px; border-radius: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }

/* ---------- 通用区块标题 ---------- */
.sec-head { text-align: center; margin: 56px 0 28px; }
.sec-head h2 { font-size: 28px; margin: 0 0 8px; }
.sec-head p { color: var(--muted); margin: 0; }

/* ---------- 通道卡片 ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.channel-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 32px 30px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.channel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.channel-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
}
.channel-vip::after { background: linear-gradient(90deg, #f59e0b, #d97706); }
.channel-icon {
  width: 60px; height: 60px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.channel-icon svg { width: 30px; height: 30px; }
.icon-blue { background: var(--brand-soft); color: var(--brand); }
.icon-gold { background: var(--gold-soft); color: var(--gold); }
.channel-icon.big { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 16px; }
.channel-icon.big svg { width: 38px; height: 38px; }
.channel-card h3 { font-size: 22px; margin: 0 0 8px; }
.channel-desc { color: var(--muted); margin: 0 0 16px; }
.channel-feats { list-style: none; margin: 0 0 22px; padding: 0; }
.channel-feats li { padding: 5px 0 5px 26px; position: relative; color: var(--ink-2); font-size: 14.5px; }
.channel-feats li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 700; }
.channel-card .btn { margin-top: auto; }
.channel-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* ---------- 软件列表 ---------- */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.sw-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
}
.sw-icon {
  width: 56px; height: 56px; flex: none; border-radius: 16px;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
}
.sw-body { flex: 1; min-width: 180px; }
.sw-name { font-size: 17px; margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 2px 8px; }
.sw-desc {
  color: var(--muted); font-size: 14px; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-meta { display: flex; gap: 14px; color: var(--muted); font-size: 12.5px; }
.sw-action { width: 100%; margin-top: 4px; }
.sw-action .btn { width: 100%; }

/* ---------- 步骤 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px; text-align: center; box-shadow: var(--shadow);
}
.step-num {
  display: inline-flex; width: 40px; height: 40px; border-radius: 999px;
  align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .25); margin-bottom: 12px;
}
.step h4 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 已解锁提示 ---------- */
.unlock-banner {
  margin-top: 22px; text-align: center;
  background: var(--ok-soft); color: #15803d; border: 1px solid #bbf7d0;
  border-radius: 14px; padding: 12px 18px; font-weight: 500;
}

/* ---------- 卡片通用 ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.card-title { margin: 0 0 14px; font-size: 18px; }
.empty-card.center { text-align: center; }
.empty-card .state-icon { font-size: 44px; margin-bottom: 8px; line-height: 1; }

/* ---------- 流程页 ---------- */
.flow-wrap { max-width: 780px; padding-top: 34px; padding-bottom: 60px; }
.flow-head { text-align: center; margin-bottom: 22px; }
.flow-head h1 { font-size: 30px; margin: 0 0 8px; }
.flow-head p { color: var(--muted); margin: 0; }
.flow-wrap .card { margin-bottom: 18px; }
.task-body {
  background: var(--warn-soft); border: 1px dashed #fcd34d; border-radius: var(--radius-sm);
  padding: 16px 18px; color: #92400e; font-size: 15px;
  white-space: pre-line;   /* 任务文案按真实换行显示 */
}
.task-tip { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 任务说明：Markdown 渲染 ---------- */
.task-body.task-md { white-space: normal; }
.task-md h1, .task-md h2, .task-md h3, .task-md h4, .task-md h5, .task-md h6 {
  margin: 12px 0 6px; font-size: 16.5px; color: #92400e; line-height: 1.45;
}
.task-md h1 { font-size: 19px; }
.task-md p { margin: 6px 0; }
.task-md ul, .task-md ol { margin: 6px 0; padding-left: 24px; }
.task-md li { margin: 3px 0; }
.task-md img {
  max-width: 100%; height: auto; display: block; margin: 10px 0;
  border-radius: 10px; border: 1px solid #fcd34d; background: #fff;
}
.task-md strong { color: #7c2d12; }
.task-md a { color: #b45309; text-decoration: underline; }
.task-md code {
  background: rgba(146, 64, 14, .09); border-radius: 5px;
  padding: 1px 6px; font-size: 13px;
}
.task-md .md-pre {
  background: #fff; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 10px 12px; overflow: auto; margin: 8px 0;
}
.task-md .md-pre code { background: none; padding: 0; font-size: 13px; }
.task-md blockquote {
  border-left: 3px solid #fcd34d; margin: 8px 0; padding: 2px 0 2px 12px; color: #a16207;
}
.task-md hr { border: 0; border-top: 1px dashed #fcd34d; margin: 12px 0; }

/* ---------- 任务说明：自定义 HTML 渲染（与 Markdown 保持同一套视觉） ---------- */
.task-body.task-html { white-space: normal; word-break: break-word; }
.task-html h1, .task-html h2, .task-html h3, .task-html h4, .task-html h5, .task-html h6 {
  margin: 12px 0 6px; font-size: 16.5px; color: #92400e; line-height: 1.45;
}
.task-html h1 { font-size: 19px; }
.task-html p, .task-html div { margin: 6px 0; }
.task-html ul, .task-html ol { margin: 6px 0; padding-left: 24px; }
.task-html li { margin: 3px 0; }
.task-html img {
  max-width: 100%; height: auto; display: block; margin: 10px 0;
  border-radius: 10px; border: 1px solid #fcd34d; background: #fff;
}
.task-html strong, .task-html b { color: #7c2d12; }
.task-html a { color: #b45309; text-decoration: underline; }
.task-html code {
  background: rgba(146, 64, 14, .09); border-radius: 5px;
  padding: 1px 6px; font-size: 13px;
}
.task-html pre {
  background: #fff; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 10px 12px; overflow: auto; margin: 8px 0;
}
.task-html pre code { background: none; padding: 0; font-size: 13px; }
.task-html blockquote {
  border-left: 3px solid #fcd34d; margin: 8px 0; padding: 2px 0 2px 12px; color: #a16207;
}
.task-html hr { border: 0; border-top: 1px dashed #fcd34d; margin: 12px 0; }
.task-html table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
.task-html th, .task-html td { border: 1px solid #f6d98a; padding: 6px 10px; text-align: left; }
.task-html th { background: rgba(253, 230, 138, .32); }
.task-html video, .task-html audio { max-width: 100%; display: block; margin: 8px 0; border-radius: 10px; }

/* ---------- 任务说明：步骤卡片 / 复制按钮（全局类名 sf- 前缀） ---------- */
.sf-step {
  background: #fff; border: 1px solid #fde68a; border-radius: 16px;
  padding: 18px 16px 16px; margin: 10px 0 6px; text-align: center;
  box-shadow: 0 4px 16px rgba(245, 158, 11, .10);
}
.sf-step-t {
  margin: 0 0 14px; font-size: 15.5px; font-weight: 800; color: #0f172a;
  text-align: left; line-height: 1.55; letter-spacing: .3px;
}
.sf-step-t em { font-style: normal; color: #b45309; }
/* 浅黄小框：包住可复制文案 + 复制按钮（新版文案框渲染结构） */
.sf-step-box {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 14px 12px; margin: 0 0 12px;
  text-align: center;
}
/* 可复制的文本块（新版：在小框内，纯文字样式；旧版直接子元素保留浅黄小框） */
.sf-copy-text {
  display: inline-block; max-width: 100%; text-align: center;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 9px 16px; margin: 0 0 12px; color: #7c2d12;
  font-size: 14.5px; font-weight: 600; line-height: 1.6; word-break: break-word;
}
.sf-step-box .sf-copy-text { background: none; border: 0; padding: 2px 4px; margin: 0 0 10px; color: #0f172a; font-size: 15px; }
/* 按钮行（始终居中，自动换行） */
.sf-btn-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
  margin: 2px 0 4px;
}
/* 复制按钮（点击后 JS 复制到剪贴板，可配置复制后跳转） */
.sf-copy-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  border: 0; border-radius: 999px; padding: 9px 20px;
  font-size: 14px; font-weight: 700; font-family: inherit; line-height: 1.2;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 5px 14px rgba(245, 158, 11, .34);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.sf-copy-btn:hover { box-shadow: 0 7px 18px rgba(245, 158, 11, .42); }
.sf-copy-btn:active { transform: scale(.96); }
.sf-copy-btn.is-done {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 5px 14px rgba(16, 185, 129, .34);
}
/* 小字说明 / 提示 */
.sf-note { margin: 8px 0 0; color: #a16207; font-size: 13px; line-height: 1.7; text-align: center; }
.sf-note-b { margin: 6px 0 0; color: #92400e; font-size: 13.5px; font-weight: 700; text-align: center; }
.sf-sep { border: 0; border-top: 1px dashed #fcd34d; margin: 12px 0; }
/* 复制文案框：竖排——上面取到的文案、下面「复制」按钮 */
.sf-copyline {
  background: #fff; border: 1px solid #fde68a; border-radius: 10px;
  padding: 12px; margin: 0 0 10px; text-align: center;
}
.sf-copyline-t { color: #0f172a; font-size: 14.5px; font-weight: 600; line-height: 1.6; word-break: break-word; margin: 0 0 10px; min-height: 1em; }
.sf-copyline .sf-copy-btn { display: inline-flex; }
/* 图片模块 */
.sf-img { margin: 4px 0 8px; }
.sf-img img { max-width: 100%; border-radius: 10px; }
/* 任务内容为空时隐藏整个任务区残留 */
.task-body:empty { display: none; }
/* 变量占位（显示当前内容，点复制后会更新） */
.sf-var { word-break: break-word; }

/* 后台 Markdown/HTML 预览区里的同款组件适配 */
.md-preview .sf-step { margin: 8px 0; }
.md-preview .sf-note, .md-preview .sf-note-b { margin-top: 6px; }
.flow-back { margin-top: 8px; }
.flow-back a { color: var(--muted); font-size: 14px; }

/* ---------- 普通通道：左右两栏（左软件列表 / 右获取流程） ---------- */
.get-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 60px;
}
.sw-side { position: sticky; top: 84px; }
.sw-side-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.sw-side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.sw-side-head h2 { font-size: 16px; margin: 0; }
.sw-side-head .muted { font-size: 12.5px; }
.sw-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 230px); overflow-y: auto; }
.sw-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid transparent; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.sw-item:hover { background: var(--bg-soft); }
.sw-item.active { background: var(--brand-soft); border-color: #c7d8ff; }
.sw-item-icon { font-size: 20px; line-height: 1; flex: none; }
.sw-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sw-item-main b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-item-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-flag { flex: none; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--bg-soft); color: var(--muted); }
.flag-approved { background: var(--ok-soft); color: var(--ok); }
.flag-pending { background: var(--warn-soft); color: var(--warn); }
.flag-rejected { background: var(--danger-soft); color: #b91c1c; }
.flag-used { background: var(--brand-soft); color: var(--brand); }
.side-note { font-size: 12.5px; color: var(--muted); margin: 10px 4px 0; }
.empty-tip-sm { color: var(--muted); font-size: 13.5px; padding: 20px 18px; margin: 0; }

.get-main { min-width: 0; }
.get-main .card { margin-bottom: 16px; }
.sw-detail { display: flex; gap: 16px; align-items: flex-start; }
.sd-icon {
  width: 64px; height: 64px; border-radius: 18px; flex: none;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1;
}
.sd-body { min-width: 0; }
.sd-name { font-size: 22px; margin: 2px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-desc { color: var(--muted); margin: 0 0 8px; font-size: 14.5px; }
.sd-meta { color: var(--muted); font-size: 13px; }
.step-card .card-title { font-size: 17px; }
.part-title { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }

@media (max-width: 940px) {
  .get-layout { grid-template-columns: 1fr; }
  .sw-side { position: static; }
  .sw-list { max-height: none; flex-direction: row; flex-wrap: wrap; }
  .sw-item { width: auto; flex: 1 1 240px; }
}
@media (max-width: 560px) {
  .sw-item { flex: 1 1 100%; }
  .sw-detail { flex-direction: column; gap: 12px; }
}

/* ---------- 上传区 ---------- */
.dropzone {
  border: 2px dashed #d3dced; border-radius: 16px; background: #fbfcfe;
  padding: 34px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; margin: 6px 0 18px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }
.dz-icon { font-size: 40px; margin-bottom: 8px; line-height: 1; }
.dz-empty p { margin: 4px 0; }
.dz-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dz-preview img { max-height: 180px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.dz-file { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.link-btn { background: none; border: 0; color: var(--brand); cursor: pointer; font-size: 13.5px; font-family: inherit; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }
.upload-note { font-size: 13px; margin-top: 12px; }

/* ---------- 状态卡片 ---------- */
.state-card { text-align: center; }
.state-card .state-icon { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.state-card h3 { margin: 0 0 8px; font-size: 20px; }
.state-pending { background: var(--warn-soft); border-color: #fde68a; }
.state-pending h3 { color: #92400e; }
.state-approved { background: var(--ok-soft); border-color: #bbf7d0; }
.state-approved h3 { color: #15803d; }
.state-approved .btn { margin: 14px 0 4px; }
.state-rejected { background: var(--danger-soft); border-color: #fecaca; }
.state-rejected h3 { color: #b91c1c; }

/* ---------- 提示条 ---------- */
.alert { border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; font-size: 14.5px; }
.alert-warn { background: var(--warn-soft); border: 1px solid #fde68a; color: #92400e; }
.alert-error { background: var(--danger-soft); border: 1px solid #fecaca; color: #b91c1c; }
.alert-ok { background: var(--ok-soft); border: 1px solid #bbf7d0; color: #15803d; }

/* ---------- 土豪通道 ---------- */
.vip-wrap { max-width: 640px; }
.vip-card { text-align: center; padding: 44px 36px; }
.vip-card h1 { font-size: 30px; margin: 0 0 10px; }
.vip-desc { max-width: 480px; margin: 0 auto 8px; }
.vip-ip-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin: 18px 0; }
.ip-copy { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; justify-content: center; }
.ip-copy code { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; font-size: 16px; letter-spacing: .5px; }
.vip-note { font-size: 13.5px; margin-top: 14px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px);
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 12px; padding: 13px 20px; box-shadow: var(--shadow-lg);
  font-size: 14.5px; font-weight: 500; max-width: min(88vw, 480px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-warn { border-left-color: var(--gold); }

/* ---------- 表单 ---------- */
.form .field { display: block; margin-bottom: 16px; }
.form .field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.radio input { accent-color: var(--brand); }

/* ---------- 安装页 / 独立卡片页 ---------- */
.auth-page { background: var(--bg-soft); min-height: 100vh; }
.auth-wrap { max-width: 480px; margin: 0 auto; padding: 56px 20px; }
.auth-wrap-wide { max-width: 780px; }
.auth-card { padding: 36px; }
.auth-card h1 { font-size: 26px; margin: 0 0 10px; }
.sec-title { font-size: 16px; margin: 26px 0 12px; padding-left: 10px; border-left: 3px solid var(--brand); }
.check-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.check-table th, .check-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.check-table th { color: var(--muted); font-weight: 600; font-size: 12.5px; background: var(--bg-soft); }
.chip-ok, .chip-fail, .chip-warn { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-fail { background: var(--danger-soft); color: var(--danger); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.tips { margin: 18px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.tips li { margin: 6px 0; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 34px 0 40px; text-align: center; color: var(--muted); font-size: 13.5px; }
.site-footer p { margin: 4px 0; }
.footer-sub a { color: var(--muted); }
/* 免责声明（后台可配，留空则不显示） */
.footer-disclaimer {
  max-width: 720px; margin: 16px auto 0; padding-top: 14px;
  border-top: 1px dashed var(--line);
  text-align: left; font-size: 12.5px; line-height: 1.75; color: #8b93a3;
}
.footer-disclaimer b { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 13px; }
.footer-disclaimer p { margin: 0; white-space: normal; }

/* ---------- 进站提示弹窗（后台可配） ---------- */
.wf-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px 18px; }
.wf-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.wf-panel {
  position: relative; width: 100%; max-width: 400px;
  max-height: 80vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 22px 20px 18px;
  box-shadow: 0 26px 62px rgba(15, 23, 42, .32);
  animation: wfIn .24s ease;
}
@keyframes wfIn { from { transform: translateY(12px) scale(.97); opacity: .4; } to { transform: translateY(0) scale(1); opacity: 1; } }
.wf-title { font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 12px; }
.wf-body { font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: normal; word-break: break-word; }
.wf-panel .btn { margin-top: 18px; }
@media (max-width: 420px) {
  .wf-panel { padding: 20px 16px 16px; border-radius: 18px; }
  .wf-body { font-size: 13.5px; }
}

/* ---------- 软件图标（支持上传图片） ---------- */
.sw-item-icon img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; display: block; }
.sd-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
a.sw-item { text-decoration: none !important; color: inherit; }
.sw-item-locked { opacity: .72; }
.sw-item-locked:hover { background: var(--warn-soft); }

/* ---------- 土豪通道 ---------- */
.vip-layout .qr-card { text-align: center; }
.qr-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; margin: 14px auto 6px; box-shadow: var(--shadow);
}
.qr-box img { width: 232px; height: 232px; display: block; border-radius: 8px; }
.qr-hint { margin: 0; font-size: 12.5px; color: var(--gold); background: var(--gold-soft); border-radius: 8px; padding: 6px 10px; }
.vip-layout .vip-ip-box { margin-top: 16px; text-align: left; }

/* ---------- 客服悬浮组件 ---------- */
.sv-widget { position: fixed; z-index: 900; }
.sv-btn {
  position: relative;
  width: 56px; height: 56px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  overflow: visible; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sv-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 34px rgba(37, 99, 235, .42); }
.sv-btn > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sv-emoji { font-size: 26px; line-height: 1; }
.sv-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .5); border: 2px solid #fff;
}
.sv-panel {
  position: absolute; bottom: 70px; width: 324px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18); overflow: hidden;
}
.sv-right .sv-panel { right: 0; }
.sv-left .sv-panel { left: 0; }
.sv-panel-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: var(--brand-soft); color: var(--brand-2); font-weight: 600; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.sv-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.sv-close { margin-left: auto; border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.sv-close:hover { color: var(--ink); }
.sv-panel-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* 消息区 */
.sv-chat {
  max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 2px; -webkit-overflow-scrolling: touch;
}
.sv-row { display: flex; flex-direction: column; align-items: flex-start; }
.sv-row-user { align-items: flex-end; }
.sv-bubble {
  max-width: 86%; padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.6; word-break: break-word; white-space: pre-line;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  border-top-left-radius: 4px;
}
.sv-row-user .sv-bubble {
  background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; border: 0;
  border-top-left-radius: 12px; border-top-right-radius: 4px;
}
.sv-time { font-size: 11px; color: var(--muted); margin-top: 2px; padding: 0 2px; }

/* 快捷文字（点一下填入输入框） */
.sv-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-quick-btn {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sv-quick-btn:hover { border-color: #c7d8ff; background: var(--brand-soft); color: var(--brand); }

/* 输入行 */
.sv-input-row { display: flex; gap: 8px; align-items: stretch; }
.sv-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sv-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.sv-send {
  flex: none; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff;
  font-weight: 600; font-size: 14px; font-family: inherit;
  transition: opacity .15s ease;
}
.sv-send:hover { opacity: .92; }
.sv-send:disabled { opacity: .55; cursor: not-allowed; }
.sv-contact { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .channel-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .hero { padding: 44px 0 28px; }
  .hero-cta .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .form-grid2 { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 20px; }
  .flow-head h1 { font-size: 24px; }
  .vip-card { padding: 30px 20px; }
  .qr-box img { width: 68vw; height: 68vw; }
  .sv-panel { width: calc(100vw - 32px); }
  /* 首页：小屏微调 */
  .home-wrap { padding: 22px 15px 38px; }
  .home-title { font-size: 25px; }
  .home-sub { font-size: 14.5px; }
  .home-stat { font-size: 12.5px; padding: 7px 14px; }
  .claim-card { padding: 19px 18px 17px; border-radius: 20px; }
  .claim-ico { width: 48px; height: 48px; border-radius: 15px; }
  .claim-ico svg { width: 23px; height: 23px; }
  .claim-name { font-size: 17.5px; }
  .claim-desc { font-size: 13.5px; }
  .claim-btn { font-size: 16px; padding: 14px 16px; }
}