/* ==========================================================================
   六维视觉 · 短视频去水印在线解析
   背景：雾蓝底 + 品牌蓝星链（Canvas）
   版式：16:9 固定宽高比舞台，内容居中，无滚动条
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  /* 底色（雾蓝系） */
  --bg-1:#F7FAFD;
  --bg-2:#EFF4FA;
  --bg-3:#E9F0F8;

  /* 品牌 */
  --brand:#4D6BFE;
  --brand-d:#3A56E0;
  --brand-l:#8DA3FF;
  --brand-w:#E8EDFF;

  /* 文字 */
  --text:#0A0A23;
  --text-2:#3D4460;
  --text-3:#6B7391;
  --text-4:#98A0B8;

  /* 面 / 线 */
  --card:rgba(255,255,255,.72);
  --card-2:rgba(255,255,255,.52);
  --line:rgba(10,10,35,.09);
  --line-2:rgba(10,10,35,.055);

  /* 状态 */
  --ok:#12A66A;
  --warn:#D98324;
  --err:#DC3B4A;

  /* 圆角 / 缓动 */
  --r-btn:10px;
  --r-card:20px;
  --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);

  --shadow-card:0 1px 2px rgba(10,10,35,.03), 0 12px 32px -12px rgba(10,10,35,.10), 0 32px 64px -32px rgba(10,10,35,.10);
  --shadow-btn:0 1px 2px rgba(10,10,35,.04), 0 8px 20px -8px rgba(77,107,254,.36);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;

  /* 主标题专用字体：思源黑体 / Noto Sans SC —— SIL OFL 开源协议，免费商用；
     回退链上全部为可免费商用的开源字体或系统内置字体，规避商用侵权 */
  --font-title:"Source Han Sans SC","Noto Sans SC","Source Han Sans CN","Noto Sans CJK SC","HarmonyOS Sans SC","Alibaba PuHuiTi 3","MiSans",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ==========================================================================
   自定义鼠标指针：使用站点 logo（飞鸟/擦除 swoosh）作为指针图形
   图形：/static/cursor.png（32×32，带白色描边以便在深色区域也能看清）
   热点：9 11 —— 取图形左上边缘第一个实心像素，行为最接近系统箭头
   如需恢复系统默认指针：把下面 body 的 cursor 一行删掉即可。
   ========================================================================== */
body{
  cursor:url("/static/cursor.png") 9 11, default;
}

/* 可点击元素仍用「手型」，避免与按钮语义冲突 */
a,button,[role="button"],.btn,[data-ws-nav] a,summary,label,
input[type="button"],input[type="submit"],input[type="reset"],
input[type="checkbox"],input[type="radio"],select{
  cursor:pointer;
}

/* 文本输入类恢复 I 型光标，否则用户无法判断是否可输入 */
input[type="text"],input[type="url"],input[type="search"],input[type="tel"],
input[type="email"],input[type="number"],input[type="password"],textarea,
[contenteditable="true"]{
  cursor:text;
}

/* 禁用 / 忙碌态优先级最高 */
[disabled],.is-disabled{cursor:not-allowed}

html{
  height:100%;
  overflow:hidden;                 /* 页面级不出滚动条 */
  -webkit-text-size-adjust:100%;
}

body{
  height:100%;
  overflow:hidden;
  background:var(--bg-2);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- 背景画布 ---------- */
#cv-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* ---------- 16:9 舞台 ---------- */
.stage-wrap{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}

.stage{
  position:relative;
  aspect-ratio:16/9;
  width:min(calc(100vw - 16px), calc((100vh - 16px) * 16 / 9));
  max-height:calc(100vh - 16px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  border-radius:22px;
  /* 舞台自身不带底色，背景画布直接透上来。
     ★ v1.4：原先这里有一圈 `box-shadow: inset 0 0 0 1px rgba(255,255,255,.5)`
       用来「界定范围」，实测在浅色背景上就是一条悬空的长方形线框，已按需求删除。 */
}

/* 舞台内所有可滚动区域自行滚动，不撑破外框 */
.stage *{min-height:0}

/* ==========================================================================
   顶部导航：完全透明、无边框
   要求 1：内容区固定 1200px 居中；logo 靠左、"管理后台"靠右，两端对齐
   ========================================================================== */
.nav{
  display:block;
  padding:clamp(13px,2vh,22px) clamp(20px,3.2vw,48px);
  background:transparent;
  border:0;
  flex:0 0 auto;
}

/* 内容区：固定 1200px 上限 + 居中；窄屏自动退化为百分比内边距 */
.nav__in{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;       /* 左右两端对齐，拉开间距 */
  gap:24px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:clamp(5px,0.55vw,9px);       /* logo 图标与文字间距也随屏宽缩放 */
  text-decoration:none;
  color:var(--text);
  transition:opacity .3s var(--ease);
  flex:0 1 auto;
  min-width:0;
}
.logo:hover{opacity:.72}
.logo svg{
  display:block;
  flex:0 0 auto;
  width:clamp(20px,1.9vw,26px);     /* logo 尺寸按屏宽缩放 */
  height:clamp(20px,1.9vw,26px);
}
/* 自定义 Logo 图片（后台「品牌标识 → 站点 Logo 图片」）：与内置图标同尺寸、等比缩放 */
.logo__img{
  display:block;
  flex:0 0 auto;
  width:clamp(20px,1.9vw,26px);
  height:clamp(20px,1.9vw,26px);
  object-fit:contain;
  border-radius:6px;
}
.logo__t{
  font-size:clamp(14px,1.35vw,17.5px);
  font-weight:600;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.logo__t b{font-weight:800;color:var(--brand)}

/* 右侧操作组：使用说明 → 管理后台（按序排列） */
.nav__acts{
  display:inline-flex;
  align-items:center;
  gap:clamp(6px,.8vw,14px);
  flex:0 0 auto;
}

/* "使用说明"：置于"管理后台"之前 */
.nav__link{
  display:inline-flex;
  align-items:center;
  padding:clamp(3px,0.4vw,5px) clamp(8px,.7vw,11px);
  border-radius:var(--r-pill);
  color:var(--text-3);
  font-size:clamp(11.5px,0.92vw,12.5px);
  text-decoration:none;
  line-height:1;
  border:1px solid transparent;
  transition:all .3s var(--ease);
  white-space:nowrap;
  min-height:32px;
}
.nav__link:hover{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border-color:var(--line);
  box-shadow:0 2px 10px -4px rgba(10,10,35,.10);
}

/* 右侧只有"管理后台" */
.nav__admin{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px,0.5vw,6px);
  padding:clamp(3px,0.4vw,5px) clamp(11px,1vw,14px);
  border-radius:var(--r-pill);
  color:var(--text-3);
  font-size:clamp(11.5px,0.92vw,12.5px);
  text-decoration:none;
  line-height:1;
  border:1px solid transparent;
  transition:all .3s var(--ease);
  flex:0 0 auto;
  white-space:nowrap;
  min-height:32px;
}
.nav__admin svg{opacity:.75;transition:transform .3s var(--ease);flex:0 0 auto}
.nav__admin:hover{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border-color:var(--line);
  box-shadow:0 2px 10px -4px rgba(10,10,35,.10);
}
.nav__admin:hover svg{transform:rotate(-8deg);opacity:1}

/* 352px 以下：隐藏"管理后台"文字，仅留图标，杜绝溢出 */
@media (max-width:352px){
  .nav__admin span{display:none}
  .nav__admin{padding:6px 9px}
  .nav__link{padding:6px 7px}
}

/* ==========================================================================
   主体：操作区
   要求 5：搜索框与文案整体上移
   要求 1（本轮）：在原有基础上再上移 50px
       实现：底部配重 = 原 clamp(30px,7vh,78px) + 50px → clamp(80px,7vh,128px)
       仅在 ≥601px（16:9 舞台）生效；≤600px 竖屏由 100dvh 撑满，内容已居中，
       不再叠加配重，避免出现上挤下空的错位。
   ========================================================================== */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;              /* 仍居中，但被下方 padding 顶上去 */
  gap:clamp(10px,1.6vh,20px);
  padding:0 clamp(20px,3.2vw,48px) clamp(80px,7vh,128px);
  /* 正常情况内容一定装得下（见文件末尾断点预算表）；
     兜底：极端比例（超扁窗口 / 极窄机）下允许内部滚动，绝不硬裁 */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.hero::-webkit-scrollbar{width:0;height:0}

.hero__head{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(7px,1.15vh,15px);          /* 主标题与副标题的呼吸感 */
  flex:0 0 auto;
  width:100%;
  min-width:0;
}

/* 平台说明：移到搜索框正下方，作为输入框的补充信息（左对齐贴在卡片左下） */
.tag{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  margin:0;
  padding:0 2px;
  background:transparent;
  border:0;
  color:var(--text-4);
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:.01em;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  width:100%;
}
.tag__dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(18,166,106,.16);
  animation:pulse 2.4s var(--ease) infinite;
  flex:0 0 auto;
}

/* 主标题（位于副标题上方，视觉主角）
   字体：思源黑体 / Noto Sans SC（SIL OFL，免费商用）
   字重：400 常规（原 800 过粗）—— 仅改字体与字重，字号与排版位置不变 */
.hero__t{
  margin:0;
  font-family:var(--font-title);
  font-size:clamp(22px,3.4vw,44px);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--text);
}
.hero__t2{
  color:var(--brand);
  font-weight:500;
  position:relative;
}

