/* ================= 主题变量 ================= */
:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --card-sel:#f2f2f7;
  --text:#000000;
  --text2:#6c6c70;
  --text3:#8e8e93;
  --sep:rgba(60,60,67,.13);
  --sep-op:rgba(60,60,67,.29);
  --blue:#007aff;
  --fill:rgba(118,118,128,.12);
  --fill2:rgba(118,118,128,.2);
  --nav:rgba(249,249,249,.82);
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 28px rgba(0,0,0,.07);
  --shadow-l:0 18px 50px rgba(0,0,0,.16);
  --green:#34c759;
}
[data-theme="dark"]{
  --bg:#000000;
  --card:#1c1c1e;
  --card-sel:#2c2c2e;
  --text:#ffffff;
  --text2:#98989f;
  --text3:#6e6e73;
  --sep:rgba(84,84,88,.6);
  --sep-op:rgba(84,84,88,.9);
  --blue:#0a84ff;
  --fill:rgba(118,118,128,.24);
  --fill2:rgba(118,118,128,.36);
  --nav:rgba(28,28,30,.8);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 34px rgba(0,0,0,.55);
  --shadow-l:0 20px 60px rgba(0,0,0,.8);
  --green:#30d158;
}

/* ===== 跟随系统：仅在未手动指定（auto / 未设置）时生效 ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  [data-theme="auto"]{
    --bg:#000000;
    --card:#1c1c1e;
    --card-sel:#2c2c2e;
    --text:#ffffff;
    --text2:#98989f;
    --text3:#6e6e73;
    --sep:rgba(84,84,88,.6);
    --sep-op:rgba(84,84,88,.9);
    --blue:#0a84ff;
    --fill:rgba(118,118,128,.24);
    --fill2:rgba(118,118,128,.36);
    --nav:rgba(28,28,30,.8);
    --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 34px rgba(0,0,0,.55);
    --shadow-l:0 20px 60px rgba(0,0,0,.8);
    --green:#30d158;
  }
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 主题切换时平滑过渡（仅颜色，不影响布局性能） */
body,.nav,.card,.tc-bg,.shelf,.foot,.tabbar{
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
input{font:inherit}
::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--sep-op);border-radius:9px;border:2.5px solid var(--bg)}

.wrap{max-width:720px;margin:0 auto}

/* ================= 顶部导航 ================= */
.nav{
  position:sticky;top:0;z-index:90;
  background:var(--nav);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
  transition:background .4s;
}
.nav-in{max-width:720px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px}
.search{
  flex:1;display:flex;align-items:center;gap:7px;
  height:36px;padding:0 12px;border-radius:10px;
  background:var(--fill);transition:background .25s,box-shadow .25s;
}
.search:focus-within{background:var(--card);box-shadow:0 0 0 2px var(--blue)}
.search svg{width:15px;height:15px;fill:var(--text3);flex-shrink:0}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:17px;color:var(--text)}
.search input::placeholder{color:var(--text3)}
.avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,#5e5ce6,#bf5af2);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:#fff;letter-spacing:-.02em;
  position:relative;overflow:hidden;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
/* 图片模式：撑满圆形，去掉渐变底 */
.avatar.avatar-img{
  background:var(--fill);
  box-shadow:0 0 0 .5px rgba(0,0,0,.08);
}
.avatar.avatar-img img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
a.avatar:hover{transform:scale(1.07);box-shadow:0 2px 8px rgba(0,0,0,.18)}
a.avatar:active{transform:scale(.95)}
.iconbtn{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--fill);
  transition:transform .25s,background .25s;
}
.iconbtn:hover{background:var(--fill2)}
.iconbtn:active{transform:scale(.9)}

/* ================= 页头 ================= */
.pagehead{padding:26px 20px 14px}
.date{font-size:13px;font-weight:600;color:var(--text2);letter-spacing:.04em;margin-bottom:5px}
.pagehead h1{font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.12}
.pagehead .sub{font-size:15px;color:var(--text2);margin-top:7px}

