/* ============================================================
   资源展示站 · 前台 + 后台样式
   ------------------------------------------------------------
   设计基调：清新简约、浅色白底、圆角卡片、柔和阴影，移动优先。
   所有页面共用本文件。

   ⚠ 改样式时注意：下面的 class 名是 JS 依赖的，不能改名
      （.res / .get / .tab / .banner / .cs-* / .empty / .previews …）
      改结构可以，改名字会让 JS 找不到元素。
   ============================================================ */

:root {
  /* 主色：绿色。用在资源列表的【获取】按钮、客服按钮 */
  --brand: #17a34a;
  --brand-dark: #12833b;
  --brand-soft: #eaf7ef;

  /* 强调色：橙色。用在任务页的主行动按钮、首页的领取人数小字 */
  --accent: #ff7a1a;
  --accent-dark: #e8680a;
  --accent-soft: #fff4e8;

  /* 通道色：蓝色。用在普通通道的边框按钮 */
  --link: #2563eb;
  --link-soft: #eef4ff;

  /* 页面底色改成纯白，靠卡片投影分层，不用灰底 */
  --bg: #ffffff;
  --card: #ffffff;

  --ink: #16202b;
  --muted: #6b7684;
  --line: #eceff4;
  --warn: #b45309;
  --err: #e5484d;
  --star: #f59e0b;

  --radius: 16px;
  --radius-sm: 12px;
  /* 统一的柔和阴影，所有卡片共用 */
  --shadow: 0 4px 18px #0f172a0f, 0 1px 3px #0f172a0a;
  --shadow-lg: 0 18px 48px #0f172a1f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 84px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100%, 720px); margin: 0 auto; padding: 0 14px; }

a { color: var(--link); }

/* ---------------- 顶部条 ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffffeb;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topbar h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.topbar .back {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  background: #f4f6f9;
  border-radius: 999px;
}
.topbar .back:hover { background: #e9edf3; }

/* ---------------- 通用块 ---------------- */

/* 白色圆角卡 + 柔和阴影。边框弱化，靠阴影分层 */
.card {
  padding: 18px;
  margin: 14px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 顶部说明条：一行小字，来自后台「站点文案」 */
.banner {
  margin: 12px 0 0;
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* 领取人数：橙色小字，突出但不吵 */
.stat {
  margin: 14px 0 0;
  padding: 11px 12px;
  font-size: 13px;
  text-align: center;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #ffe1c2;
  border-radius: var(--radius-sm);
}
.stat b { font-size: 19px; color: var(--accent-dark); }

.btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .15s, background .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { color: #fff; background: var(--brand); }
.btn.primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn.ghost { color: #2f3b49; background: #f4f6f9; border-color: var(--line); }
.btn.ghost:hover { background: #e9edf3; }
.btn.small { width: auto; padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.btn.danger { color: var(--err); background: #fef2f2; border-color: #f6d4d4; }
.btn + .btn { margin-top: 9px; }

.muted { color: var(--muted); font-size: 12.5px; }
.error { color: var(--err); font-size: 13px; }
.ok { color: var(--brand-dark); font-size: 13px; }
.center { text-align: center; }

/* ---------------- 首页弹窗 ---------------- */

.mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #101827b8;
}
.mask[hidden] { display: none; }

/* 竖版圆角白卡，微弱投影 */
.popup {
  width: min(100%, 400px);
  max-height: 86vh;
  overflow: auto;
  padding: 26px 22px 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.popup h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
}
.popup .popup-body { white-space: pre-line; font-size: 14px; color: #3b4756; }
.popup .btn { margin-top: 18px; }

/* ---------------- 通道选择 ---------------- */

.channel {
  display: block;
  width: 100%;
  padding: 18px;
  margin-bottom: 14px;
  font: inherit;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.channel:hover { transform: translateY(-1px); box-shadow: 0 8px 26px #0f172a17; }
.channel h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; }
.channel p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }

/* 通道按钮：普通=蓝边框白底蓝字；土豪=浅橙底橙红字 */
.channel .chip {
  display: inline-block;
  min-width: 130px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--link);
  background: #fff;
  border: 1.5px solid var(--link);
  border-radius: 999px;
}
.channel:hover .chip { background: var(--link-soft); }

.channel.vip { border-color: #ffe1c2; }
.channel.vip .chip {
  color: #d4460f;
  background: var(--accent-soft);
  border: 1.5px solid transparent;
}
.channel.vip:hover .chip { background: #ffe9d3; }

/* ============================================================
   首页专属：标题区的两颗四角星
   用 CSS 画，不引字体图标，也不占带宽。
   ============================================================ */

.home-title {
  margin: 22px 0 6px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  line-height: 1.35;
}
/* 标题上方两颗星，左右各一 */
.home-title .spark {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 6px;
  background: var(--accent);
  vertical-align: middle;
  /* 四角星：用两个方向相反的锥形遮罩拼出来 */
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.home-title .spark.small { width: 9px; height: 9px; opacity: .65; }

.home-sub {
  margin: 0 0 4px;
  font-size: 13.5px;
  text-align: center;
  color: var(--muted);
}

/* ---------------- 搜索 / 分类 ---------------- */

.searchbar { display: flex; gap: 8px; margin: 16px 0; }
.searchbar input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.searchbar input:focus { outline: 2px solid #d8ecdf; border-color: var(--brand); }
.searchbar .btn { flex: 0 0 auto; border-radius: 999px; }

.tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  color: #47536b;
  background: #f7f8fa;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.tab.active { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 600; }

/* ---------------- 轮播 ---------------- */

.carousel {
  display: flex;
  gap: 12px;
  margin: 0 -14px 16px;
  padding: 0 14px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  overflow: hidden;
  background: #0f172a;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.slide img { display: block; width: 100%; height: 168px; object-fit: cover; }
.slide .slide-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 14px 14px;
  background: linear-gradient(transparent, #0f172ae6);
  color: #fff;
}
.slide h3 { margin: 0 0 8px; font-size: 15px; }
.slide .chip {
  display: inline-block;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
}

/* ---------------- 资源条目 ---------------- */
/* 一行一条：左图标 / 中名称+标签+星级 / 右绿色【获取】 */

.res {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.res .cover {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  background: #f2f5f9;
  border-radius: 12px;
}
.res .cover img { width: 100%; height: 100%; object-fit: cover; }
.res .cover .placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #c2ccd9;
}
.res .info { flex: 1; min-width: 0; }
.res .info h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.res .tag {
  padding: 2px 8px;
  font-size: 11px;
  color: #d4460f;
  background: var(--accent-soft);
  border-radius: 999px;
}
.res .rating { color: var(--star); letter-spacing: 1px; }
.res .get {
  flex: 0 0 auto;
  padding: 9px 20px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px #17a34a33;
}
.res .get:hover { background: var(--brand-dark); }

.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; }
.pager span { font-size: 13px; color: var(--muted); }

/* ---------------- 任务页 ---------------- */

/* 步骤标题 / 说明 / 小标签 / 补充说明
   （以前是写在 HTML 的 style="" 里的，挪进来才能被深紫皮肤接管） */
.step-title {
  margin: 20px 0 10px;
  font-size: 15px;
  font-weight: 700;
}
.step-title:first-of-type { margin-top: 16px; }
.step-text {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  white-space: pre-line;
}
.step-label {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.step-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-line;
}
/* 两个按钮并排，窄屏自动换行 */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.hint-box {
  padding: 13px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #215c34;
  background: var(--brand-soft);
  border: 1px solid #cdeedb;
  border-radius: var(--radius-sm);
}
.share-hint {
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  background: #f7f9fc;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
}

.dropzone {
  display: block;
  padding: 26px 16px;
  margin-bottom: 12px;
  text-align: center;
  background: #fbfcfe;
  border: 2px dashed #d3dcea;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { display: block; font-size: 14px; }
.dropzone small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.previews:empty { display: none; }
.previews li { position: relative; }
.previews img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.previews button {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; font-size: 14px; line-height: 1;
  color: #fff; background: #3d4453; border: 2px solid #fff; border-radius: 50%; cursor: pointer;
}

.unlock {
  padding: 16px;
  margin-top: 14px;
  background: var(--brand-soft);
  border: 1px solid #cdeedb;
  border-radius: var(--radius-sm);
}
.unlock h3 { margin: 0 0 10px; font-size: 15px; color: var(--brand-dark); }
.unlock .linkbox {
  padding: 11px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  word-break: break-all;
  background: #fff;
  border: 1px solid #cdeedb;
  border-radius: 9px;
}

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid #d8ecdf; border-color: var(--brand); }
.field textarea { resize: vertical; }

/* ============================================================
   任务页专属皮肤：深紫色底 + 白色圆角任务卡 + 橙色主按钮
   ------------------------------------------------------------
   用 body[data-page] 限定作用域，不影响其他页面的 .card / .btn.primary
   ============================================================ */

body[data-page="task"] {
  background: #2a1d4d;
  background-image:
    radial-gradient(120% 60% at 50% 0%, #3d2a6b 0%, transparent 70%),
    radial-gradient(90% 50% at 100% 100%, #4a2f6e 0%, transparent 60%);
  background-attachment: fixed;
}
/* 任务卡：白底圆角，从紫色背景上浮起来 */
body[data-page="task"] .card {
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 22px 50px #14092e66;
}
/* 顶部条也跟着深色 */
body[data-page="task"] .topbar {
  background: #2a1d4de6;
  border-bottom-color: #ffffff1f;
}
body[data-page="task"] .topbar h1 { color: #fff; }
body[data-page="task"] .topbar .back { color: #fff; background: #ffffff1f; }
body[data-page="task"] .topbar .back:hover { background: #ffffff2e; }
/* 顶部说明放在紫底上，改成半透明白字 */
body[data-page="task"] .banner {
  color: #ffffffb8;
  background: #ffffff14;
  border-color: #ffffff24;
}
/* 步骤标题 */
body[data-page="task"] h3[id^="step"] { color: #2a1d4d; font-weight: 700; }
body[data-page="task"] p[id^="step"] { color: #6b7684; }
/* 主行动按钮：橙色 */
body[data-page="task"] .btn.primary {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px #ff7a1a44;
}
body[data-page="task"] .btn.primary:hover:not(:disabled) { background: var(--accent-dark); }
/* 次要按钮（复制关键词 / 复制分享文案）也用圆角 */
body[data-page="task"] .btn.ghost {
  color: #2a1d4d;
  background: #f4f1fa;
  border-color: #e6e0f2;
  border-radius: 999px;
}

/* ---------------- 联系客服（静态悬浮） ---------------- */

.cs-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 11px 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 22px #17a34a44;
  cursor: pointer;
}

/* ---------------- 手动复制兜底 ---------------- */

/* 为什么需要这块：
   有些浏览器（尤其国产内核）的 document.execCommand('copy') 会「假成功」——
   返回 true 却没真把内容写进剪贴板，而且浏览器不给任何办法检测。
   所以除了自动复制，再给一个不依赖任何 API 的出口：把文案摆在屏幕上让人长按。 */

.copy-dialog {
  width: min(100%, 400px);
  padding: 22px 20px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.copy-dialog h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.copy-tip {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
/* 可长按选中的文案方块。点一下会自动全选，方便直接点"复制" */
.copy-text {
  max-height: 44vh;
  overflow: auto;
  padding: 14px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  /* 关键：允许长按选中。某些全局样式会连带禁掉，这里显式打开 */
  -webkit-user-select: text;
  user-select: text;
}
.copy-text::selection { background: #bfe6cd; }

/* ---------------- 后台 ---------------- */

body.admin { padding-bottom: 40px; }
.admin .wrap { width: min(100%, 1000px); }
.admin h2 { margin: 0 0 14px; font-size: 16px; }
.admin .card { padding: 18px; }

.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.admin-bar h1 { margin: 0; font-size: 18px; }
.admin-actions { display: flex; gap: 8px; }

.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
td.actions { white-space: nowrap; }
td.actions button { margin-right: 6px; }

.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #eef2f7; }

.form-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }

.shots-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.shots-cell img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

.pill-off { padding: 2px 8px; font-size: 11px; color: var(--muted); background: #eef2f7; border-radius: 999px; }
.pill-on { padding: 2px 8px; font-size: 11px; color: #215c34; background: #dcfce7; border-radius: 999px; }

/* ---------------- 客服弹窗（纯前端自动问答） ---------------- */

.cs-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
  background: #10182773;
}
.cs-mask[hidden] { display: none; }

.cs-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 370px);
  max-height: min(78vh, 580px);
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.cs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, #17a34a, #12833b);
}
.cs-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #ffffff2e;
  border-radius: 50%;
}
.cs-head-text { flex: 1; min-width: 0; }
.cs-head-text strong { display: block; font-size: 14.5px; }
.cs-head-text small { display: block; font-size: 11.5px; opacity: .85; }
.cs-close {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  font-size: 19px;
  line-height: 1;
  color: #fff;
  background: #ffffff26;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.cs-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #f7f9fd;
}
.cs-msg { display: flex; margin-bottom: 10px; }
.cs-msg span {
  max-width: 82%;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.cs-msg.me { justify-content: flex-end; }
.cs-msg.me span { color: #fff; background: var(--brand); border-color: var(--brand); }

.cs-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.cs-quick[hidden] { display: none; }
.cs-quick button {
  padding: 6px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--brand-dark);
  text-align: left;
  background: #eef7f1;
  border: 1px solid #cdeedb;
  border-radius: 999px;
  cursor: pointer;
}
.cs-quick button:hover { background: #e0f2e7; }

.cs-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.cs-input input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cs-input input:focus { outline: 2px solid #d8ecdf; border-color: var(--brand); }
.cs-input button {
  flex: 0 0 auto;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.cs-tip {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.cs-human {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dark);
  background: #eef7f1;
  border: 1px solid #cdeedb;
  border-radius: 9px;
  cursor: pointer;
}

/* ---------------- 任务页 · 操作示例区 ---------------- */

.task-example {
  margin: 14px 0 0;
}

.task-example-notice {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #6b7684;
  white-space: pre-line;
}

/* 图片自适应：宽度撑满容器、高度按比例，绝不溢出 */
.task-example-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f9fd;
}

/* ---------------- 成功页（unlock.html） ---------------- */

.pass-card {
  padding: 30px 20px 26px;
  text-align: center;
}
.pass-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 10px 24px #17a34a3d;
}
.pass-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}
.pass-text {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b7684;
  white-space: pre-line;
}
/* 这一页只有这一个要人点的东西，所以做得醒目一点 */
.btn.pass-btn {
  display: block;
  padding: 16px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f285a6, #e05c86);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 24px #e05c8638;
}
.btn.pass-btn:hover { background: linear-gradient(135deg, #ee769b, #d44f7a); }
.pass-tip {
  margin: 14px 0 0;
  font-size: 12px;
  color: #9a7a88;
}

/* ============================================================
   窄屏适配（手机）
   ============================================================ */
@media (max-width: 480px) {
  .cs-mask { padding: 0; }
  .cs-dialog {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
  }
  .cs-quick button { font-size: 12px; padding: 6px 10px; }
  /* 成功页窄屏收一点留白，按钮更好按 */
  .pass-card { padding: 24px 16px 20px; }
  .btn.pass-btn { padding: 15px; font-size: 16.5px; }

  /* 首页：手机上标题略小，星号跟着缩 */
  .home-title { font-size: 20px; margin-top: 18px; }
  .home-title .spark { width: 11px; height: 11px; }
  .home-title .spark.small { width: 8px; height: 8px; }
  /* 弹窗在窄屏占满宽度，留点边距 */
  .popup { width: 100%; padding: 22px 18px 18px; }

  /* 资源条目：手机上封面小一点，获取按钮窄一点 */
  .res { gap: 10px; padding: 10px; }
  .res .cover { flex-basis: 52px; width: 52px; height: 52px; }
  .res .get { padding: 8px 16px; font-size: 13px; }
}