/* 副标题（位于主标题下方）
   桌面端：随屏宽等比缩放并保持单行不换行；
   移动端（≤600px）：解除 nowrap，允许自动换行，左右留白 + 行高优化可读性 */
.hero__sub{
  margin:0;
  font-weight:400;
  color:var(--text-3);
  font-size:clamp(9.5px,1.125vw,15px);
  line-height:1.5;
  white-space:nowrap;
  letter-spacing:-.005em;
}

/* ---------- 主操作卡：白色玻璃拟态 ----------
   v1.4 曾把上限提到 1760px；v1.5 按反馈**回退到原来的 1013px** ——
   当时的诉求表达有误，真正要改的是搜索框的「高度」而不是宽度。 */
.card{
  width:min(1013px,94%);
  padding:clamp(13px,1.8vh,22px) clamp(15px,1.7vw,26px) clamp(13px,1.7vh,20px);
  border-radius:var(--r-card);
  background:var(--card);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(9px,1.2vh,14px);
  max-width:100%;
}

/* 输入组件：08 方案 · 上下分层（输入行 + 浅灰工具条） */
.inputbar{
  display:block;                     /* 由 flex 改块级，内部两层 */
  padding:0;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.inputbar:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 5px rgba(77,107,254,.10);
}
.inputbar.is-bad{
  border-color:var(--err);
  box-shadow:0 0 0 5px rgba(220,59,74,.10);
  animation:shake .42s var(--ease);
}

/* 第一层：输入行
   ★ v1.5：搜索框「宽度」按反馈回退到 1013px，改为调整「高度」。
   ★ v1.6：高度按需求定为固定 80px（此前算的是 117px，偏高了）。
     做法：min-height 直接锁 80px，上下内边距收回到内容不会被撑破的范围
     （padding 上限 2×16 + 内容约 41 = 73px < 80），这样任何视口下都稳定是 80px。 */

.inputbar__row{
  display:flex;
  align-items:center;
  gap:clamp(8px,0.9vw,12px);
  padding:clamp(11px,1.4vh,16px) clamp(16px,1.5vw,22px);
  min-height:80px;
}
.inputbar__ico{
  display:flex;align-items:center;
  color:var(--text-4);
  flex:0 0 auto;
  transition:color .3s var(--ease);
}
.inputbar:focus-within .inputbar__ico{color:var(--brand)}

.inputbar__in{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-size:clamp(16px,1.15vw,18px);   /* 高度变大后字号同步放大一点，观感更协调 */
  color:var(--text);
  padding:clamp(6px,0.8vh,10px) 0;
  line-height:1.45;
}
.inputbar__in::placeholder{color:var(--text-4);font-size:clamp(14.5px,1.05vw,16px)}

/* ★ v1.4：清空 / 粘贴 已移到「开始解析」左侧，三枚按钮同一行。
   配色各成一档，一眼能分清主次：
     开始解析 = 品牌蓝（主操作）
     粘贴     = 青绿   （常用辅助）
     清空     = 灰描边 （可忽略的弱操作）
   三者统一 40px 高、10px 圆角，与提交按钮对齐。 */
.inputbar__paste{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#0E9C8F;
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  line-height:1;
  padding:0 clamp(14px,1.3vw,20px);
  border-radius:10px;
  cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
  min-height:40px;
  white-space:nowrap;
}
.inputbar__paste:hover{background:#0C8A7E}
.inputbar__paste:active{transform:scale(.96)}

/* 清空按钮：位于「粘贴」左侧，输入为空时隐藏（由 JS 切换 hidden） */
.inputbar__clear{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #D5DEEB;
  background:#fff;
  color:#5A6478;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1;
  padding:0 clamp(12px,1.1vw,17px);
  border-radius:10px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  min-height:40px;
  white-space:nowrap;
}
.inputbar__clear:hover{
  background:#F3F6FB;
  color:var(--ink);
  border-color:#B9C7DC;
}
.inputbar__clear svg{flex:0 0 auto}

/* 第二层：底部工具条 —— 左侧「已支持 N 大平台」，右侧「清空 / 粘贴 / 开始解析」 */
.inputbar__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(8px,0.85vw,13px);
  padding:clamp(7px,0.9vh,10px) clamp(10px,1.1vw,14px) clamp(7px,0.9vh,10px) clamp(16px,1.5vw,22px);
  border-top:1px solid var(--line-2);
  background:rgba(245,248,252,.72);
}
/* 「已支持 N 大平台」说明：左侧文字撑满剩余空间，右侧按钮组不收缩、整体贴右 */
.inputbar__foot > .tag{ flex:1 1 auto; min-width:0; width:auto; margin:0; padding:0; }
.inputbar__foot > .tag > span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.inputbar__foot > .inputbar__go,
.inputbar__foot > .inputbar__paste,
.inputbar__foot > .inputbar__clear{ flex:0 0 auto; }

.inputbar__go{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  line-height:1;
  color:#fff;
  padding:clamp(10px,1.1vh,13px) clamp(20px,1.8vw,26px);
  border-radius:10px;
  background:linear-gradient(135deg,var(--brand) 0%,#5F7BFF 100%);
  box-shadow:var(--shadow-btn);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
  white-space:nowrap;
  min-height:40px;
}
.inputbar__go:hover{filter:brightness(1.05);box-shadow:0 2px 6px rgba(10,10,35,.06),0 12px 26px -8px rgba(77,107,254,.46)}
.inputbar__go:active{transform:scale(.975)}
.inputbar__go[disabled]{opacity:.62;cursor:progress;filter:grayscale(.1)}
.inputbar__go-i{transition:transform .3s var(--ease)}
.inputbar__go:hover .inputbar__go-i{transform:translateX(3px)}

.inputbar__hint{
  margin:0;
  min-height:0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--err);
  padding:0 4px;
  display:none;
}
.inputbar__hint.is-on{display:block;animation:fadeUp .3s var(--ease)}

/* 平台标签：置于工具条内，紧凑横排 */
.plats{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}
.plats li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line-2);
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5;
  cursor:pointer;
  user-select:none;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.plats li i{
  width:6px;height:6px;border-radius:50%;
  background:var(--c,var(--brand));
  flex:0 0 auto;
}
.plats li:hover{
  color:var(--text);
  border-color:rgba(77,107,254,.34);
  background:#fff;
  transform:translateY(-1px);
}
.plats li:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ==========================================================================
   结果区四态（可收缩、内部滚动）
   ========================================================================== */
.stagebox{
  position:relative;
  min-height:0;
  border-top:1px solid var(--line-2);
  padding-top:clamp(9px,1.2vh,14px);
  max-height:min(34vh,320px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,10,35,.16) transparent;
}
.stagebox::-webkit-scrollbar{width:6px}
.stagebox::-webkit-scrollbar-thumb{background:rgba(10,10,35,.14);border-radius:3px}
.stagebox::-webkit-scrollbar-thumb:hover{background:rgba(10,10,35,.24)}

.pane{display:none}
.pane.is-on{display:block;animation:fadeUp .42s var(--ease)}

/* ---------- 空态：轻量提示 ---------- */
.empty__t{
  margin:0 0 4px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  letter-spacing:-.008em;
}
.empty__d{
  margin:0;
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-4);
}

/* ---------- 加载态 ---------- */
.load{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:clamp(12px,2.4vh,30px) 0;
}
.load__ring{display:flex;gap:6px}
.load__ring span{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
  animation:bounce 1.1s var(--ease) infinite;
}
.load__ring span:nth-child(2){animation-delay:.14s;opacity:.78}
.load__ring span:nth-child(3){animation-delay:.28s;opacity:.56}
.load__t{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
}
.load__bar{
  width:min(300px,72%);
  height:3px;
  border-radius:2px;
  background:rgba(10,10,35,.07);
  overflow:hidden;
}
.load__fill{
  width:6%;
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  transition:width .5s var(--ease);
}
.load__s{
  margin:0;
  font-size:11px;
  color:var(--text-4);
  min-height:1.5em;
}