/* ================= 区块 ================= */
.sec{max-width:720px;margin:0 auto;padding:30px 0 8px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 20px 12px;gap:12px}
.sec-head h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.sec-head .more{font-size:15px;color:var(--blue);flex-shrink:0}
.sec-head .more:hover{text-decoration:underline}
.sec-note{padding:0 20px 12px;font-size:14px;color:var(--text2);margin-top:-6px}

/* ================= Today 卡片 ================= */
.rail{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:0 20px;gap:12px;
}
.rail::-webkit-scrollbar{display:none}
.tcard{
  scroll-snap-align:center;flex:0 0 calc(100% - 40px);max-width:680px;
  height:412px;border-radius:22px;position:relative;overflow:hidden;
  color:#fff;box-shadow:var(--shadow-l);
  display:flex;flex-direction:column;justify-content:space-between;padding:22px;
}
/* 背景层：必须提高优先级，否则会被下方 .tcard > * 的 position:relative 覆盖，
   导致高度塌陷为 0、背景完全不可见 */
.tcard > .tc-bg{
  position:absolute;z-index:0;
  /* inset 在部分老浏览器不支持，同时写四边兜底 */
  top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;
  /* 兼容只填 url(图片) 未写 center/cover 的情况 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
}
.tc-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
}
.tc-bg::after{
  content:"";position:absolute;inset:0;
  top:0;right:0;bottom:0;left:0;
  background:radial-gradient(600px 320px at 78% 12%,rgba(255,255,255,.26),transparent 62%);
  pointer-events:none;
}
/* 只提升内容层，明确排除背景层 */
.tcard > *:not(.tc-bg){position:relative;z-index:1}
.tc-tag{font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.85}
.tc-mid{margin-top:auto}
.tc-mid h3{
  font-size:30px;font-weight:700;letter-spacing:-.028em;line-height:1.15;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.tc-mid p{
  font-size:14.5px;line-height:1.5;opacity:.9;margin-top:9px;max-width:400px;
  /* 防止后台填写过长导致溢出卡片 */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.tc-app{
  margin-top:16px;display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:.5px solid rgba(255,255,255,.3);
}
.tc-app .mini{
  width:40px;height:40px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  position:relative;overflow:hidden;
}
.tc-app .mini[data-img]{background:rgba(255,255,255,.9)}
.tc-app .mt{flex:1;min-width:0}
.tc-app .mt b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.tc-app .mt span{font-size:11.5px;opacity:.82}
.tc-app .miniget{
  width:30px;height:30px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:#111;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:transform .22s,opacity .22s;
  box-sizing:border-box;position:relative;overflow:hidden;
}
.tc-app .miniget:hover{transform:scale(1.08)}
.tc-app .miniget:active{transform:scale(.9)}
.tc-app .miniget.get-off{background:rgba(255,255,255,.55);color:#666;cursor:not-allowed;opacity:.7}
.tc-app .miniget.get-off:hover{transform:none}
/* 轮播内按钮点击转圈（深色描边适配白底） */
.tc-app .miniget.busy .ico-cloud{opacity:0}
.tc-app .miniget.busy::after{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  border-top-color:#111;
  animation:spin .7s linear infinite;
}
.tc-app .miniget.open{background:rgba(255,255,255,.75);pointer-events:none}
.tc-app .miniget.open::after{display:none}
button.miniget{border:0;cursor:pointer;-webkit-appearance:none;appearance:none}

/* 整卡可点击：手型光标 + 轻微缩放反馈 */
.tcard-link{cursor:pointer}
.tcard-link:active{transform:scale(.995)}
.tcard > .tc-bg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tcard-link:hover > .tc-bg{transform:scale(1.03)}
.tcard-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.tcard-center{align-items:center;text-align:center}
.tcard-center .tc-mid{width:100%;max-width:460px;margin-left:auto;margin-right:auto}
.tcard-center .tc-app{margin-left:auto;margin-right:auto}

.dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.dot{
  width:6.5px;height:6.5px;border-radius:50%;
  background:var(--text3);opacity:.3;cursor:pointer;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.dot.on{opacity:1;width:20px;border-radius:3px;background:var(--blue)}

/* ================= 分类 chips ================= */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 20px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;height:34px;padding:0 16px;border-radius:17px;
  background:var(--card);border:.5px solid var(--sep);
  font-size:14px;color:var(--text);display:flex;align-items:center;gap:6px;
  transition:all .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.chip:hover{transform:translateY(-1px)}
.chip.on{background:var(--text);color:var(--bg);border-color:transparent;font-weight:600}

/* ================= 卡片组 ================= */
.group{margin:0 20px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.snap{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.snap::-webkit-scrollbar{display:none}
.col{flex:0 0 100%;scroll-snap-align:start;min-width:0}

.row{display:flex;align-items:center;gap:12px;padding:10px 14px;position:relative;transition:background .18s}
.row:active{background:var(--card-sel)}
.row+.row::before{content:"";position:absolute;top:0;left:92px;right:0;height:.5px;background:var(--sep)}
.rank{width:22px;flex-shrink:0;text-align:center;font-size:19px;font-weight:700;color:var(--text2);letter-spacing:-.02em}
.ico{
  width:62px;height:62px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:31px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.16),inset 0 .5px 0 rgba(255,255,255,.3);
}
/* 图片图标模式 */
.ico[data-img]{background:var(--fill);box-shadow:0 2px 6px rgba(0,0,0,.16)}
.ico-img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.ico-emoji{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.ico-fallback{display:none}
.ico::after{
  content:"";position:absolute;top:0;left:0;right:0;height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
}
.meta{flex:1;min-width:0}
.nm{font-size:16.5px;font-weight:400;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct{font-size:13px;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mline{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:var(--text3)}
.stars{color:#ff9f0a;font-size:10.5px;letter-spacing:-.5px}
.mline i{width:2.5px;height:2.5px;border-radius:50%;background:var(--text3);opacity:.7}
.chart-row .rank{width:26px}
.chart-row .ico{width:58px;height:58px;font-size:29px;border-radius:13px}

/* 获取按钮 */
/* App Store 风格云朵下载按钮（纯图标，圆形） */
.get{
  flex-shrink:0;width:34px;height:34px;padding:0;
  border-radius:50%;background:var(--fill);color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;box-sizing:border-box;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,color .22s;
  position:relative;overflow:hidden;
}
.get:hover{background:var(--fill2)}
.get:active{transform:scale(.88)}
/* button 版云朵按钮（弹窗模式）与 <a> 保持一致 */
button.get{
  border:0;cursor:pointer;
  font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.ico-cloud{display:block;pointer-events:none}
/* 点击后：云朵隐藏，转圈 */
.get.busy{pointer-events:none}
.get.busy .ico-cloud{opacity:0}
.get.busy::after{
  content:"";position:absolute;top:50%;left:50%;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;
  border:2px solid var(--fill2);
  border-top-color:var(--blue);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* 已触发：蓝底白图标 */
.get.open{background:var(--blue);color:#fff;pointer-events:none}
.get.open::after{display:none}
/* 未填下载地址的禁用态 */
.get-off{
  background:var(--fill);color:var(--text3);
  cursor:not-allowed;opacity:.5;
}

/* ================= 分类网格 ================= */
.cats{margin:0 20px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr)}
.cat{display:flex;align-items:center;gap:12px;padding:13px 14px;position:relative;min-width:0;transition:background .18s}
.cat:active{background:var(--card-sel)}
.cat .sq{
  width:46px;height:46px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.16),inset 0 .5px 0 rgba(255,255,255,.28);
}
.cat b{font-size:14.5px;font-weight:500;letter-spacing:-.01em;display:block}
.cat span{font-size:11.5px;color:var(--text3);display:block;margin-top:1px}

/* ================= 发现页 · 精选应用网格 =================
   注意：外层 .sec 限宽 720px，做 3 列会让每列只剩 ~90px 放文字，
   名称会被截断得只剩一两个字。因此固定 2 列，窄屏降为 1 列。 */
.dgrid{
  margin:0 20px;background:var(--card);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:repeat(2,1fr);
}
.dcard{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;min-width:0;
  /* 行分隔线 */
  border-bottom:.5px solid var(--sep);
  transition:background .18s;
}
/* 列分隔线：2 列布局下只在左列加右边框 */
.dcard:nth-child(odd){border-right:.5px solid var(--sep)}
/* 最后一行不显示底边线（1 个或 2 个，按数量自动适配） */
.dcard:last-child{border-bottom:0}
.dcard:nth-last-child(2):nth-child(odd){border-bottom:0}

.dcard .ico{width:52px;height:52px;border-radius:12px;font-size:25px}
.dmeta{flex:1;min-width:0}
.dmeta b{
  font-size:15px;font-weight:600;letter-spacing:-.01em;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dmeta .ct{
  font-size:12px;color:var(--text3);display:block;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dmeta .rt{
  font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:4px;margin-top:3px;
}
.dmeta .rt .stars{letter-spacing:-.5px;color:#ff9f0a;font-size:10.5px}

/* 窄屏单列：去掉列分隔线 */
@media (max-width:520px){
  .dgrid{grid-template-columns:1fr}
  .dcard:nth-child(odd){border-right:0}
  .dcard:nth-last-child(2):nth-child(odd){border-bottom:.5px solid var(--sep)}
}

/* ================= 空状态 ================= */
.none{
  margin:0 20px;padding:52px 20px;text-align:center;
  background:var(--card);border-radius:16px;color:var(--text3);font-size:14px;
  box-shadow:var(--shadow);
}
.none em{display:block;font-size:40px;font-style:normal;margin-bottom:10px;opacity:.45}

/* ================= 底部 ================= */
.shelf{
  margin:34px 20px 0;border-radius:20px;padding:34px 24px;
  background:linear-gradient(135deg,#0a84ff,#5e5ce6 58%,#bf5af2);
  color:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-l);
}
.shelf::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 260px at 50% 0%,rgba(255,255,255,.28),transparent 62%);
}
.shelf h2{position:relative;font-size:26px;font-weight:700;letter-spacing:-.025em}
.shelf p{position:relative;margin-top:9px;font-size:14.5px;opacity:.9}
.shelf .wbtn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;height:44px;padding:0 26px;border-radius:22px;
  background:#fff;color:#111;font-size:16px;font-weight:600;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.shelf .wbtn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.3)}
/* 未填地址时的禁用态 */
.shelf .wbtn-off{background:rgba(255,255,255,.55);color:#555;cursor:default}
.shelf .wbtn-off:hover{transform:none;box-shadow:none}

.foot{margin-top:44px;padding:28px 20px 40px;border-top:.5px solid var(--sep)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
/* 链接样式由后台「底部栏设置」控制，通过 CSS 变量注入 */
.foot-links a{
  font-size:var(--fl-size,12.5px);
  color:var(--fl-color,var(--blue));
  text-decoration:none;
  line-height:1.65;
  transition:opacity .2s;
}
.foot-links a:hover{opacity:.72;text-decoration:underline}
/* 始终显示下划线的模式（后台可切换） */
.foot-links.underline a{text-decoration:underline}
/* 未填地址的链接项：显示为普通文字 */
.foot-links .nolink{
  font-size:var(--fl-size,12.5px);
  color:var(--text3);
  line-height:1.65;
}
.foot p{font-size:12px;color:var(--text3);text-align:center;line-height:1.65;max-width:520px;margin:0 auto}
/* 站点介绍 */
.site-intro{
  font-size:13px;color:var(--text2);
  margin-bottom:10px !important;
  max-width:560px;
}

/* ================= 企业证书状态横幅 ================= */
.certbar{
  margin:14px 20px 0;
  padding:13px 15px;
  border-radius:14px;
  display:flex;align-items:center;gap:12px;
  transition:background-color .3s;
}
.cb-ico{font-size:20px;flex-shrink:0;line-height:1}
.cb-txt{flex:1;min-width:0}
.cb-txt b{
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;display:block;
}
.cb-txt span{
  font-size:12.5px;color:var(--text2);display:block;margin-top:2px;
  line-height:1.5;
}
.cb-exp{
  font-size:11.5px;color:var(--text3);flex-shrink:0;
  font-variant-numeric:tabular-nums;
  padding-left:9px;border-left:.5px solid var(--sep);
}

/* --- 状态配色（亮色） --- */
.cert-ok{background:rgba(52,199,89,.13)}
.cert-warn{background:rgba(255,159,10,.15)}
.cert-bad{background:rgba(255,59,48,.12)}
.cert-none{background:var(--fill)}
/* 掉签：最醒目，红底 + 脉动提示 */
.cert-revoked{background:rgba(255,59,48,.16);box-shadow:inset 0 0 0 1px rgba(255,59,48,.28)}
.cert-revoked .cb-ico{animation:cbPulse 1.6s ease-in-out infinite}
@keyframes cbPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* --- 深色模式：手动锁定深色 --- */
[data-theme="dark"] .cert-ok{background:rgba(48,209,88,.2)}
[data-theme="dark"] .cert-warn{background:rgba(255,214,10,.18)}
[data-theme="dark"] .cert-bad{background:rgba(255,69,58,.18)}
[data-theme="dark"] .cert-revoked{background:rgba(255,69,58,.22);box-shadow:inset 0 0 0 1px rgba(255,69,58,.32)}

/* --- 深色模式：跟随系统（auto） --- */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .cert-ok{background:rgba(48,209,88,.2)}
  html:not([data-theme="light"]) .cert-warn{background:rgba(255,214,10,.18)}
  html:not([data-theme="light"]) .cert-bad{background:rgba(255,69,58,.18)}
  html:not([data-theme="light"]) .cert-revoked{background:rgba(255,69,58,.22)}
}

@media (max-width:560px){
  .certbar{margin:12px 14px 0;padding:12px 13px}
  .cb-txt b{font-size:14px}
  .cb-txt span{font-size:12px}
}

/* ================= 公告弹窗 ================= */
.nt-mask{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;
}
.nt-mask.on{opacity:1;visibility:visible}

.nt-box{
  width:100%;max-width:400px;
  background:var(--card);border-radius:20px;
  padding:26px 22px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  transform:scale(.9);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.3,1.1),opacity .28s ease;
  max-height:86vh;overflow-y:auto;
}
.nt-mask.on .nt-box{transform:scale(1);opacity:1}

.nt-head{text-align:center;margin-bottom:14px}
.nt-ico{font-size:34px;display:block;margin-bottom:6px}
.nt-head h2{font-size:19px;font-weight:700;letter-spacing:-.02em}

.nt-body{
  font-size:14px;line-height:1.75;color:var(--text2);
  background:var(--fill);border-radius:13px;
  padding:14px 15px;margin-bottom:16px;
  white-space:pre-wrap;word-break:break-word;
}

.nt-pwd{margin-bottom:6px}
.nt-pwd input{
  width:100%;height:46px;border:0;border-radius:13px;
  background:var(--fill);padding:0 15px;
  font-size:16px;text-align:center;letter-spacing:.1em;
  outline:none;transition:box-shadow .2s;
}
.nt-pwd input:focus{box-shadow:0 0 0 2px var(--blue)}
.nt-pwd input.err{box-shadow:0 0 0 2px var(--red,#ff3b30)}
.nt-err{
  font-size:12.5px;color:#ff3b30;min-height:18px;
  margin-top:6px;text-align:center;
}

.nt-acts{display:flex;gap:10px;margin-top:14px}
.nt-btn{
  flex:1;height:46px;border:0;border-radius:13px;
  background:var(--blue);color:#fff;
  font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
  transition:transform .18s,opacity .2s,background .2s;
}
.nt-btn:active{transform:scale(.97)}
.nt-btn.ghost{background:var(--fill);color:var(--blue)}
.nt-btn[disabled]{opacity:.6;pointer-events:none}

/* ================= 安装方式 · 底部弹出窗口 ================= */
.sheet-mask{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;
  background:rgba(0,0,0,.4);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
}
.sheet-mask.on{opacity:1;visibility:visible}

.sheet{
  width:100%;max-width:520px;
  background:var(--card);
  border-radius:20px 20px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.22);
  max-height:86vh;overflow-y:auto;
}
.sheet-mask.on .sheet{transform:translateY(0)}

/* 顶部小横条（iOS 拖拽条视觉） */
.sheet-grab{
  width:38px;height:5px;border-radius:3px;
  background:var(--fill2);margin:0 auto 12px;
}

.sheet-head{
  display:flex;align-items:center;gap:12px;
  padding:4px 4px 14px;
  border-bottom:.5px solid var(--sep);
}
.sheet-ico .ico{width:52px;height:52px;border-radius:12px;font-size:25px}
.sheet-meta{min-width:0;flex:1}
.sheet-meta b{
  font-size:16.5px;font-weight:600;letter-spacing:-.01em;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sheet-meta span{
  font-size:12.5px;color:var(--text3);display:block;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sheet-body{padding:6px 0 4px}
.sheet-opt{
  display:flex;align-items:center;gap:12px;
  padding:13px 4px;
  border-bottom:.5px solid var(--sep);
  color:var(--text);
}
.sheet-opt:last-child{border-bottom:0}
.sheet-opt:active{opacity:.6}
.so-ico{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--fill);
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.so-txt{flex:1;min-width:0}
.so-txt b{
  font-size:15.5px;font-weight:500;letter-spacing:-.01em;display:block;
}
.so-txt span{font-size:12px;color:var(--text3);display:block;margin-top:1px}
.so-go{font-size:22px;color:var(--text3);flex-shrink:0;line-height:1}

.sheet-cancel{
  width:100%;height:50px;margin-top:10px;
  border-radius:14px;background:var(--fill);
  font-size:16.5px;font-weight:600;color:var(--blue);
  transition:background .18s,transform .18s;
}
.sheet-cancel:active{background:var(--fill2);transform:scale(.985)}

/* ================= Tab Bar ================= */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--nav);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-in{display:flex;justify-content:space-around;padding:6px 4px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;color:var(--text2);font-size:10px;transition:color .2s,transform .2s}
.tab .ti{font-size:20px;line-height:1}
.tab.on{color:var(--blue)}
.tab:active{transform:scale(.9)}

/* ================= 动画 ================= */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ================= 响应式 ================= */
@media(max-width:600px){
  .pagehead h1{font-size:29px}
  .tcard{height:376px;padding:19px}
  .tc-mid h3{font-size:25px}
  .ico{width:56px;height:56px;font-size:28px;border-radius:13px}
  .row+.row::before{left:84px}
  .tabbar{display:block}
  .foot{padding-bottom:88px}
  /* 导航栏关闭：彻底隐藏，并去掉为它预留的底部留白 */
  body.no-tabbar .tabbar{display:none}
  body.no-tabbar .foot{padding-bottom:28px}
  .cats{grid-template-columns:1fr}
  .cats .cat::before{content:"";position:absolute;top:0;left:0;right:0;height:.5px;background:var(--sep)}
  .cats .cat:first-child::before{display:none}
}
@media(min-width:601px){
  .cats .cat:nth-child(n+3)::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--sep)}
  .cats .cat:nth-child(odd)::after{content:"";position:absolute;top:12px;bottom:12px;right:0;width:.5px;background:var(--sep)}
  .cats .cat:nth-child(-n+2)::before{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================= 首页广告区（一行 3 个，--apr 控制每行个数） ================= */
.ads-sec{padding-left:0;padding-right:0}
.ads-sec .sec-head{padding:0 20px}
.ads-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* 默认 3 列 */
  gap:0;
  margin:0 20px;
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.05);
}
/* 每行个数：必须用具体类，不能用 var()
   —— CSS 规范里 :nth-child(An+B) 的 A/B 不支持自定义属性 */
.ads-apr-2{grid-template-columns:repeat(2,1fr)}
.ads-apr-3{grid-template-columns:repeat(3,1fr)}
.ads-apr-4{grid-template-columns:repeat(4,1fr)}
.ads-item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 10px 14px;
  text-align:center;
  color:inherit;text-decoration:none;
  transition:background .18s;
}
.ads-item:active{background:var(--fill)}
/* iOS 风格 hairline 分隔线 */
.ads-item::before,
.ads-item::after{content:"";position:absolute;background:var(--sep)}
.ads-item::before{top:0;bottom:0;right:0;width:.5px}
.ads-item::after{left:0;right:0;bottom:0;height:.5px}
/* 每行最后一个去掉竖线（按具体列数分别处理） */
.ads-apr-2 .ads-item:nth-child(2n)::before{display:none}
.ads-apr-3 .ads-item:nth-child(3n)::before{display:none}
.ads-apr-4 .ads-item:nth-child(4n)::before{display:none}

.ads-ic{
  position:relative;overflow:hidden;
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.14),inset 0 .5px 0 rgba(255,255,255,.3);
  flex-shrink:0;
}
.ads-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ads-item b{font-size:13px;font-weight:600;line-height:1.35;word-break:break-all}
.ads-item span{font-size:11.5px;color:var(--text3);margin-top:2px;line-height:1.4;word-break:break-all}

@media(hover:hover){
  .ads-item:hover{background:var(--fill)}
  .ads-item:hover .ads-ic{transform:scale(1.05)}
  .ads-ic{transition:transform .2s}
}

/* 手机端：跟随后台设置的每行个数（默认 3），仅缩小尺寸以适配窄屏。
   列数由 .ads-apr-N 决定，与桌面端一致，不再强制降为 2 列。 */
@media(max-width:640px){
  .ads-grid{margin:0 16px}

  /* 竖线按各自列数隐藏（与桌面同规则，此处显式重申以防被覆盖） */
  .ads-apr-2 .ads-item:nth-child(2n)::before{display:none}
  .ads-apr-3 .ads-item:nth-child(3n)::before{display:none}
  .ads-apr-4 .ads-item:nth-child(4n)::before{display:none}

  /* 尺寸收紧，保证 3 列在窄屏也不挤 */
  .ads-ic{width:38px;height:38px;font-size:20px;border-radius:10px;margin-bottom:6px}
  .ads-item{padding:12px 4px 11px}
  .ads-item b{font-size:11.5px;line-height:1.3}
  .ads-item span{font-size:10.5px;margin-top:1px}
}

/* 极窄屏（≤360px）：4 列过挤，降为 3 列 */
@media(max-width:360px){
  .ads-apr-4{grid-template-columns:repeat(3,1fr)}
  .ads-apr-4 .ads-item:nth-child(4n)::before{display:block}
  .ads-apr-4 .ads-item:nth-child(3n)::before{display:none}
}

/* ================= 微信内置浏览器提示 ================= */
/* z-index 高于公告弹窗(300)，保证在微信中优先展示 */
.wxmask{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;
  background:rgba(0,0,0,.84);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:wxIn .25s ease both;
}
@keyframes wxIn{from{opacity:0}to{opacity:1}}

/* 指向微信右上角「···」的箭头（用 top/right 而非 inset，兼容老 Safari） */
.wx-arrow{
  position:absolute;top:12px;right:16px;
  color:#fff;text-align:right;
  animation:wxFloat 1.6s ease-in-out infinite;
}
.wx-arrow svg{width:32px;height:32px;display:block;margin-left:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.wx-arrow-tip{
  display:block;margin-top:6px;
  font-size:12.5px;font-weight:600;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
@keyframes wxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.wx-card{
  width:100%;max-width:330px;
  background:var(--card);color:var(--text);
  border-radius:18px;padding:26px 22px 22px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.wx-ico{
  width:56px;height:56px;margin:0 auto 14px;
  border-radius:16px;
  background:linear-gradient(135deg,#0a84ff,#5e5ce6);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;
  box-shadow:0 6px 18px rgba(10,132,255,.35);
}
.wx-card h2{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.4}
.wx-card p{font-size:13.5px;color:var(--text3);line-height:1.75;margin-bottom:18px}
.wx-btn{
  width:100%;height:44px;border-radius:12px;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:600;
  transition:opacity .18s,transform .18s;
}
.wx-btn:active{opacity:.85;transform:scale(.98)}

@media(max-width:640px){
  .wxmask{padding:18px}
  .wx-card{padding:22px 18px 18px;max-width:100%}
  .wx-ico{width:50px;height:50px;font-size:25px}
  .wx-card h2{font-size:16.5px}
  .wx-card p{font-size:13px}
  .wx-arrow svg{width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce){
  .wxmask{animation:none}
  .wx-arrow{animation:none}
}