/* ---------- 结果态 ---------- */
.res{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(12px,1.5vw,20px);
  align-items:start;
}
.res__media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#0A0A23;
  aspect-ratio:16/10;
  border:1px solid var(--line-2);
}
.res__video{width:100%;height:100%;display:block;object-fit:contain;background:#0A0A23}
.res__badge{
  position:absolute;
  top:8px;left:8px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:rgba(18,166,106,.94);
  color:#fff;
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
.res__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.res__title{
  margin:0;
  font-size:clamp(13px,1.15vw,15px);
  font-weight:650;
  line-height:1.45;
  color:var(--text);
  letter-spacing:-.012em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.res__meta{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.res__meta div{display:flex;align-items:baseline;gap:6px}
.res__meta dt{font-size:11px;color:var(--text-4);margin:0}
.res__meta dd{margin:0;font-size:11.5px;color:var(--text-2);font-weight:550}
.res__expire{
  margin:0;
  font-size:11px;
  color:var(--warn);
  display:flex;
  align-items:center;
  gap:5px;
}
.res__expire::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--warn);
  flex:0 0 auto;
}
.res__acts{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:1px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 15px;
  border-radius:var(--r-btn);
  font-family:inherit;
  font-size:12.5px;
  font-weight:550;
  line-height:1;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn--pri{
  background:linear-gradient(135deg,var(--brand),#5F7BFF);
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn--pri:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn--pri:active{transform:translateY(0) scale(.98)}
.btn--gho{
  background:rgba(255,255,255,.8);
  border-color:var(--line);
  color:var(--text-2);
}
.btn--gho:hover{
  background:#fff;
  color:var(--text);
  border-color:rgba(77,107,254,.3);
  transform:translateY(-1px);
}
.btn--gho:active{transform:translateY(0) scale(.98)}

/* ---------- 错误态 ---------- */
.err{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:clamp(10px,1.8vh,22px) 0;
}
.err__i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(220,59,74,.1);
  color:var(--err);
  margin-bottom:2px;
}
.err__t{margin:0;font-size:14px;font-weight:650;color:var(--text)}
.err__d{margin:0;font-size:12px;color:var(--text-2)}
.err__a{margin:0;font-size:11.5px;color:var(--text-4);max-width:46ch;line-height:1.65}
.err .btn{margin-top:6px}

/* ==========================================================================
   页脚：内容区 1200px 居中 · 居中换行排版 · 极简四项
   仅保留：logo + 备案号 / 版权信息 / 免责声明 / 使用说明
   ========================================================================== */
.foot{
  flex:0 0 auto;
  padding:clamp(13px,1.9vh,22px) clamp(20px,3.2vw,48px) clamp(11px,1.5vh,17px);
  border-top:1px solid var(--line-2);
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* 内容区：与顶部导航同宽同边界，形成上下对齐的视觉基线 */
.foot__in{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;                  /* 居中 */
  gap:clamp(5px,.75vh,9px);
}

/* ★ v1.11：版权区（logo · 版权 · 备案号 · 免责声明）合并为同一个容器，
   整块水平居中；窄屏自动换行，换行后每一行同样居中。
   （此前拆成 .foot__l1 / .foot__l2 两行各自居中，内容宽度不同导致左右边界对不齐） */
.foot__cpbox{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px clamp(7px,.75vw,11px);
  text-align:center;
  max-width:100%;
}
.foot__logo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  font-weight:700;
  color:var(--text-2);
  letter-spacing:-.012em;
}
.foot__logo svg{opacity:.78;flex:0 0 auto}
/* 自定义 Logo 图片（页脚）：与内置图标同尺寸、等比缩放 */
.foot__logo-img{opacity:.78;flex:0 0 auto;width:20px;height:20px;object-fit:contain;border-radius:4px}
/* 同一区域内字号统一（版权 / 备案号 / 免责声明同为 12px），避免一行内大小不一 */
.foot__cp,
.foot__icp,
.foot__disc{
  font-size:12px;
  line-height:1.6;
  color:var(--text-4);
}
.foot__icp{
  text-decoration:none;
  transition:color .25s var(--ease);
}
.foot__icp:hover{color:var(--brand-d)}
.foot__sep{color:var(--text-4);opacity:.5;line-height:1;user-select:none}
/* ★ v1.11：.foot__seg =「分隔符 + 紧随其后的内容」的不可拆分组合。
   窄屏换行时整组一起换，避免行尾留下孤零零的「·」；
   组内间距与容器间距取同一个值，桌面端单行时视觉与拆分写法完全一致。 */
.foot__seg{
  display:inline-flex;
  align-items:center;
  gap:clamp(7px,.75vw,11px);
  min-width:0;
  max-width:100%;
}

/* 免责声明：已并入 .foot__cpbox 同一区域（见上），此处只保留排版微调
   （"使用说明"已统一收到右上角顶栏，页脚不再重复） */
.foot__disc{
  letter-spacing:.01em;
}

/* 页脚导航：由后台「导航链接」维护（此处为 app.js 重建的容器）
   未配置任何链接时由脚本加 hidden 隐藏，不留空白段 */
.foot__nav{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px clamp(9px,.95vw,14px);
}
.foot__nav[hidden]{display:none}
.foot__link{
  font-size:11px;
  line-height:1.6;
  color:var(--text-4);
  text-decoration:none;
  transition:color .25s var(--ease);
}
.foot__link:hover{color:var(--brand-d)}

/* ==========================================================================
   动画
   ========================================================================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes bounce{
  0%,100%{transform:translateY(0);opacity:.5}
  40%{transform:translateY(-6px);opacity:1}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(18,166,106,.16)}
  50%{box-shadow:0 0 0 6px rgba(18,166,106,.04)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}
  44%{transform:translateX(5px)}
  66%{transform:translateX(-3px)}
  88%{transform:translateX(2px)}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 焦点可见 */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.inputbar__in:focus-visible{outline:none}

/* 按钮点击态统一 */
button{font-family:inherit}

/* ==========================================================================
   自适应（保持 16:9，仅调整内部密度）

   ★ 核心约束：16:9 舞台下，stage 高度完全由「宽度」决定
        stage_H ≈ stage_W × 9/16  ≈ vw × 0.5625
     所以「纵向可容纳多少内容」只跟 vw 有关，跟视口高度 vh 基本无关。
     → 所有纵向压缩断点必须按 vw 分档。
     → stagebox 的高度也必须按 vw 计算，绝不能用 vh/vmax。

   ★ 反推：hero 可用高度 = stage_H − nav_H − foot_H
     取实测均值 nav≈64px、foot≈160px（大屏），则
        hero ≈ vw×0.5625 − 224
       1280 → 496   1024 → 352   900 → 282
        820 → 237    768 → 208   600 → 114   480 → 46   360 → -22

   ★ 预算分配（hero 内容，自上而下）：
        tag + 副标题(单行) + 主标题  +  card(输入框)
     窄屏优先保 card（业务核心）与主标题，其次副标题，最后牺牲 tag。
   ========================================================================== */

/* ---------- 档位 A：≤1024px（stage≈576）—— 收紧首屏 ---------- */
@media (max-width:1024px){
  .hero{gap:6px;padding-bottom:clamp(70px,5vh,98px)}
  .hero__head{gap:5px}
  .hero__t{font-size:clamp(21px,3.5vw,34px)}
  .stagebox{max-height:min(17vw,140px)}   /* 按 vw 而非 vh：stage 高只跟宽度走 */
  .card{padding:10px 13px;gap:7px}

  /* 页脚：字号收紧，两行仍居中 */
  .foot{padding-top:clamp(8px,1.1vh,13px);padding-bottom:clamp(7px,1vh,11px)}
  .foot__logo{font-size:12.5px}
  .foot__cp,.foot__icp{font-size:11px}
  .foot__disc{font-size:10px}
}

/* ---------- 档位 B：≤900px（stage≈506）—— 压缩卡片内边距 ---------- */
@media (max-width:900px){
  .hero{gap:5px;padding-bottom:clamp(68px,4.6vh,92px)}
  .stagebox{max-height:min(18vw,135px)}
  .card{padding:9px 11px;gap:6px}
  .hero__t{font-size:clamp(20px,3.4vw,32px)}
  /* 副标题保持单行，仅随屏宽等比缩小（nowrap 不变） */
  .hero__sub{font-size:clamp(9.5px,1.2vw,13px)}
  .tag{font-size:10.5px}
  /* 页脚 */
  .foot__logo{font-size:12px}
  .foot__cp,.foot__icp{font-size:10.5px}
  .foot__disc{font-size:9.5px}
}

/* ---------- 档位 C：≤768px（stage≈432）—— 输入工具条改上下两段 ---------- */
@media (max-width:768px){
  .hero{gap:5px;padding-bottom:clamp(64px,3.6vh,82px)}
  .stagebox{max-height:min(19vw,120px)}

  /* 输入框：工具条改「标签独占一行 + 三枚按钮等宽并排」（v1.4 起工具条有三枚按钮） */
  .inputbar__foot{
    flex-wrap:wrap;
    gap:6px;
    padding:7px 10px;
  }
  .inputbar__foot > .tag{ flex:1 1 100%; }
  .inputbar__go,
  .inputbar__paste,
  .inputbar__clear{
    flex:1 1 0;
    width:auto;
    justify-content:center;
    padding:0 10px;
    min-height:34px;
    font-size:12.5px;
  }
  .inputbar__row{padding:8px 11px;gap:6px;min-height:80px}
  .inputbar__in{font-size:16px;padding:4px 0}
  .card{padding:8px 10px;gap:6px}
  .hero__head{gap:4px}

  /* 页脚 */
  .foot{padding-top:8px;padding-bottom:7px}
  .foot__in{gap:5px}
  .foot__logo{font-size:11.5px}
  .foot__cp,.foot__icp{font-size:10px}
  .foot__disc{font-size:9.5px}
  .res{grid-template-columns:1fr}
  .res__media{aspect-ratio:16/9}
}

/* ---------- 档位 D：601–820px —— 16:9 最紧区间，卡片极限压缩 ----------
   数学依据：820px → stage 452，hero 240；768px → stage 423，hero 218。
   此区间必须把 card 与 hero 头部都压到最小，才能保证 16:9 不裁切。
   （≤600px 已在下一档解锁比例，不受此约束）                                   */
@media (max-width:820px){
  .hero{gap:3px;padding-bottom:clamp(62px,3.2vh,76px)}
  .hero__head{gap:3px}
  .hero__t{font-size:clamp(17px,3.3vw,23px);line-height:1.12}
  .hero__sub{font-size:clamp(9px,1.36vw,11px)}

  .card{padding:6px 8px;gap:4px;border-radius:14px}

  .inputbar__row{padding:5px 10px;gap:5px;min-height:80px}
  .inputbar__in{font-size:16px;padding:3px 0}
  .inputbar__in::placeholder{font-size:12.5px}

  /* 最紧档位：标签独占一行，三枚按钮等宽并排，保证 16:9 不被撑破 */
  .inputbar__foot{
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    padding:4px 7px;
  }
  .inputbar__foot > .tag{ flex:1 1 100%; }
  .plats{gap:3px}
  .plats li{padding:3px 6px;font-size:10px;gap:3px}
  .plats li i{width:5px;height:5px}
  .inputbar__go,
  .inputbar__paste,
  .inputbar__clear{
    flex:1 1 0;
    width:auto;
    justify-content:center;
    padding:0 8px;
    font-size:11.5px;
    min-height:30px;
    border-radius:8px;
  }

  .stagebox{padding-top:5px;max-height:min(17vw,100px)}
  .empty__t{font-size:11px;margin-bottom:1px}
  .empty__d{font-size:10px;line-height:1.45}

  .tag{font-size:10px}
  /* 页脚：此区间高度极紧，收到最小 */
  .foot{padding-top:6px;padding-bottom:6px}
  .foot__in{gap:4px}
  .foot__logo{font-size:11px}
  .foot__logo svg{width:16px;height:16px}
  .foot__cp,.foot__icp{font-size:9.5px}
  .foot__disc{font-size:9px}
}

/* ---------- 档位 E：≤600px（竖屏手机）—— 解锁 16:9，改撑满屏 ----------
   数学依据：16:9 舞台高度 = vw × 9/16。
   360px 宽 → 194px，480px 宽 → 261px；而"标题 + 输入框"至少需 200px，
   再叠加 nav(66) + foot(122)，16:9 在手机上物理不可行。
   → ≤600px 时释放固定比例：高度改 100dvh，保留圆角/边框/内边距等视觉语言。
   ≥601px（桌面 / 平板 / 横屏手机）仍严格锁死 16:9。                              */
@media (max-width:600px){
  .stage-wrap{padding:0}

  .stage{
    width:100%;
    height:100dvh;
    max-height:none;
    aspect-ratio:auto;          /* 解锁固定比例 */
    border-radius:0;            /* 满屏无需圆角 */
    box-shadow:none;
    grid-template-rows:auto 1fr auto;
  }

  .nav{padding:12px 16px;gap:26px}
  .nav__in{gap:14px}
  .nav__link{font-size:12px;padding:6px 8px;min-height:36px}
  .nav__admin span{display:none}       /* 顶栏只留图标，避免与 logo 争宽 */
  .nav__admin{padding:8px 10px;min-height:38px}

  .hero{
    gap:8px;
    /* 竖屏已由 100dvh 撑满，内容整体居中；取消桌面端的 50px 上移配重，
       避免移动端出现"上挤下空"的错位 */
    padding:4px 14px 0;
    justify-content:center;
  }
  .hero__head{gap:6px;padding:0 4px}
  .hero__t{font-size:clamp(19px,5.6vw,25px);line-height:1.2}
  /* 副标题：移动端解除 nowrap，允许自动换行，避免横向溢出/截断/撑破容器 */
  .hero__sub{
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:100%;
    font-size:clamp(11px,2.9vw,13.5px);
    line-height:1.62;
    padding:0 2px;
  }

  .card{width:100%;padding:12px;gap:9px;border-radius:18px}
  .inputbar__row{padding:12px 13px;gap:8px;min-height:80px}
  /* 竖屏高度充裕：标签一行，三枚按钮等宽并排，触摸目标够大 */
  .inputbar__foot{
    flex-wrap:wrap;
    gap:8px;
    padding:9px 10px;
  }
  .inputbar__foot > .tag{ flex:1 1 100%; }
  .plats{justify-content:flex-start}
  .inputbar__go,
  .inputbar__paste,
  .inputbar__clear{
    flex:1 1 0;
    width:auto;
    justify-content:center;
    min-height:44px;
    padding:0 12px;
    font-size:13.5px;
  }
  .plats li{padding:5px 10px;font-size:11.5px}
  .tag{font-size:11px}

  .stagebox{max-height:none}           /* 交回自然高度，整页可滚 */

  /* 页脚：居中换行，字号回到可读区间 */
  .foot{
    padding:13px 15px calc(12px + env(safe-area-inset-bottom,0px));
    background:transparent;
  }
  .foot__in{gap:7px}
  .foot__logo{font-size:13px}
  .foot__logo svg{width:18px;height:18px}
  /* v1.11：版权区字号统一为 11.5px，整块居中（与桌面端一致，只是尺寸收小） */
  .foot__cp,.foot__icp,.foot__disc{font-size:11.5px}
  .foot__cpbox{gap:4px 9px}

  .res{grid-template-columns:1fr}
  .res__media{aspect-ratio:16/9}
}

/* ---------- 档位 F：≤400px（超窄机）—— 平台标签收成 3 个 ---------- */
@media (max-width:400px){
  .plats li:nth-child(n+4){display:none}   /* 只留抖音/快手/小红书，避免换行 */
  .hero__sub{font-size:clamp(10.5px,3.05vw,12px);line-height:1.6}
  .hero__t{font-size:clamp(17px,5.4vw,22px)}
  .foot__logo{font-size:12.5px}
  .foot__cp,.foot__icp{font-size:11px}
  .foot__disc{font-size:10px}
}

/* ---------- 兜底：宽屏但视口极矮（如 1440×600 分屏） ---------- */
@media (max-height:660px) and (min-width:1025px){
  .hero{gap:8px}
  .stagebox{max-height:min(20vw,190px)}
}
@media (max-height:540px) and (min-width:1025px){
  .card{gap:7px}
  .tag{display:none}
  .stagebox{max-height:min(20vw,150px)}
}

/* 触摸设备：加大触摸目标 */
@media (hover:none){
  .plats li{padding:8px 13px}
  .nav__admin{padding:10px 15px}
}

/* 降级：减少动态效果 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* 打印：隐藏背景与页脚装饰 */
@media print{
  #cv-bg,.nav,.foot{display:none}
  .stage{box-shadow:none}
}

/* ==========================================================================
   全站公告 · 弹层（后台「系统配置 → 全站公告」，正文留空则不弹）
   --------------------------------------------------------------------------
   旧的 .hero__notice（主标题上方一行胶囊小字）已下线：公告改为进入页面时弹层展示，
   信息更完整（支持图文排版），也不长期占位挤压首屏。
   ========================================================================== */
.ann{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 20, 40, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: ann-fade .22s var(--ease, ease) both;
}
@keyframes ann-fade{ from{ opacity:0 } to{ opacity:1 } }

.ann__panel{
  width: 100%;
  max-width: 520px;
  max-height: min(82vh, 660px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 10, 35, .06);
  border-radius: 18px;
  box-shadow: 0 24px 70px -20px rgba(10, 10, 35, .34), 0 4px 14px rgba(10, 10, 35, .06);
  overflow: hidden;
  animation: ann-pop .26s var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes ann-pop{
  from{ opacity:0; transform: translateY(14px) scale(.97) }
  to  { opacity:1; transform: none }
}

.ann__hd{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 15px;
  border-bottom: 1px solid #EEF2F8;
}
.ann__t{
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.2px;
  color: #0A0A23;
}
.ann__x{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: -3px -5px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #98A0B8;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: .15s;
}
.ann__x:hover{ background: #F2F6FD; color: #4D6BFE }

.ann__bd{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 22px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #3B4457;
  word-break: break-word;
}
.ann__bd > *:first-child{ margin-top: 0 }
.ann__bd > *:last-child{ margin-bottom: 0 }
.ann__bd p{ margin: 0 0 11px }
.ann__bd h2{ font-size: 15.5px; font-weight: 600; color: #0A0A23; margin: 20px 0 9px;
  padding-left: 10px; border-left: 3px solid #4D6BFE; line-height: 1.5 }
.ann__bd h3{ font-size: 14px; font-weight: 600; color: #0A0A23; margin: 17px 0 8px }
.ann__bd ul,.ann__bd ol{ margin: 8px 0 13px; padding-left: 21px }
.ann__bd li{ margin-bottom: 5px }
.ann__bd img{ max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; display: block }
.ann__bd a{ color: #4D6BFE; text-decoration: underline }
.ann__bd blockquote{ margin: 10px 0; padding: 9px 14px; border-left: 3px solid #4D6BFE;
  background: #F7FAFF; border-radius: 0 9px 9px 0; color: #4A5568 }
.ann__bd code{ background: #EEF2F8; padding: 1px 6px; border-radius: 5px;
  font-family: Consolas, Monaco, monospace; font-size: 12.5px }

.ann__ft{
  padding: 14px 22px 18px;
  border-top: 1px solid #EEF2F8;
  display: flex;
  justify-content: flex-end;
}
.ann__ok{
  min-width: 108px;
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #4D6BFE, #6D86FF);
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: .16s;
  box-shadow: 0 8px 20px -8px rgba(77, 107, 254, .5);
}
.ann__ok:hover{ filter: brightness(1.06); transform: translateY(-1px) }
.ann__ok:focus-visible{ outline: 2px solid #4D6BFE; outline-offset: 2px }

/* 移动端：弹层改成几乎占满可视区，正文区内滚动，按钮保持易点 */
@media (max-width: 600px){
  .ann{ padding: 14px; align-items: flex-end }
  .ann__panel{ max-width: 100%; max-height: calc(100vh - 28px); border-radius: 16px }
  .ann__hd{ padding: 16px 17px 13px }
  .ann__t{ font-size: 15px }
  .ann__bd{ padding: 15px 17px; font-size: 13px; line-height: 1.85 }
  .ann__ft{ padding: 12px 17px 16px }
  .ann__ok{ width: 100%; min-width: 0; height: 42px }
}
/* 矮屏（横屏手机 / 小笔记本）压缩留白，保证按钮始终可见 */
@media (max-height: 520px){
  .ann__panel{ max-height: calc(100vh - 20px) }
  .ann__bd{ padding-top: 12px; padding-bottom: 12px }
}

/* 图集（小红书等图文笔记）预览网格 */
.res__imgs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.res__imgs a{ display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line, #E3E9F2);}
.res__imgs img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1;}


/* ==========================================================================
   图文/图集渲染 · 最小化修复（v1.1.1）
   配套 app.js renderGallery（#imgGallery / .res__gitem 体系）
   ========================================================================== */

/* hidden 属性必须压过组件自身的 display（否则视频/图集互斥显隐失效） */
[hidden]{ display:none !important; }

/* ★ PC 端图集布局修复（本次核心）
   .res 默认 grid-template-columns: minmax(0,200px) 1fr —— 媒体列固定 200px，
   这是为竖屏视频封面设计的。图集塞进这 200px 里，每行只能放下 1 张缩略图，
   在 PC 上表现为「一条窄列的小图」，用户反馈的「图集显示兼容问题」根源在此。
   图集态改为单列：图片区占满整行，作者/标题等信息自然落到下方。 */
.res.is-gallery{ grid-template-columns:minmax(0,1fr); }

/* 图集态：媒体容器解除 16:10 定高，随内容自适应 */
.res__media.is-gallery{ aspect-ratio:auto; background:rgba(10,10,35,.04); }

/* ★ 修复：图集态下隐藏「无水印」角标。
   .res__badge 是「视频」的专用标记，模板里常驻、app.js 只改文字不控显隐，
   定位又是 position:absolute;top:8px;left:8px —— 于是图集内容（视频被 hidden）
   会留下这枚 rgba(18,166,106,.94) 的绿色胶囊，悬浮在媒体区左上角压住第一张缩略图，
   PC 端表现为「多出来一个绿色方块」。
   图集态由 renderGallery 在确实有图时才加 .is-gallery，所以这条规则
   只影响图集结果，视频结果的角标不受影响。 */
.res__media.is-gallery .res__badge{ display:none; }

/* 图集网格 */
.res__gal{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:8px;
  padding:10px;
}
/* ★ PC 端兼容修复：
   1) 比例撑高改用 padding-top（::before），不再依赖 aspect-ratio
      —— aspect-ratio 在 Safari<15、部分国产内核（X5/XWeb 旧版）不支持，
         会导致网格项高度塌陷、图片挤成一排或直接看不见；
   2) 大屏放宽栅格密度，避免 PC 上 88px 小图看不清；
   3) 图片绝对定位铺满，配合 object-fit 稳定裁切。 */
.res__gitem{
  margin:0;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line, #E3E9F2);
  background:#fff;
}
.res__gitem::before{ content:''; display:block; padding-top:100%; }
.res__gimg{
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:block; width:100%; height:100%;
  object-fit:cover;
  cursor:zoom-in;
  background:#F5F7FB;
}
.res__gcap{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;                       /* ★ 永远压在占位层之上：图取不到时下载入口也不能被盖住 */
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 7px;
  background:rgba(10,10,35,.55);
  color:#fff;
  font-size:10.5px; line-height:1.7; letter-spacing:.02em;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.res__gdl{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.55); }
.res__gdl:hover,.res__gdl:active{ color:#8DA3FF; }

/* 图片彻底加载失败时的占位（避免 PC 端出现"整片空白"像坏了一样）
   ★ v1.3：bottom 让出底部下载条的高度，占位只占图片区 ——
     失败时用户依然能一眼看到「#N 下载」，不会以为整块都废了。 */
.res__gph{
  position:absolute; top:0; left:0; right:0; bottom:24px;
  z-index:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px; font-size:11px; line-height:1.6; color:#8A93A6; background:#F5F7FB;
}
.res__gitem.is-broken .res__gimg{ display:none; }
.res__gitem.is-broken .res__gcap{ background:rgba(10,10,35,.75); }

/* 宽屏（PC）：加大缩略图尺寸，排版更舒展 */
@media (min-width:1100px){
  .res__gal{ grid-template-columns:repeat(auto-fill, minmax(134px, 1fr)); gap:10px; padding:12px; }
}

/* 窄屏：网格密度放宽 */
@media (max-width:600px){
  .res__gal{ grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:6px; padding:8px; }
}

/* 原图预览浮层（图集缩略图 1:1 裁切，长图需完整查看入口） */
.lb{
  position:fixed; inset:0; z-index:80;
  background:rgba(8,10,24,.88);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.lb__img{
  max-width:88vw; max-height:82vh;
  object-fit:contain; border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.lb__bar{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; color:#fff; font-size:13px;
}
.lb__acts{ display:flex; align-items:center; gap:16px; }
.lb__dl{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.55); }
.lb__dl:hover{ color:#8DA3FF; }
.lb__x{
  background:none; border:0; color:#fff; font-size:26px; line-height:1;
  cursor:pointer; padding:0 4px;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:26px; line-height:1;
}
.lb__nav:hover{ background:rgba(255,255,255,.26); }
.lb__nav--prev{ left:3vw; }
.lb__nav--next{ right:3vw; }
@media (max-width:600px){
  .lb__nav{ width:38px; height:38px; font-size:22px; }
  .lb__img{ max-width:94vw; max-height:76vh; }
}

/* =====================================================================
   自定义内容导航浮层（导航 type=rich 时点击弹出）
   与首页整体雾蓝 + 品牌蓝配色保持一致；深浅两种主题都能读
   ===================================================================== */
.navrich{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(16,24,48,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:navrich-in .18s ease-out;
}
@keyframes navrich-in{ from{opacity:0} to{opacity:1} }

.navrich__panel{
  width:min(760px, 100%);
  max-height:min(78vh, 720px);
  display:flex; flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line, #E3E9F2);
  box-shadow:0 24px 60px rgba(16,24,48,.22);
  animation:navrich-rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes navrich-rise{ from{transform:translateY(12px);opacity:.6} to{transform:none;opacity:1} }

.navrich__hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px;
  border-bottom:1px solid var(--line, #E3E9F2);
  background:linear-gradient(180deg, #F7FAFF, #FFFFFF);
}
.navrich__hd h3{
  margin:0; font-size:16px; font-weight:600; letter-spacing:.01em;
  color:var(--ink, #17203A);
}
.navrich__x{
  flex:none; width:30px; height:30px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line, #E3E9F2); border-radius:9px;
  background:#fff; color:var(--mut, #6B7794);
  font-size:19px; cursor:pointer; transition:.16s;
}
.navrich__x:hover{ background:#F2F6FD; color:var(--ink, #17203A); }

.navrich__bd{
  padding:20px 22px 26px;
  overflow-y:auto;
  font-size:14px; line-height:1.85;
  color:var(--ink, #17203A);
  word-break:break-word;
}
/* 富文本基础排版 */
.navrich__bd h1,.navrich__bd h2,.navrich__bd h3,.navrich__bd h4{
  margin:16px 0 8px; font-weight:600; line-height:1.4; color:var(--ink, #17203A);
}
.navrich__bd h1{ font-size:19px }
.navrich__bd h2{ font-size:17px }
.navrich__bd h3{ font-size:15.5px }
.navrich__bd h4{ font-size:14.5px }
.navrich__bd > :first-child{ margin-top:0 }
.navrich__bd p{ margin:0 0 10px }
.navrich__bd ul,.navrich__bd ol{ margin:0 0 10px; padding-left:22px }
.navrich__bd li{ margin:3px 0 }
.navrich__bd blockquote{
  margin:10px 0; padding:9px 14px;
  border-left:3px solid var(--blue, #4D6BFE);
  background:#F6F9FF; border-radius:0 8px 8px 0;
  color:var(--mut, #55607A);
}
.navrich__bd code{
  padding:1px 5px; border-radius:5px;
  background:#F1F4FA; font-size:12.5px;
  font-family:ui-monospace,Consolas,Monaco,monospace;
}
.navrich__bd pre{
  margin:10px 0; padding:12px 14px; border-radius:10px;
  background:#F7F9FC; border:1px solid var(--line, #E3E9F2);
  overflow-x:auto; font-size:12.5px; line-height:1.7;
}
.navrich__bd pre code{ padding:0; background:none }
.navrich__bd img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; display:block }
.navrich__bd a{ color:var(--blue, #4D6BFE); text-decoration:underline; text-underline-offset:2px }
.navrich__bd hr{ margin:16px 0; border:0; border-top:1px solid var(--line, #E3E9F2) }
.navrich__bd table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:13px }
.navrich__bd th,.navrich__bd td{
  padding:7px 10px; border:1px solid var(--line, #E3E9F2); text-align:left;
}
.navrich__bd th{ background:#F7F9FC; font-weight:600 }

@media (max-width:600px){
  .navrich{ padding:12px; align-items:flex-end }
  .navrich__panel{ max-height:86vh; border-radius:14px }
  .navrich__bd{ padding:16px 16px 22px; font-size:13.5px }
}

/* ==================================================================
   用户体系：顶栏用户区 + 登录/注册/找回密码/用户中心浮层
   ================================================================== */

/* ---- 顶栏用户区 ---- */
.nav__user{ display:flex; align-items:center; gap:10px }
.nav__login{
  height:32px; padding:0 15px; border:1px solid rgba(77,107,254,.28); border-radius:999px;
  background:rgba(255,255,255,.72); color:#3D57D6; font-size:12.5px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.18s; white-space:nowrap;
}
.nav__login:hover{ background:#fff; border-color:rgba(77,107,254,.5); box-shadow:0 4px 14px rgba(77,107,254,.16) }
.nav__quota{
  display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 11px; border-radius:999px;
  background:rgba(77,107,254,.10); color:#4D6BFE; font-size:12px; white-space:nowrap;
}
.nav__quota b{ font-size:13px; font-weight:700 }
.nav__uname{
  height:30px; padding:0 12px; border:1px solid rgba(20,30,60,.10); border-radius:999px;
  background:rgba(255,255,255,.75); color:#2A3550; font-size:12.5px; font-family:inherit;
  cursor:pointer; transition:.18s; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nav__uname:hover{ background:#fff; border-color:rgba(77,107,254,.4); color:#4D6BFE }

/* ---- 浮层通用 ---- */
body.ws-lock{ overflow:hidden }
.wsmask{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(14,22,40,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:wsFade .18s ease both;
}
@keyframes wsFade{ from{opacity:0} to{opacity:1} }
@keyframes wsPop{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
.wsbox{
  position:relative; width:100%; max-width:392px; max-height:88vh; overflow:auto;
  background:#fff; border-radius:16px; padding:24px 24px 22px;
  box-shadow:0 28px 70px rgba(14,22,40,.28);
  animation:wsPop .22s cubic-bezier(.16,1,.3,1) both;
  color:#1B2233;
}
.wsbox--wide{ max-width:600px }
.wsbox__x{
  position:absolute; right:14px; top:12px; width:30px; height:30px; border:0; border-radius:9px;
  background:transparent; color:#8A93A8; font-size:19px; line-height:1; cursor:pointer; transition:.15s;
}
.wsbox__x:hover{ background:#F1F5FB; color:#2A3550 }
.wsbox__t{ font-size:16px; font-weight:600; margin:0 0 16px }

/* ---- 登录 / 注册 / 找回 标签 ---- */
.wstabs{ display:flex; gap:6px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #EEF2F8 }
.wstab{
  padding:6px 14px; border:1px solid #E3E9F2; border-radius:999px; background:#fff;
  color:#66708A; font-size:12.5px; font-family:inherit; cursor:pointer; transition:.15s;
}
.wstab:hover{ border-color:#C9D5E8; color:#1B2233 }
.wstab.on{ background:rgba(77,107,254,.10); border-color:transparent; color:#4D6BFE; font-weight:600 }

.wslead{ font-size:12.5px; color:#66708A; line-height:1.7; margin:0 0 16px }
.wslead b{ color:#4D6BFE; font-size:14px }

.wsform{ display:block }
.wsf{ display:block; margin-bottom:13px }
.wsf > span{ display:block; font-size:12.5px; color:#5A6478; margin-bottom:6px }
.wsf input{
  width:100%; height:40px; padding:0 13px; border:1px solid #DFE6F1; border-radius:10px;
  font-size:13.5px; font-family:inherit; color:#1B2233; background:#FCFDFF;
  transition:.15s; box-sizing:border-box;
}
.wsf input:focus{ outline:0; border-color:#8DA3FF; background:#fff; box-shadow:0 0 0 3px rgba(77,107,254,.12) }
.wsf__code{ display:flex; gap:8px }
.wsf__code input{ flex:1 1 auto; min-width:0 }
.wscode{
  flex:0 0 auto; height:40px; padding:0 13px; border:1px solid rgba(77,107,254,.28); border-radius:10px;
  background:rgba(77,107,254,.07); color:#3D57D6; font-size:12.5px; font-family:inherit;
  cursor:pointer; white-space:nowrap; transition:.15s;
}
.wscode:hover:not(:disabled){ background:rgba(77,107,254,.13) }
.wscode:disabled{ opacity:.6; cursor:default }

.wsbtn{
  width:100%; height:42px; margin-top:6px; border:0; border-radius:11px;
  background:linear-gradient(135deg,#4D6BFE,#6E88FF); color:#fff; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.18s; letter-spacing:.06em;
  box-shadow:0 8px 20px rgba(77,107,254,.26);
}
.wsbtn:hover{ filter:brightness(1.05); box-shadow:0 10px 24px rgba(77,107,254,.34) }
.wsbtn:disabled{ opacity:.6; cursor:default }
.wsbtn--sm{ width:auto; height:40px; margin:0; padding:0 18px; font-size:13px; letter-spacing:0 }
.wsghost{
  height:36px; padding:0 16px; border:1px solid #E3E9F2; border-radius:10px; background:#fff;
  color:#66708A; font-size:12.5px; font-family:inherit; cursor:pointer; transition:.15s;
}
.wsghost:hover{ border-color:#C9D5E8; color:#1B2233 }

.wshint{ font-size:12px; color:#66708A; line-height:1.7; margin:6px 0 0; min-height:16px }
.wshint--err{ color:#C0392B }
.wshint--ok{ color:#1F7848 }

/* ============================================================
   用户中心（v1.18 重设计）
   分区式工作台：身份卡 / 数据仪表 / 快捷操作 / 兑换 / 流水 / 账号信息
   ============================================================ */

/* ---- ① 头部身份卡 ---- */
.uc__hd{
  display:flex; align-items:center; gap:13px; padding:15px 16px; margin:0 0 14px;
  border-radius:14px; border:1px solid rgba(77,107,254,.14);
  background:linear-gradient(135deg,rgba(77,107,254,.09),rgba(141,163,255,.045));
}
.uc__av{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 8px 18px -8px rgba(20,35,80,.5);
}
.uc__hdmain{ flex:1 1 auto; min-width:0 }
.uc__hname{ font-size:15px; font-weight:700; color:#1B2233; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.uc__hmail{ font-size:12px; color:#66708A; line-height:1.5; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.uc__badge{
  flex:0 0 auto; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(31,120,72,.10); color:#1F7848;
}

/* ---- ② 数据仪表 ---- */
.uc__dash{
  display:grid; grid-template-columns:1.05fr 1fr; gap:14px; margin-bottom:14px;
  padding:16px; border-radius:14px; border:1px solid #E9EEF7; background:#FBFCFF;
}
.uc__big{ display:flex; flex-direction:column; justify-content:center; gap:1px }
.uc__biglabel{ font-size:11.5px; color:#7C879E; letter-spacing:.02em }
.uc__big{ position:relative }
.uc__big b{ font-size:34px; font-weight:800; color:#4D6BFE; line-height:1.12;
  font-variant-numeric:tabular-nums }
.uc__bigunit{ position:absolute; right:2px; bottom:5px; font-size:11.5px; color:#8A93A8 }
.uc__meter{ display:flex; flex-direction:column; justify-content:center; gap:6px }
.uc__mrow{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:#5A6478 }
.uc__mrow b{ font-size:14px; font-weight:700; color:#1B2233; font-variant-numeric:tabular-nums }
.uc__bar{ height:7px; border-radius:999px; background:#E9EEF7; overflow:hidden; margin-top:2px }
.uc__bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#4D6BFE,#8DA3FF); transition:width .5s cubic-bezier(.16,1,.3,1) }
.uc__barfoot{ font-size:10.5px; color:#8A93A8; text-align:right }

/* ---- ③ 快捷操作 ---- */
.uc__quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px }
.uc__qbtn{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 6px;
  border:1px solid #E3E9F2; border-radius:12px; background:#fff; cursor:pointer;
  font-family:inherit; transition:.16s;
}
.uc__qbtn:hover:not(.uc__qbtn--soon){ border-color:rgba(77,107,254,.42); background:#F7F9FF;
  transform:translateY(-1px); box-shadow:0 10px 22px -16px rgba(31,49,92,.5) }
.uc__qico{ font-size:19px; line-height:1 }
.uc__qtxt{ font-size:12px; color:#3A445C; font-weight:500; display:flex; align-items:center; gap:4px }
.uc__qtxt i{ font-style:normal; font-size:9.5px; color:#8A93A8; font-weight:400 }
.uc__qbtn--soon{ opacity:.62; cursor:default }

/* ---- ④ / ⑤ / ⑥ 通用小节 ---- */
.uc__sec{ margin-bottom:18px }
.uc__sec h4{ font-size:13.5px; font-weight:600; margin:0 0 8px; color:#1B2233 }
.uc__sechd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.uc__sechd h4{ margin:0 }
.uc__filt{ display:flex; gap:3px; padding:2px; border-radius:9px; background:#F2F5FB }
.uc__ftab{
  padding:4px 11px; border:0; border-radius:7px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:11.5px; color:#66708A; transition:.14s;
}
.uc__ftab:hover{ color:#1B2233 }
.uc__ftab.on{ background:#fff; color:#4D6BFE; font-weight:600; box-shadow:0 2px 6px -3px rgba(31,49,92,.34) }

.uc__redeem{ display:flex; gap:8px; margin-top:8px }
.uc__redeem input{
  flex:1 1 auto; min-width:0; height:40px; padding:0 13px; border:1px solid #DFE6F1; border-radius:10px;
  font-size:13.5px; font-family:Consolas,Monaco,monospace; letter-spacing:.05em; text-transform:uppercase;
  background:#FCFDFF; color:#1B2233; box-sizing:border-box;
}
.uc__redeem input:focus{ outline:0; border-color:#8DA3FF; background:#fff; box-shadow:0 0 0 3px rgba(77,107,254,.12) }

/* ---- 流水 ---- */
.uc__logs{ max-height:246px; overflow:auto; border:1px solid #EEF2F8; border-radius:11px }
.uc__lrow{ display:flex; gap:10px; padding:9px 14px; font-size:12.5px; color:#3A445C; border-bottom:1px solid #F4F7FC }
.uc__lrow:last-child{ border-bottom:0 }
.uc__lrow > span:nth-child(1){ flex:0 0 118px; color:#8A93A8; font-family:Consolas,Monaco,monospace; font-size:11.5px }
.uc__lrow > span:nth-child(2){ flex:1 1 auto }
.uc__lrow > span:nth-child(3){ flex:0 0 52px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums }
.uc__lrow .up{ color:#1F7848 }
.uc__lrow .down{ color:#C0392B }
.uc__lrow--hd{ background:#F8FAFE; color:#8A93A8; font-size:11.5px; position:sticky; top:0; z-index:1 }
.uc__lrow--hd > span:nth-child(3){ color:#8A93A8; font-weight:400 }
.uc__none{ padding:18px; text-align:center; color:#8A93A8; font-size:12.5px }
.uc__morewrap{ margin-top:8px; text-align:center }
.uc__more{
  padding:7px 18px; border:1px solid #E3E9F2; border-radius:9px; background:#fff;
  font-family:inherit; font-size:12px; color:#66708A; cursor:pointer; transition:.15s;
}
.uc__more:hover{ border-color:rgba(77,107,254,.4); color:#4D6BFE; background:#F7F9FF }

/* ---- 账号信息 ---- */
.uc__sec--info{ padding-top:14px; border-top:1px solid #EEF2F8 }
.uc__info{ display:flex; flex-direction:column; gap:9px }
.uc__irow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px }
.uc__irow span{ color:#8A93A8; flex:0 0 auto }
.uc__irow b{ color:#1B2233; font-weight:500; text-align:right; word-break:break-all }

.uc__foot{ display:flex; justify-content:flex-end; padding-top:12px; border-top:1px solid #EEF2F8; margin-top:4px }


/* ---- 轻提示 ---- */
.wstoast{
  position:fixed; left:50%; bottom:8%; transform:translateX(-50%) translateY(8px);
  padding:10px 18px; border-radius:11px; background:rgba(20,28,48,.92); color:#fff;
  font-size:12.5px; line-height:1.5; z-index:95; pointer-events:none; opacity:0; max-width:82vw;
  text-align:center; transition:opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.wstoast.on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ---- 窄屏 ---- */
@media (max-width:900px){
  .nav__quota{ display:none }
  .nav__login{ padding:0 12px }
}
@media (max-width:600px){
  .wsmask{ padding:0; align-items:flex-end }
  .wsbox{ max-width:none; border-radius:16px 16px 0 0; padding:22px 18px 26px; max-height:92vh }
  .wsbox--wide{ max-width:none }
  .uc__lrow > span:nth-child(1){ flex:0 0 96px; font-size:11px }
  .nav__uname{ max-width:96px }
  /* 用户中心：仪表与快捷操作收成单列，避免小屏挤压 */
  .uc__dash{ grid-template-columns:1fr; gap:12px }
  .uc__big{ flex-direction:row; align-items:baseline; gap:8px }
  .uc__bigunit{ position:static }
  .uc__quick{ gap:7px }
  .uc__qbtn{ padding:11px 4px }
  .uc__qtxt{ font-size:11.5px }
}


/* ==========================================================================
   v1.9 · 移动端「链接导航」折叠
   --------------------------------------------------------------------------
   ★ 要解决的问题
     实测 390px 视口：顶栏内容宽 433px（logo 105 + 4 个操作项 314 + 间距），
     而可用宽只有 358px。又因为 .stage 是 overflow:hidden，
     超出的「登录 / 注册」被静默裁切 —— 页面不出现横向滚动条，但按钮点不到。
   ★ 解决方式
     把「链接导航」收进 #navDrop 下拉浮层，由 #navMore 按钮开合；
     「登录 / 注册」与「管理后台」留在浮层之外，保证登录入口始终可见可点。
   ★ 桌面端不做任何折叠
     #navDrop 是 display:contents，子项直接参与 .nav__acts 的 flex 布局，
     视觉、顺序与旧版完全一致（[导航项…] [登录/剩余次数] [管理后台]）。
   ★ v1.12 位置还原
     #navMore / #navDrop 在模板中的位置已回到「登录 / 注册」之前，
     与最初引入折叠时一致 → PC 端顶栏顺序恢复为
     [登录 / 注册] [使用说明 · 免责声明 · 7is导航]，即旧版布局。
     手机端：logo 与「登录 / 注册」按 margin-left:auto 靠右收拢，
     开关按钮紧随其后靠右停靠，下拉浮层仍以 right:0 与顶栏右边界对齐。
   ========================================================================== */

/* 折叠开关：桌面隐藏，仅窄屏出现 */
.nav__more{
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(3px,0.4vw,5px) clamp(9px,.8vw,12px);
  border-radius:var(--r-pill);
  color:var(--text-3);
  font-size:clamp(11.5px,0.92vw,12.5px);
  font-family:inherit;
  line-height:1;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:all .3s var(--ease);
  white-space:nowrap;
  min-height:32px;
  flex:0 0 auto;
}
.nav__more:hover{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border-color:var(--line);
  box-shadow:0 2px 10px -4px rgba(10,10,35,.10);
}
.nav__more svg{ display:block; transition:transform .25s var(--ease) }
.nav__more[aria-expanded="true"] svg{ transform:rotate(90deg) }

/* 导航链接容器：桌面端"透明"，子项直接平铺进顶栏 */
.navdrop{ display:contents }

@keyframes navdropIn{
  from{ opacity:0; transform:translateY(-6px) }
  to{ opacity:1; transform:none }
}

/* ---------- ≤768px：折叠生效 ---------- */
@media (max-width:768px){
  .nav__acts{ position:relative }        /* 作为下拉浮层的定位参照 */
  .nav__more{ display:inline-flex }

  .navdrop{
    display:none;                        /* 默认收起（用 .open 展开，不用 hidden 属性：
                                            桌面端需要 display:contents 常显） */
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:30;
    min-width:152px;
    max-width:min(74vw, 260px);
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    padding:8px;
    border-radius:14px;
    background:var(--card, #FFFFFF);
    border:1px solid var(--line, rgba(20,30,60,.12));
    box-shadow:0 18px 42px -16px rgba(14,22,40,.36);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    animation:navdropIn .2s cubic-bezier(.16,1,.3,1) both;
  }
  .navdrop.open{ display:flex }

  /* 每条链接整行铺满、左对齐，触摸目标 ≥40px（外观色仍由皮肤决定） */
  .navdrop .nav__link{
    display:flex;
    width:100%;
    justify-content:flex-start;
    min-height:40px;
    padding:0 13px;
    text-align:left;
  }
}

/* ==========================================================================
   v1.9 · 页脚防溢出
   --------------------------------------------------------------------------
   实测 390px：「© 2026 六维视觉 · 萌哒(广州)文化传媒有限公司」单元素宽 238px，
   父级（现为 .foot__cpbox）是 flex + justify-content:center，超宽子项会向两侧溢出
   （右边界到 396 > 视口 390），表现为版权行右侧被裁。
   修法：flex 子项放开收缩（min-width:0）+ 限制最大宽（max-width:100%）
        + 长词允许断行（overflow-wrap:anywhere）。
   ========================================================================== */
.foot__cpbox > *,
.foot__seg > *,
.foot__nav > *{
  min-width:0;
  max-width:100%;
}
.foot__cp,
.foot__icp,
.foot__disc,
.foot__link{
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width:600px){
  /* 版权区：允许整行换行，避免「版权 + 分隔符 + 备案号 + 声明」挤在一行溢出 */
  .foot__cpbox{ row-gap:2px }
}

/* ==========================================================================
   v1.11 · 页脚「版权 + 声明」同区域居中（桌面端与移动端表现一致）
   --------------------------------------------------------------------------
   ★ v1.10 的做法：≤600px 时把页脚改成「左对齐、铺满容器」，用来消除
     「两行各自居中、内容宽度不同 → 左右边界对不齐」的问题。
   ★ v1.11 按需求调整：版权与声明合并成同一个区域（.foot__cpbox）后，
     这块内容在**桌面端与移动端都整体水平居中**；窄屏换行后每行同样居中。
     因此这里把 v1.10 的移动端左对齐规则整体撤销，回到居中，并让页脚导航同轴居中。
   ========================================================================== */
@media (max-width:600px){
  .foot__in{ align-items:center }

  .foot__cpbox{
    justify-content:center;
    text-align:center;
  }
  .foot__cpbox > *,
  .foot__seg > *{ text-align:center }

  /* 窄屏必然换行成多行，此时「·」会落在行首或行尾显得多余，
     直接隐藏；各段之间仍有 .foot__cpbox 的 gap 负责间距，观感更干净 */
  .foot__sep{ display:none }

  /* 免责声明：解除行宽限制，整块自然换行并保持居中 */
  .foot__disc{ max-width:100% }

  /* 页脚导航同步居中，整块页脚共用一条中轴 */
  .foot__nav{ justify-content:center }
}

/* ==========================================================================
   v1.12 · PC 端页脚「版权 / 声明」分列排版
   --------------------------------------------------------------------------
   ★ 需求：PC 端底部把「版权信息（logo · 版权 · 备案号）」与
     「本站仅提供个人学习用途…」拆成上下两行，各自独占一行、层次清晰；
     移动端保持原有样式不变。
   ★ 怎么做到「只对 PC 生效、且不加任何多余节点」：
     .foot__cpbox 是 flex + flex-wrap:wrap 的流式容器，给它里面的
     .foot__seg--disc（免责声明那一组）在 PC 段加上 flex-basis:100%，
     该组便会被挤到下一行、独占整行 → 自动形成上下两行的分列排版；
     移动端不写这条规则，所以仍是原来的一整段居中换行。
   ★ 该行开头的「·」在换行后没有承接对象，隐藏掉更干净。
   ★ 两行都是 justify-content:center，保持同一中轴、两端对齐良好。
   ========================================================================== */
@media (min-width:601px){
  .foot__cpbox .foot__seg--disc{
    flex: 1 1 100%;      /* 独占一行 */
    justify-content: center;
  }
  .foot__cpbox .foot__seg--disc .foot__sep{ display: none }
}

/* ==========================================================================
   v1.18.2 · 套餐商店（购买解析次数）样式
   --------------------------------------------------------------------------
   ★ 为什么现在才补：v1.18 上线支付时，app.js 里已经写好了 renderShop() /
     showPayArea() 并输出 .shop__* 结构，但 style.css 漏掉了这一整组样式，
     等于「有骨架没皮肉」——弹窗能打开，但里面是裸 HTML，
     用户看到的就是「点了购买什么都没弹出来 / 二维码界面没出现」。
     本段把 11 个类一次补齐（grid/card/tag/name/times/price/chs/ch/sold/qrwrap/qr）。
   ★ 配色沿用个人中心同一套变量语义（品牌蓝 #4D6BFE / 描边 #E3E9F2 / 次要文字 #8A93A8），
     保证商店与用户中心视觉一致。
   ========================================================================== */

/* ---- 套餐卡片网格 ---- */
.shop__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
  gap:12px;
  margin-top:4px;
}

/* ---- 单张套餐卡 ---- */
.shop__card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px 16px 14px;
  border:1px solid #E3E9F2;
  border-radius:16px;
  background:#fff;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.shop__card:hover{
  border-color:rgba(77,107,254,.42);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(20,35,80,.42);
}

/* 角标（超值 / 热卖…）：取品牌色，白字 */
.shop__tag{
  position:absolute; top:0; right:0;
  padding:3px 10px 3px 11px;
  border-radius:0 16px 0 12px;
  background:linear-gradient(135deg,#4D6BFE,#6E86FF);
  color:#fff; font-style:normal; font-size:10.5px; font-weight:800;
  letter-spacing:.02em;
}

.shop__name{
  font-size:14.5px; font-weight:700; color:#1B2233;
  margin-bottom:7px; padding-right:52px;   /* 给右上角角标留位 */
}

/* 「500 次解析」——数字放大、单位降级 */
.shop__times{
  font-size:12.5px; color:#5A6478; margin-bottom:8px;
}
.shop__times b{
  font-size:20px; font-weight:800; color:#1B2233;
  font-variant-numeric:tabular-nums; margin-right:3px;
}

/* 价格行：现价大、原价删除线 */
.shop__price{
  display:flex; align-items:baseline; gap:7px;
  font-size:13px; color:#4D6BFE; font-weight:700; margin-bottom:12px;
}
.shop__price b{
  font-size:26px; font-weight:900; color:#E4393C;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.shop__price s{
  font-size:11.5px; color:#A7B0C2; font-weight:400;
}

/* ---- 渠道切换（支付宝 / 微信支付 / 测试支付）---- */
.shop__chs{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:12px; margin-top:auto;   /* 贴底对齐，多张卡按钮齐平 */
}
.shop__ch{
  flex:1 1 0; min-width:0;
  padding:7px 10px;
  border:1px solid #E3E9F2; border-radius:9px;
  background:#fff;
  font-family:inherit; font-size:12px; color:#5A6478;
  cursor:pointer; transition:.15s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shop__ch:hover{ border-color:rgba(77,107,254,.42); color:#4D6BFE; background:#F7F9FF }
.shop__ch.on{
  border-color:#4D6BFE; background:#EEF2FF;
  color:#2F4FD8; font-weight:600;
  box-shadow:0 0 0 2px rgba(77,107,254,.12);
}

/* 卡片里的购买按钮占满整行 */
.shop__card .wsbtn{ width:100% }

.shop__sold{
  margin-top:7px; text-align:center;
  font-size:11px; color:#A7B0C2;
}

/* ---- 二维码区（微信 Native / 支付宝预下单）---- */
.shop__qrwrap{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 14px;
  border:1px dashed #D8E1F0; border-radius:14px;
  background:#FAFCFF; text-align:center;
}
.shop__qr{
  width:180px; height:180px; display:block;
  padding:8px; border-radius:10px; background:#fff;
  box-shadow:0 10px 26px -18px rgba(20,35,80,.5);
  image-rendering:pixelated;   /* 二维码放大时保持锐利，不糊 */
}

/* ---- 支付结果页（支付成功后替换「完成支付」区域）---- */
.shop__done{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:8px 0 2px; text-align:center;
}
.shop__doneico{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,120,72,.1); color:#1F7848;
  font-size:27px; line-height:1;
}
.shop__donet{ font-size:15px; font-weight:700; color:#1B2233 }
.shop__quota{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 26px; border-radius:14px;
  background:linear-gradient(135deg,#EEF2FF,#F7F9FF);
  border:1px solid rgba(77,107,254,.18);
}
.shop__quota b{
  font-size:34px; font-weight:900; color:#2F4FD8;
  font-variant-numeric:tabular-nums; line-height:1.05;
}
.shop__quota span{ font-size:11.5px; color:#5A6478 }

/* 支付记录明细表（订单号 / 次数 / 金额 / 时间 / 渠道） */
.shop__rec{
  width:100%; border:1px solid #EEF2F8; border-radius:12px; overflow:hidden;
}
.shop__recrow{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 14px; font-size:12.5px;
  border-bottom:1px solid #F4F7FC;
}
.shop__recrow:last-child{ border-bottom:0 }
.shop__recrow > span{ color:#8A93A8; flex:0 0 auto }
.shop__recrow > b{
  color:#1B2233; font-weight:600; text-align:right;
  word-break:break-all; font-variant-numeric:tabular-nums;
}
.shop__donectl{ display:flex; gap:8px; width:100%; margin-top:2px }
.shop__donectl .wsbtn{ flex:1 1 0 }

/* ---- 窄屏：单列，二维码略缩 ---- */
@media (max-width:600px){
  .shop__grid{ grid-template-columns:1fr; gap:10px }
  .shop__price b{ font-size:24px }
  .shop__qr{ width:164px; height:164px }
}