/* =========================================================
   style.css —— 暗色科技风（紫青霓虹 + 玻璃拟态）

   想换主题色：只改下面 :root 里的几个变量就行。
   --neon-1 紫 / --neon-2 青 是这套风格的两个主角，
   按钮、选中态、标题渐变、玻璃高光都靠它俩。

   页面里的「科技感」主要来自五样东西，都在这个文件里：
     1) 背景：霓虹光球 + 细网格线（body::before / body::after）
     2) 玻璃拟态：半透明底 + backdrop-filter 模糊 + 1px 亮边
     3) 大写小标签 .eyebrow（配一条发光圆点）
     4) 首屏满铺背景：.hero::before 铺整张图 + .hero::after 压暗左侧、底部渐隐
     5) 工具名滚动条 .marquee 与底部光带 .cta-in
   ========================================================= */

:root{
  --bg:       #0a0a14;
  --bg-2:     #12121f;
  --panel:    rgba(255,255,255,.05);
  --panel-2:  rgba(255,255,255,.085);
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.16);
  --text:     #f2f3f7;
  --text-2:   #a8acbd;
  --text-3:   #757a8f;

  --neon-1:   #7c5cff;
  --neon-2:   #21d4fd;
  --neon-3:   #ff5c8a;
  --gold:     #ffc861;
  --green:    #34e39f;

  --radius:   16px;
  --max:      1180px;

  /* 玻璃卡统一配方，改一处全站生效 */
  --glass-bg:     rgba(255,255,255,.045);
  --glass-line:   rgba(255,255,255,.13);
  --glass-blur:   blur(16px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  font-family:"Microsoft YaHei",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:14px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* ---- 背景第一层：三团霓虹光球（这一层是「不显暗」的关键） ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(60% 50% at 15% 0%,   rgba(124,92,255,.26), transparent 70%),
    radial-gradient(50% 45% at 85% 5%,   rgba(33,212,253,.20), transparent 70%),
    radial-gradient(80% 60% at 50% 108%, rgba(124,92,255,.12), transparent 70%);
}

/* ---- 背景第二层：细网格线（模板里那种科技底纹，很淡，顶部浓往下淡出） ---- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(130% 85% at 50% 0%, #000 18%, transparent 76%);
          mask-image:radial-gradient(130% 85% at 50% 0%, #000 18%, transparent 76%);
}

body.locked{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* 通用的小标签：大写字母 + 放宽字距 + 一颗发光圆点 */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:5px 13px 5px 11px;
  border:1px solid rgba(33,212,253,.26);
  border-radius:999px;
  background:rgba(33,212,253,.07);
  color:#9fe8fb;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.6;
}

.eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--neon-2);
  box-shadow:0 0 10px var(--neon-2);
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,10,20,.70);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}

/* 顶栏下沿一条渐隐的霓虹细线，是模板里常见的小点缀 */
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.6),rgba(33,212,253,.6),transparent);
  opacity:.55;
}

.topbar-in{
  display:flex;
  align-items:center;
  gap:16px;
  height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  font-weight:800;
  letter-spacing:.3px;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  font-size:14px;
  font-weight:900;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 0 18px -4px rgba(124,92,255,.9);
}

.brand-name{ font-size:15px; }
/* 站名里的「9160」：字号与后面的文字保持一致，用紫青渐变字做一点美化 */
.brand-num{
  font-weight:900;
  letter-spacing:-.2px;
  margin-right:1px;
  background:linear-gradient(90deg,#9b7cff,var(--neon-2));
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
}

/* ---- 顶栏导航：三个页面互相跳转 ---- */
.nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}

.nav a{
  padding:7px 13px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  transition:color .2s, background .2s, border-color .2s;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-color:var(--line);
}

/* 当前所在的栏目：渐变描边 + 微弱外发光，一眼看得出「你在这儿」 */
.nav a.on{
  color:#fff;
  border-color:transparent;
  background:
    linear-gradient(135deg,rgba(124,92,255,.26),rgba(33,212,253,.20)) padding-box,
    linear-gradient(135deg,var(--neon-1),var(--neon-2)) border-box;
  box-shadow:0 0 24px -11px rgba(124,92,255,1);
}

.search{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  /* ★ 这个 min-width:0 不能省：input 自带约 155px 的固有宽度，
     不给 .search 清零最小宽度的话，顶栏在窄屏（390px 手机）会被撑宽约 60px，
     整个页面出现横向滚动、搜索框被切掉。 */
  min-width:0;
  max-width:420px;
  margin-left:auto;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.28);
  transition:border-color .2s, box-shadow .2s;
}

.search:focus-within{
  border-color:rgba(33,212,253,.45);
  box-shadow:0 0 0 3px rgba(33,212,253,.10), 0 0 24px -8px rgba(33,212,253,.7);
}

.search svg{ flex:0 0 auto; color:var(--text-3); }

.search input{
  flex:1 1 auto;
  min-width:0;
  font:inherit;
  font-size:14px;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
}

.search input::placeholder{ color:var(--text-3); }

.search kbd{
  flex:0 0 auto;
  padding:1px 6px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:11px;
  color:var(--text-3);
  font-family:inherit;
}

/* 顶栏「我的清单」后面的小数字：没有收藏就整个不显示，
   挂个 0 在那里只会让人以为出错了。 */
.nav-count{
  display:inline-grid;
  place-items:center;
  min-width:16px;
  height:16px;
  margin-left:5px;
  padding:0 4px;
  border-radius:999px;
  font-style:normal;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  color:#0b0b14;
  background:var(--gold);
  vertical-align:1px;
}

.nav-count[hidden]{ display:none; }

/* ---------------- 首屏：整块满铺背景 + 左侧文案 ---------------- */
/* 背景由 .hero::before 承载（一整张图铺满首屏上部），
   .hero::after 负责压暗左侧 + 底部渐隐回页面底色。 */
.hero{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:clamp(460px,66vh,620px);
  padding:96px 0 88px;
  overflow:hidden;
}

/* 背景层。水平翻转是为了和底部那条光带用同一张图时观感不重复：
   翻转后发光的漩涡落在右侧，左边留出干净区域给文字。 */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#0a0a14 url("img/band-light.jpg") center 46% / cover no-repeat;
  transform:scaleX(-1);
}

/* 压暗层：左边多压一点保证文字清楚；底部渐隐回页面底色，不留生硬的横边 */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,20,.94) 0%, rgba(10,10,20,.78) 34%, rgba(10,10,20,.42) 64%, rgba(10,10,20,.30) 100%),
    linear-gradient(180deg, rgba(10,10,20,.70) 0%, rgba(10,10,20,.06) 40%, rgba(10,10,20,.58) 76%, var(--bg) 100%);
}

.hero-in{
  position:relative;
  z-index:2;
}

.hero-copy{ max-width:640px; }

.hero h1{
  margin-top:20px;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.14;
  letter-spacing:-1px;
  font-weight:900;
}

/* 标题里高亮的那几个字，用紫青渐变 */
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--neon-1),var(--neon-2));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

.hero-sub{
  max-width:520px;
  margin-top:16px;
  color:var(--text-2);
  font-size:15px;
}

/* 统计做成一排玻璃小卡 */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.stats span{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 20px;
  border:1px solid var(--glass-line);
  border-radius:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:12.5px;
  letter-spacing:.4px;
  color:var(--text-3);
}

.stats b{
  display:block;
  font-size:25px;
  font-weight:900;
  line-height:1.15;
  background:linear-gradient(135deg,#ffffff,var(--neon-2));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

/* ---------------- 帮你挑工具（首屏那个输入框） ---------------- */
.ask{
  max-width:560px;
  margin-top:26px;
}

/* 输入框整条做成一颗胶囊，聚焦时描一圈紫光 */
.ask-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px 7px 16px;
  border:1px solid var(--glass-line);
  border-radius:999px;
  background:rgba(0,0,0,.40);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  transition:border-color .2s, box-shadow .2s;
}
.ask-box:focus-within{
  border-color:rgba(124,92,255,.62);
  box-shadow:0 0 0 4px rgba(124,92,255,.14);
}
.ask-box > svg{ flex:none; color:var(--text-3); }
.ask-box input{
  flex:1 1 auto;
  min-width:0;              /* 不加这行，input 的固有宽度会把胶囊撑破 */
  padding:8px 0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}
.ask-box input::placeholder{ color:var(--text-3); }

.ask-go{
  flex:none;
  padding:9px 18px;
  border:0;
  border-radius:999px;
  color:#0b0b14;
  font-size:13px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  transition:filter .2s, transform .2s;
}
.ask-go:hover{ filter:brightness(1.12); }
.ask-go:active{ transform:scale(.97); }

/* 建议问法 / 分类快捷入口，两处共用一套小胶囊 */
.ask-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.ask-chips button{
  padding:6px 13px;
  border:1px solid var(--glass-line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  font-size:12.5px;
  font-family:inherit;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.ask-chips button:hover{
  border-color:rgba(33,212,253,.5);
  background:rgba(33,212,253,.08);
  color:#9fe8fb;
}

/* 结果区。首屏背景那张图中间有一道很亮的横光带，文字直接叠上去会糊，
   所以整块套一个深色玻璃底板，保证任何位置都读得清。 */
.ask-out{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--glass-line);
  border-radius:16px;
  background:rgba(8,8,18,.74);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.ask-note{
  font-size:12.5px;
  color:var(--text-2);
  line-height:1.7;
}
.ask-note b{ font-weight:800; color:#9fe8fb; }

.ask-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

/* 一条推荐：左边图标、中间名字 + 一句话、右边分类。点整条直接开官网 */
.ask-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  border:1px solid var(--glass-line);
  border-left:3px solid var(--c,var(--neon-1));
  border-radius:12px;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:background .2s, transform .2s;
}
.ask-row:hover{
  background:rgba(255,255,255,.075);
  transform:translateX(2px);
}

.ask-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
}
.ask-ico img{ width:18px; height:18px; object-fit:contain; }
.ask-ico .fb{ display:none; font-size:13px; font-weight:900; color:var(--neon-2); }
.ask-ico.is-fb .fb{ display:block; }

.ask-body{ flex:1 1 auto; min-width:0; }
.ask-body b{
  display:block;
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
}
.ask-body em{
  display:block;
  margin-top:2px;
  font-style:normal;
  font-size:12px;
  color:var(--text-3);
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ask-cat-tag{
  flex:none;
  padding:2px 9px;
  border:1px solid var(--c,var(--neon-1));
  border-radius:999px;
  color:var(--c,var(--neon-1));
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.ask-more{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#9fe8fb;
  font-size:12.5px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}
.ask-more:hover{ text-decoration:underline; }

/* 没听懂时给的兜底提示（底板已经由 .ask-out 提供了，这里只留文字） */
.ask-none{
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.7;
}
.ask-none .ask-chips{ margin-top:12px; }


/* 说明：这里原本是「首屏右侧主视觉玻璃卡」那一套样式
   （.hero-visual / .visual-card / .orb / .ring / .corner / .glass-tag，
   以及配套的 float、spin 两个动画）。2026-10-13 按用户要求整块移除，
   首屏改成上面那块满铺背景图。配图 img/hero-core.jpg 仍留在目录里，只是不再引用。 */

/* ---------------- 工具名滚动条 ---------------- */
.marquee{
  position:relative;
  z-index:1;
  margin-top:34px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

/* 注意：这里故意不用 gap，改成给每个元素写 margin。
   因为滚动的距离是「总宽的一半」，只有所有元素的外边距都一样，
   接缝处才不会出现一次小小的跳动（这是无缝滚动的关键）。 */
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:marquee 120s linear infinite;
}

.marquee-track span{
  margin-right:14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--text-3);
  white-space:nowrap;
}

.marquee-track i{
  margin-right:26px;
  font-style:normal;
  font-size:9px;
  color:rgba(124,92,255,.75);
}

.marquee:hover .marquee-track{ animation-play-state:paused; }

@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---------------- 分类标签条 ---------------- */
.tabs{
  position:sticky;
  top:64px;
  z-index:40;
  padding:12px 0;
  background:rgba(10,10,20,.80);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}

.tabs-in{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}

.tabs-in::-webkit-scrollbar{ display:none; }

.tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s;
}

.tab:hover{ color:var(--text); border-color:var(--line-2); }

/* 分类涨到 11 个（+「全部」共 12 个）后，桌面端一排放不下，
   会在最后露出半截、还要横向拖动才看得见。桌面改成居中换行，手机端继续横滑。 */
@media (min-width:941px){
  .tabs-in{ flex-wrap:wrap; justify-content:center; overflow-x:visible; row-gap:8px;
            max-width:760px; margin:0 auto; }
}

.tab i{
  font-style:normal;
  font-size:11.5px;
  opacity:.65;
}

.tab.on{
  color:#0b0b14;
  font-weight:700;
  border-color:transparent;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 10px 26px -12px rgba(124,92,255,.95);
}

.tab.on i{ opacity:.8; }

/* ---------------- 筛选条（完全免费 / 免登录 / 国内直连 / 可商用） ----------------
   要和上面的分类标签一眼分得清，所以故意长得不一样：
   分类是「药丸」（大、圆、选中紫青渐变），这里是「方角小按钮」，选中用绿色描边。
   绿色只来自 --green 一个变量，浅色主题下它本身是深绿，不用再写 light 覆盖。 */
.filters{
  padding:14px 0 2px;
}

.filters-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.fchips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.fchip{
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s;
}

.fchip:hover{ color:var(--text); border-color:var(--line-2); }

.fchip.on{
  color:var(--green);
  font-weight:700;
  border-color:color-mix(in srgb, var(--green) 45%, transparent);
  background:color-mix(in srgb, var(--green) 13%, transparent);
}

/* 右侧「筛出 N 个 · 清除」。只有开了筛选才出现，所以平时这块是空的 */
.fmeta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-size:13px;
  color:var(--text-3);
}

/* .fmeta 设了 display:flex，会把 HTML 上的 hidden 属性盖掉，得手动补一条 */
.fmeta[hidden]{ display:none; }

.fcount b{ color:var(--text); font-variant-numeric:tabular-nums; }

.fclear{
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
  transition:.18s;
}

.fclear:hover{ color:var(--text); border-color:var(--line-2); }

@media (max-width:640px){
  .filters{ padding:12px 0 0; }
  .fchip{ padding:5px 10px; font-size:12.5px; }
  /* 手机上「筛出 N 个」会换到第二行，靠左更自然 */
  .fmeta{ margin-left:0; width:100%; }
}

/* ---------------- 推荐栏（6 个精选，3 列 × 2 行） ----------------
   这一块要「和下面的工具卡区分开、相对醒目」，靠三样东西：
     1) 外面一圈 .reco-rim 的紫青渐变发光边（普通卡片只有 1px 灰边）
     2) 面板内部比页面底色亮一档 + 两团内发光（普通卡片是半透明浮在页面上）
     3) 每张推荐卡右上角有名次数字 01–06，卡片本身更亮、悬浮更明显
   ------------------------------------------------------------- */
/* hidden 属性保证优先于下面的 display，别让样式把它顶回来 */
[hidden]{ display:none !important; }

.reco{
  position:relative;
  z-index:1;
  padding:30px 0 4px;
}

/* 渐变边：外层铺满一层紫青渐变，内层压一块深色板，
   中间只露出 1px，就是那圈会发光的边（比 border-image 兼容性好、也好改） */
.reco-rim{
  padding:1px;
  border-radius:24px;
  background:linear-gradient(118deg,
    rgba(124,92,255,.85) 0%,
    rgba(33,212,253,.55) 34%,
    rgba(124,92,255,.26) 62%,
    rgba(33,212,253,.70) 100%);
  box-shadow:
    0 50px 130px -64px rgba(124,92,255,.95),
    0 24px 70px -52px rgba(33,212,253,.85);
}

.reco-in{
  position:relative;
  padding:24px;
  border-radius:23px;
  background:
    radial-gradient(78% 130% at 0% 0%,   rgba(124,92,255,.20), transparent 62%),
    radial-gradient(70% 130% at 100% 0%, rgba(33,212,253,.14), transparent 64%),
    linear-gradient(180deg,#15152a,#0f0f1e);
}

.reco-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

/* 标题用渐变文字，和首屏大标题同一个手法 */
.reco-title h2{
  margin-top:12px;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.3px;
  background:linear-gradient(100deg,#ffffff,#cbb8ff 55%,#8ce8ff);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

.reco-hint{
  flex:0 1 auto;
  min-width:0;
  padding-bottom:3px;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.5;
  text-align:right;
}

/* 三列。注意这里是写死的 repeat(3,1fr)，不用 auto-fill——
   auto-fill 会按宽度自己决定列数，桌面端会变成 4 列，卡片就被挤扁了 */
.reco-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

/* 推荐卡：比下面的普通卡更亮、更立体 */
.pick{
  position:relative;
  padding:17px 20px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  cursor:pointer;
  outline:none;
  overflow:hidden;
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

/* 左上角一团分类色的光：卡片会跟着自己的分类变色 */
.pick::before{
  content:"";
  position:absolute;
  top:-54px;
  left:-34px;
  width:132px;
  height:132px;
  border-radius:50%;
  background:var(--c,var(--neon-1));
  opacity:.16;
  filter:blur(30px);
  pointer-events:none;
  transition:opacity .25s;
}

/* 底边一条分类色渐变细线，和右上角的名次数字呼应 */
.pick::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--c,var(--neon-1)),transparent 78%);
  opacity:.55;
  pointer-events:none;
  transition:opacity .25s;
}

.pick:hover,
.pick:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 30px 60px -30px rgba(0,0,0,.95),
    0 0 40px -16px var(--c,var(--neon-1));
}

.pick:hover::before{ opacity:.28; }
.pick:hover::after{ opacity:.95; }

/* 右上角的名次：平时淡淡的，鼠标悬浮时点亮并发光 */
.pick-rank{
  position:absolute;
  top:14px;
  right:16px;
  z-index:0;
  font-size:24px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  color:var(--c,var(--neon-1));
  opacity:.42;
  pointer-events:none;
  transition:opacity .25s, text-shadow .25s;
}

.pick:hover .pick-rank,
.pick:focus-visible .pick-rank{
  opacity:.95;
  text-shadow:0 0 22px var(--c,var(--neon-1));
}

.pick-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  /* 右边留出位置，别把右上角的名次数字盖住 */
  padding-right:44px;
}

.pick-star{
  flex:0 0 auto;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
}

.pick-cat{
  flex:0 0 auto;
  font-size:11.5px;
  letter-spacing:.3px;
  color:var(--text-3);
}

.pick-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:11px;
}

/* 推荐卡的图标底色和描边比普通卡亮一点 */
.pick .ico{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 10px 24px -14px var(--c,var(--neon-1));
}

.pick-name{
  flex:1 1 auto;
  min-width:0;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pick-desc{
  position:relative;
  z-index:1;
  color:var(--text-2);
  font-size:13px;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------------- 卡片网格 ---------------- */
main{ padding:26px 0 10px; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:16px;
}

/* --c 是每张卡片自己的分类色，由 JS 写进行内 style */
.card{
  position:relative;
  padding:20px 22px 21px;
  border:1px solid var(--line);
  border-left:3px solid var(--c,var(--neon-1));
  border-radius:var(--radius);
  background:var(--panel);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  outline:none;
  overflow:hidden;
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

/* 卡片右上角一团很淡的分类色光，呼应顶部色条 */
.card::after{
  content:"";
  position:absolute;
  top:-40px;
  right:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--c,var(--neon-1));
  opacity:.07;
  filter:blur(26px);
  pointer-events:none;
  transition:opacity .25s;
}

.card:hover,
.card:focus-visible{
  transform:translateY(-4px);
  background:var(--panel-2);
  border-color:rgba(255,255,255,.20);
  border-left-color:var(--c,var(--neon-1));
  box-shadow:0 26px 50px -26px rgba(0,0,0,.95), 0 0 34px -18px var(--c,var(--neon-1));
}

.card:hover::after{ opacity:.18; }

.card-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}

.ico{
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:11px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
}

.ico img{
  width:24px;
  height:24px;
  object-fit:contain;
}

.ico .fb{
  display:none;
  font-size:16px;
  font-weight:900;
  color:var(--neon-2);
}

.ico.is-fb .fb{ display:block; }

.card-name{
  flex:1 1 auto;
  min-width:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.card-cat{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  padding:3px 10px;
  border-radius:999px;
  color:var(--c,var(--neon-1));
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--c,var(--neon-1)) 14%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--c,var(--neon-1)) 32%, transparent);
}

.badge-net{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  padding:3px 10px;
  border-radius:999px;
  color:#ffd894;
  background:rgba(255,200,97,.13);
  border:1px solid rgba(255,200,97,.30);
}

.card-desc{
  position:relative;
  z-index:1;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.empty{
  padding:64px 24px;
  text-align:center;
  color:var(--text-2);
  font-size:15px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
}

/* ---- 卡片底部的决策标签：多少钱 / 要不要注册 / 能不能商用 ----
   数据来自 tools.js 的 price / reg / comm 三个字段，没填的就不出标签。
   配色只用 currentColor 混出底色，所以 dark 和 light 两套主题都自适应，
   不需要再单独写浅色覆盖 —— 颜色只由 color 一处决定。 */
.card-meta{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.mtag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.5;
  padding:1px 8px;
  border-radius:6px;
  white-space:nowrap;
  color:var(--text-3);
  background:color-mix(in srgb, currentColor 9%, transparent);
  border:1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* 免费 / 可商用 → 绿；付费 / 商用需授权 → 金。两个变量各自在浅色主题里
   已经是深色版，这里不用再写 light 覆盖。 */
.mtag-free,
.mtag-comm-yes{ color:var(--green); }
.mtag-paid,
.mtag-comm-paid{ color:var(--gold); }

/* ---- 卡片底部一行：左边决策标签，右边收藏星标 ----
   星标单独占一格，不跟标签混在一起 —— 标签数量每个工具都不同
   （有的只填了价格，有的三个全有），混排会让星标左右乱跳。 */
.card-foot{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:12px;
}

.card-foot .card-meta{
  margin-top:0;
  flex:1 1 auto;
  min-width:0;
}

/* 收藏星标。未收藏是灰色空心，收藏后变金色实心。
   颜色只来自 --gold，浅色主题下它本身是深金，不用另写覆盖。 */
.fav{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}

.fav svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linejoin:round;
}

.fav:hover{
  color:var(--gold);
  border-color:color-mix(in srgb, var(--gold) 45%, transparent);
  background:color-mix(in srgb, var(--gold) 10%, transparent);
}

/* 按下去有一点点回弹，让人确认「确实点到了」 */
.fav:active{ transform:scale(.9); }

.fav.on{
  color:var(--gold);
  border-color:color-mix(in srgb, var(--gold) 50%, transparent);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
}

.fav.on svg{ fill:currentColor; }

.fav:focus-visible{
  outline:2px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset:2px;
}

/* 弹窗里那颗大一号，和旁边的 chip 一样高 */
.fav-lg{ width:30px; height:30px; margin-left:2px; }
.fav-lg svg{ width:16px; height:16px; }

/* ---- 列表里的分界线：「以上国内可直接打开 / 以下需要外网」 ----
   它自己也是一张「网格项」，grid-column:1/-1 让它横跨整行。 */
.grid-sep{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 2px;
}

.grid-sep span{
  flex:0 0 auto;
  padding:4px 13px;
  border-radius:999px;
  border:1px dashed rgba(255,200,97,.34);
  background:rgba(255,200,97,.07);
  color:#ffd894;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.3px;
}

.grid-sep::before,
.grid-sep::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* 分组的小标题（新闻页 / 教程页顶部那行字下面用） */
.group-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:6px 0 14px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
}

.group-title i{
  font-style:normal;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
}

/* ---------------- 特色区（左图右文） ---------------- */
.feature{
  position:relative;
  z-index:1;
  margin-top:56px;
  padding:58px 0;
  border-top:1px solid var(--line);
}

.feature-in{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:52px;
  align-items:center;
}

.feature-visual{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--glass-line);
  box-shadow:
    0 40px 80px -34px rgba(0,0,0,.95),
    0 0 70px -26px rgba(33,212,253,.55);
}

.feature-visual img{
  display:block;
  width:100%;
  height:auto;
}

.feature-copy h2{
  margin-top:18px;
  font-size:clamp(24px,3vw,34px);
  line-height:1.25;
  letter-spacing:-.6px;
  font-weight:900;
}

.feat-list{
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:26px;
}

.feat-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s, transform .2s;
}

.feat-list li:hover{
  transform:translateX(3px);
  border-color:var(--line-2);
}

.feat-list .n{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:900;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
}

.feat-list b{
  display:block;
  font-size:15px;
  letter-spacing:.2px;
}

.feat-list em{
  display:block;
  margin-top:2px;
  font-style:normal;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.7;
}

/* ---------------- 底部光带 ---------------- */
.cta{
  position:relative;
  z-index:1;
  margin-top:56px;
  padding-bottom:10px;
}

.cta-in{
  position:relative;
  overflow:hidden;
  padding:60px 40px;
  border:1px solid var(--glass-line);
  border-radius:26px;
  text-align:center;
  background:#0c0c18 url("img/band-light.jpg") center/cover no-repeat;
  box-shadow:0 44px 90px -40px rgba(0,0,0,.95);
}

.cta-in::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,20,.84), rgba(10,10,20,.60) 46%, rgba(10,10,20,.90));
}

.cta-in > *{ position:relative; z-index:1; }

.cta h2{
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.25;
  letter-spacing:-.6px;
  font-weight:900;
}

.cta p{
  max-width:560px;
  margin:14px auto 0;
  color:var(--text-2);
  font-size:14.5px;
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:26px;
  padding:14px 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 18px 40px -16px rgba(124,92,255,.95);
  transition:transform .2s, filter .2s;
}

.btn-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }

/* ---------------- 详情弹窗 ---------------- */
.modal[hidden]{ display:none; }

.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
}

.modal-mask{
  position:absolute;
  inset:0;
  background:rgba(4,4,10,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fade .2s ease-out;
}

.modal-box{
  position:relative;
  z-index:1;
  width:min(440px,100%);
  padding:30px 28px 26px;
  border:1px solid var(--line-2);
  border-radius:20px;
  background:linear-gradient(180deg,#161624,#0c0c17);
  box-shadow:0 26px 64px rgba(0,0,0,.65), 0 0 60px -26px var(--c,var(--neon-1));
  text-align:center;
  animation:pop .22s ease-out;
}

@keyframes fade{ from{ opacity:0; } }
@keyframes pop{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to  { opacity:1; transform:none; }
}

.modal-x{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text-2);
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:.2s;
}

.modal-x:hover{ color:var(--text); background:var(--panel-2); }

.ico-lg{
  width:64px;
  height:64px;
  border-radius:18px;
  margin:0 auto 18px;
}

.ico-lg img{ width:38px; height:38px; }
.ico-lg .fb{ font-size:26px; }

.modal-name{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:12px;
}

.modal-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:18px;
}

.chip{
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  padding:4px 12px;
  border-radius:999px;
  color:var(--c,var(--neon-1));
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--c,var(--neon-1)) 14%, transparent);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--c,var(--neon-1)) 32%, transparent);
}

.chip-warn{
  color:#ffd894;
  background:rgba(255,200,97,.13);
  border-color:rgba(255,200,97,.30);
}

.modal-desc{
  margin-bottom:22px;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.9;
  text-align:left;
}

.btn-go{
  display:block;
  padding:13px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  transition:filter .2s, transform .2s;
}

.btn-go:hover{ filter:brightness(1.1); transform:translateY(-2px); }

/* 弹窗里那个「看详细介绍」的次级按钮（描边，不抢主按钮的风头） */
.modal-url{
  margin-top:12px;
  font-size:12px;
  color:var(--text-3);
  word-break:break-all;
}

/* =========================================================
   以下两块是「AI 新闻」和「AI 教程」两个分页用的，
   首页（index.html）不会用到，但共用同一份 style.css，
   所以配色、卡片、圆角全都和首页一致。
   ========================================================= */

/* ---------------- 分页通用的标题区 ---------------- */
.page-head{
  position:relative;
  z-index:1;
  padding:52px 0 24px;
}

.page-head h1{
  margin-top:16px;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.6px;
}

.page-head h1 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

.page-head p{
  margin-top:13px;
  max-width:660px;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.85;
}

.page-foot-note{
  margin-top:15px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.8;
}

/* 分页顶部的主视觉小图（横条） */
.page-banner{
  position:relative;
  z-index:1;
  margin-top:6px;
  height:150px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(0,0,0,.3);
}

.page-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.72;
}

.page-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(10,10,20,.94) 0%,rgba(10,10,20,.55) 46%,transparent 100%),
    linear-gradient(0deg,rgba(10,10,20,.85),transparent 60%);
}

/* ---------------- AI 新闻：单列列表 ---------------- */
.news-list{
  display:grid;
  gap:12px;
}

.news-item{
  position:relative;
  display:block;
  padding:19px 22px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--c,var(--neon-1));
  border-radius:var(--radius);
  background:var(--panel);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

.news-item:hover{
  transform:translateY(-3px);
  background:var(--panel-2);
  border-color:rgba(255,255,255,.20);
  border-left-color:var(--c,var(--neon-1));
  box-shadow:0 24px 48px -26px rgba(0,0,0,.95), 0 0 32px -18px var(--c,var(--neon-1));
}

.news-top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
  color:var(--text-3);
  font-size:11.5px;
}

.news-src{
  padding:2px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--c,var(--neon-1));
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--c,var(--neon-1)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--c,var(--neon-1)) 32%, transparent);
}

/* 模型更新卡片：来源徽标写厂商名，「官方发布 / 已上架」这个小标跟在后面 */
.news-kind{
  padding:1px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--gold);
  background:rgba(255,200,97,.10);
  border:1px solid rgba(255,200,97,.30);
}
/* 「深度解读」：站内自己写的长文，用青色区分于黄色的来源类型标签 */
.news-kind.is-deep{
  color:#9fe8fb;
  background:rgba(33,212,253,.10);
  border-color:rgba(33,212,253,.32);
}

/* 顶部压一层厂商色的极淡渐变，和媒体新闻区分开，但不抢标题 */
.news-item.is-model{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--c,var(--neon-1)) 8%,transparent),transparent 62%),
    var(--panel);
}

.news-title{
  font-size:16.5px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.2px;
}

.news-sum{
  margin-top:9px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.78;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.news-go{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--neon-2);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.2px;
}

.news-item:hover .news-go{ text-decoration:underline; }

/* ---------------- AI 教程：封面卡片网格 ---------------- */
.tut-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}

.tut-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

.tut-card:hover{
  transform:translateY(-4px);
  background:var(--panel-2);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.95), 0 0 34px -18px var(--neon-1);
}

.tut-thumb{
  position:relative;
  aspect-ratio:16 / 10;
  background:rgba(0,0,0,.4);
  overflow:hidden;
}

.tut-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}

.tut-card:hover .tut-thumb img{ transform:scale(1.045); }

/* 封面右下角的「时长」角标 */
.tut-dur{
  position:absolute;
  right:9px;
  bottom:9px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
}

/* 封面左下角的「播放量」，带一个三角播放符号 */
.tut-play{
  position:absolute;
  left:9px;
  bottom:9px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:6px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
}

.tut-play b{
  color:var(--neon-2);
  font-size:9px;
  line-height:1;
}

/* 左上角的名次 */
.tut-rank{
  position:absolute;
  left:9px;
  top:9px;
  min-width:26px;
  height:26px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.5px;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 0 20px -6px rgba(124,92,255,1);
}

/* 封面右上角的「百万播放」角标：只有播放破百万的教程才挂 */
.tut-hot{
  position:absolute;
  right:9px;
  top:9px;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  color:#2a1400;
  background:linear-gradient(135deg,#ffd76e,#ff9f45);
  box-shadow:0 0 20px -10px rgba(255,159,69,.95);
}

/* 每周三新进来的三条：封面右上角挂入选理由（本周最火 / 点赞最高 / 评论最多）。
   卡片边框也跟着亮一点，一眼能看出是这周新加的。 */
.tut-new{
  position:absolute;
  right:9px;
  top:9px;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 0 20px -10px rgba(124,92,255,.95);
}

.tut-card.is-pin{
  border-color:rgba(124,92,255,.42);
}

/* 又破百万又入选本周精选时，两个角标上下排开，别叠在一起 */
.tut-card.is-pin .tut-hot{ top:38px; }

/* 分组小标题：本周精选 / 往期精选 / 常驻教程。整行铺满网格 */
.tut-group{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 -2px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

.tut-group:first-child{ margin-top:0; }

.tut-group-tag{
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  color:#c3b6ff;
  background:rgba(124,92,255,.13);
  border:1px solid rgba(124,92,255,.30);
}

.tut-group.is-now .tut-group-tag{
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  border-color:transparent;
  box-shadow:0 0 20px -10px rgba(124,92,255,1);
}

.tut-group-txt{
  color:var(--text-3);
  font-size:12px;
  letter-spacing:.2px;
}

.tut-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:15px 17px 17px;
}

.tut-title{
  font-size:14.5px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.tut-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:10px;
  color:var(--text-3);
  font-size:11.5px;
}

.tut-topic{
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  color:#9fe8fb;
  background:rgba(33,212,253,.09);
  border:1px solid rgba(33,212,253,.26);
}

.tut-desc{
  margin-top:11px;
  margin-bottom:13px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 播放 / 点赞 / 评论三项平铺：名次不只看播放，三项数据都摆出来 */
.tut-stats{
  display:flex;
  margin-top:11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.028);
  overflow:hidden;
}

.tut-stats span{
  flex:1;
  padding:7px 2px 8px;
  text-align:center;
}

.tut-stats span + span{ border-left:1px solid var(--line); }

.tut-stats i{
  display:block;
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.4px;
  color:var(--text-3);
}

.tut-stats b{
  display:block;
  margin-top:2px;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
}

.tut-date{
  font-variant-numeric:tabular-nums;
  opacity:.85;
}

/* margin-top:auto 把按钮推到卡片最底，这样一排卡片的按钮是齐平的 */
.tut-go{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  transition:filter .2s, transform .2s;
}

.tut-go:hover{ filter:brightness(1.1); transform:translateY(-2px); }

/* ---------------- 页脚 ---------------- */
.foot{
  position:relative;
  z-index:1;
  margin-top:44px;
  padding:32px 24px;
  text-align:center;
  color:var(--text-3);
  font-size:13px;
  line-height:1.9;
  border-top:1px solid var(--line);
}

/* ---------------- 平板 ---------------- */
@media (max-width:940px){
  .hero{ min-height:480px; padding:80px 0 68px; }
  .hero-sub{ max-width:none; }

  .feature-in{ grid-template-columns:1fr; gap:36px; }
  .feature-visual{ max-width:460px; }

  /* 平板宽度放不下三列，推荐栏改两列（6 张就是 3 行） */
  .reco-grid{ grid-template-columns:repeat(2,1fr); }

  .page-head{ padding:42px 0 20px; }
  .page-head h1{ font-size:29px; }
  .page-banner{ height:128px; }
  .tut-list{ grid-template-columns:repeat(2,1fr); gap:14px; }
}

/* ---------------- 手机端 ---------------- */
@media (max-width:640px){
  .wrap{ padding:0 16px; }

  .topbar-in{ height:58px; gap:10px; }
  .brand-name{ display:none; }
  .search{ max-width:none; padding:7px 12px; }
  .search kbd{ display:none; }

  /* 手机上导航文字缩一档，才塞得下「品牌 + 三个栏目 + 搜索框」 */
  .nav{ gap:2px; }
  .nav a{ padding:6px 9px; font-size:12px; letter-spacing:0; }

  /* 手机上首屏矮一档，背景图整体往下挪一点，让文字落在更暗的区域 */
  .hero{ min-height:400px; padding:62px 0 54px; }
  .hero::before{ background-position:center 56%; }
  .hero::after{
    background:
      linear-gradient(90deg, rgba(10,10,20,.92) 0%, rgba(10,10,20,.70) 55%, rgba(10,10,20,.52) 100%),
      linear-gradient(180deg, rgba(10,10,20,.66) 0%, rgba(10,10,20,.10) 42%, rgba(10,10,20,.62) 78%, var(--bg) 100%);
  }
  .hero h1{ font-size:30px; }
  .stats{ gap:10px; }
  .stats span{ padding:9px 15px; }
  .stats b{ font-size:21px; }

  /* 手机上把「帮我找」三个字收成一个小按钮，输入框才有地方写字 */
  .ask{ margin-top:20px; }
  .ask-box{ gap:8px; padding:6px 6px 6px 13px; }
  .ask-box input{ font-size:13.5px; }
  .ask-go{ padding:8px 14px; font-size:12.5px; }
  /* 结果行放不下右边的分类胶囊，藏掉（左边色条已经能看出分类了） */
  .ask-cat-tag{ display:none; }
  .ask-row{ padding:9px 11px; gap:9px; }

  .marquee{ margin-top:26px; }

  .tabs{ top:58px; }

  .grid{ grid-template-columns:1fr; gap:12px; }

  .card-cat{ display:none; }

  /* 推荐栏在手机上改成横向滑动：6 张卡竖着排要往下滚很久才看到工具列表 */
  .reco{ padding:22px 0 0; }
  .reco-rim{ border-radius:20px; }
  .reco-in{ padding:16px 0; border-radius:19px; }
  .reco-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:14px;
    padding:0 16px 12px;
  }
  .reco-hint{ padding-bottom:0; }
  .reco-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 16px 4px;
    scroll-snap-type:x proximity;
  }
  .reco-grid::-webkit-scrollbar{ display:none; }
  .pick{ flex:0 0 236px; scroll-snap-align:start; }
  /* 横滑卡只有 236px 宽，分类名让位给「★ 推荐」和「需外网」标记 */
  .pick-top{ padding-right:34px; }
  .pick-cat{ display:none; }

  .feature{ margin-top:34px; padding:38px 0; }
  .cta{ margin-top:36px; }
  .cta-in{ padding:40px 22px; border-radius:20px; }

  /* 分页：手机上标题小一号、主视觉变矮、新闻和教程都改单列 */
  .page-head{ padding:32px 0 18px; }
  .page-head h1{ font-size:25px; margin-top:13px; }
  .page-head p{ font-size:13.5px; }
  .page-banner{ height:104px; }
  .news-item{ padding:16px 17px 17px; }
  .news-title{ font-size:15.5px; }
  .news-sum{ font-size:13px; }
  .tut-list{ grid-template-columns:1fr; gap:14px; }
  .group-title{ margin:2px 0 12px; }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   模型天梯图页（rank.html）
   ---------------------------------------------------------
   结构：概览数字 → 档位切换（复用 .tabs）→ 前三名台子 →
        第 4~40 名阶梯 → 厂商份额 → 口径说明
   配色：前三名用金/银/铜，第 4 名往后按霓虹八色循环。
   条形长度用「对数刻度」——第 1 名的量级是第 30 名的几百倍，
   线性刻度会把后面全压成一条线，看不出区别。
   ========================================================= */

/* 顶栏导航里的「AI 」前缀，手机上会隐藏，好塞下四个栏目 */
.nav-ai{ font-weight:700; }

/* ---- 概览数字 ---- */
.rk-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:24px;
}
.rk-stat{
  padding:15px 17px;
  border:1px solid var(--glass-line);
  border-radius:14px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
}
.rk-stat b{
  display:block;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.4px;
  line-height:1.25;
  background:linear-gradient(100deg,#fff,#cbb8ff 55%,#8ce8ff);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.rk-stat span{ font-size:12px; color:var(--text-3); font-weight:600; }

/* 档位那一行右侧的数据窗口日期 */
.rk-bucket{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 -8px;
  font-size:12.5px;
  color:var(--text-3);
  font-weight:600;
}
.rk-bucket i{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--neon-2);
  box-shadow:0 0 10px var(--neon-2);
}

/* ---- 前三名：阶梯式台子，中间的 #1 最高 ---- */
.podium{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:end;
  margin:26px 0 34px;
}
.pod{
  position:relative;
  overflow:hidden;
  padding:20px 18px 18px;
  border:1px solid var(--glass-line);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
/* 每块台子顶部一条专属色光带 */
.pod::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  box-shadow:0 0 22px var(--c);
}
.pod-1{ --c:#ffc861; min-height:214px; box-shadow:0 0 46px -22px #ffc861; }
.pod-2{ --c:#cfd6e6; min-height:180px; }
.pod-3{ --c:#d98b4a; min-height:164px; }
.pod:hover{ transform:translateY(-3px); border-color:var(--c); }

.pod-medal{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
}
.pod-medal .m{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
  color:#0a0a14;
  background:var(--c);
  box-shadow:0 0 18px -4px var(--c);
}
.pod-medal span{ font-size:12px; font-weight:800; color:var(--text-3); letter-spacing:.4px; }

.pod-name{
  font-size:17px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.3px;
}
.pod-1 .pod-name{ font-size:20px; }
.pod-vendor{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:var(--text-2);
}
.pod-vendor i{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--vc,var(--neon-1));
  box-shadow:0 0 9px var(--vc,var(--neon-1));
}
.pod-ver{
  display:inline-block;
  margin-left:8px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  font-size:11px;
  font-weight:600;
  color:var(--text-3);
}
.pod-num{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.pod-num b{ font-size:19px; font-weight:900; letter-spacing:-.4px; }
.pod-num b em{ font-style:normal; font-size:12px; font-weight:700; color:var(--text-3); margin-left:3px; }
.pod-num span{ font-size:12px; color:var(--text-3); font-weight:700; }

/* ---- 第 4 名起的阶梯列表 ---- */
.ladder{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lad{
  position:relative;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 128px;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border:1px solid var(--glass-line);
  border-radius:14px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  transition:border-color .2s, background .2s, transform .2s;
}
.lad:hover{
  transform:translateX(3px);
  border-color:var(--c);
  background:rgba(255,255,255,.07);
}
.lad-rank{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--text-3);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.lad:hover .lad-rank{ color:var(--c); }

.lad-body{ min-width:0; }
.lad-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.lad-name{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.lad-ver{
  flex:0 0 auto;
  padding:1px 6px;
  border-radius:5px;
  background:rgba(255,255,255,.075);
  font-size:10.5px;
  font-weight:700;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.lad-vendor{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-3);
}
.lad-vendor i{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--vc);
  box-shadow:0 0 8px var(--vc);
}
.lad-track{
  display:block;          /* span 默认是 inline，不给 block 的话 height 不生效、条形会消失 */
  height:6px;
  margin-top:8px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.lad-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--c), rgba(255,255,255,.55));
  box-shadow:0 0 12px -2px var(--c);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

.lad-num{
  text-align:right;
  font-size:13px;
  font-weight:900;
  letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* 数字里的单位（万亿 / 亿）跟在数字后面，不能换行 */
.lad-num b em{
  display:inline;
  margin-left:2px;
  font-style:normal;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-3);
}
/* 下面那行小字（请求数 / 占比）单独占一行 */
.lad-num > em{
  display:block;
  margin-left:0;
  font-style:normal;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-3);
}
/* 环比小徽章：涨红跌绿（国内习惯），跟着模型名一行，手机上也不会被藏掉 */
.lad-chg{
  flex:0 0 auto;
  padding:1px 7px 2px;
  border-radius:6px;
  font-size:11px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.07);
  color:var(--text-3);
  white-space:nowrap;
}
.lad-chg.up{ color:#ff6b8f; background:rgba(255,107,143,.14); }
.lad-chg.down{ color:var(--green); background:rgba(52,227,159,.14); }

/* 表头（窄屏隐藏） */
.lad-head-row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 128px;
  gap:14px;
  padding:0 16px 4px;
  font-size:11px;
  font-weight:800;
  color:var(--text-3);
  letter-spacing:.4px;
}
.lad-head-row span:nth-child(3){ text-align:right; }

/* ---- 厂商份额 ---- */
.vendors{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
}
.vdr{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1px solid var(--glass-line);
  border-radius:13px;
  background:var(--glass-bg);
}
.vdr-n{
  font-size:13px;
  font-weight:900;
  color:var(--text-3);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.vdr-body{ min-width:0; }
.vdr-name{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:800;
}
.vdr-name i{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--vc);
  box-shadow:0 0 9px var(--vc);
}
.vdr-track{
  display:block;          /* 同上：span 不给 block，进度条会消失 */
  height:5px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.vdr-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--vc);
  box-shadow:0 0 10px -2px var(--vc);
}
.vdr-share{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
}
.vdr-share em{
  display:block;
  font-style:normal;
  font-size:10.5px;
  font-weight:600;
  color:var(--text-3);
  text-align:right;
}
/* 「其他 N 家厂商」那一行压低存在感 */
.vdr-rest{ opacity:.68; }
.vdr-rest .vdr-share{ font-size:13px; }

/* ---- 口径说明 ---- */
.rk-note{
  margin-top:44px;
  padding:24px 26px;
  border:1px solid var(--glass-line);
  border-radius:18px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
}
.rk-note h2{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.3px;
  margin-bottom:14px;
}
.rk-note ul{ list-style:none; display:grid; gap:10px; }
.rk-note li{
  position:relative;
  padding-left:20px;
  font-size:13px;
  color:var(--text-2);
  line-height:1.75;
}
.rk-note li::before{
  content:"";
  position:absolute;
  left:2px; top:9px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--neon-2);
  box-shadow:0 0 9px var(--neon-2);
}
.rk-note li b{ color:var(--text); font-weight:800; }
.rk-note a{ color:var(--neon-2); text-decoration:underline; text-underline-offset:3px; }
.rk-note .warn{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,200,97,.30);
  background:rgba(255,200,97,.07);
  font-size:12.5px;
  color:#ffdca0;
  line-height:1.7;
}

@media (max-width:940px){
  .rk-stats{ grid-template-columns:repeat(2,1fr); }
  .podium{ grid-template-columns:1fr; align-items:stretch; gap:10px; }
  .pod-1, .pod-2, .pod-3{ min-height:0; }
  .lad{ grid-template-columns:32px minmax(0,1fr) 96px; gap:10px; padding:12px 14px; }
  .lad-head-row{ display:none; }
  .lad-num{ font-size:12.5px; }
  .vendors{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .nav-ai{ display:none; }
  .rk-stat b{ font-size:19px; }
  .pod-name{ font-size:16px; }
  .pod-1 .pod-name{ font-size:17px; }
  .rk-note{ padding:18px 16px; margin-top:32px; }
  .rk-note li{ font-size:12.5px; }
  .lad-name{ white-space:normal; }
}

/* =========================================================
   工具详情页（tool/ 目录下的页面）专用样式
   和全站共用这一份 style.css，所以配色、圆角、霓虹色都是同一套，
   只是把「列表」换成了「长文 + 对比卡」。

   前缀统一用 .tp-（tool page），改的时候不会和首页样式打架。
   ========================================================= */

/* ---------------- 头部 ---------------- */
.tp-head{ padding-bottom:6px; }

/* 这两个是 <p>，而上面 .page-head p 已经给了样式，
   所以这里多带一层 .tp-head 把优先级压过去。 */
.tp-head .tp-crumb{
  margin:0 0 22px;
  max-width:none;
  font-size:13px;
  color:var(--text-3);
}
.tp-crumb a{ color:var(--text-2); transition:color .2s; }
.tp-crumb a:hover{ color:var(--neon-2); }

.tp-id{ display:flex; align-items:center; gap:16px; }
.tp-id .ico-lg{ margin:0; }      /* 盖掉弹窗里那套居中边距 */
.tp-id-txt{ min-width:0; }
.tp-id h1{
  margin:0;
  font-size:30px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.25;
}
.tp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* 两个新的小标签变体：绿色=好事（可直连），灰色=中性信息 */
.chip-ok{
  color:#8bf0c6;
  background:rgba(52,227,159,.13);
  border-color:rgba(52,227,159,.30);
}
.chip-quiet{
  color:var(--text-3);
  background:rgba(255,255,255,.045);
  border-color:var(--line);
}

.tp-head .tp-tagline{
  margin-top:22px;
  max-width:780px;
  font-size:16px;
  line-height:1.9;
  color:var(--text-2);
}

.tp-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px; }
.tp-actions .btn-go{
  display:inline-block;
  width:auto;
  padding:12px 30px;
}
/* 收藏按钮跟在「访问官网」后面，要和它一样高，不然一排看着歪 */
.tp-actions .fav{
  margin-left:0;
  width:44px;
  height:44px;
  border-radius:12px;
}
.tp-actions .fav svg{ width:19px; height:19px; }
.tp-url{ font-size:12.5px; color:var(--text-3); letter-spacing:.2px; }

/* 顶部三个「快速结论」方格 */
.tp-verdict{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:32px; }
.tp-v{
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.tp-v b{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--text-3);
}
.tp-v span{ display:block; margin-top:8px; font-size:15px; font-weight:700; line-height:1.5; }

/* ---------------- 正文各板块 ---------------- */
.tp-main{ padding-bottom:8px; }
.tp-sec{ margin-top:56px; }

.tp-sec h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.2px;
  line-height:1.4;
}
/* 标题前那个「01 / 02」编号小方块 */
.tp-num{
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:8px;
  border:1px solid rgba(33,212,253,.30);
  background:rgba(33,212,253,.08);
  color:var(--neon-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.tp-p{ margin-top:16px; max-width:830px; font-size:14.5px; line-height:2; color:var(--text-2); }

/* ---------------- 免费 / 付费 对比卡 ---------------- */
.tp-plans{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.tp-plan{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
/* 卡片顶上那道光条：免费用绿、付费用金 */
.tp-plan::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; }
.tp-plan.is-free::before{ background:linear-gradient(90deg,var(--green),rgba(52,227,159,0) 70%); }
.tp-plan.is-paid::before{ background:linear-gradient(90deg,var(--gold),rgba(255,200,97,0) 70%); }

.tp-plan-top{ padding:20px 22px 17px; border-bottom:1px solid var(--line); }
.tp-plan-tag{
  display:inline-block;
  padding:3px 11px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
}
.is-free .tp-plan-tag{ color:#8bf0c6; background:rgba(52,227,159,.13); border:1px solid rgba(52,227,159,.30); }
.is-paid .tp-plan-tag{ color:#ffd894; background:rgba(255,200,97,.13); border:1px solid rgba(255,200,97,.30); }

.tp-plan-top b{ display:block; margin-top:12px; font-size:17px; font-weight:800; }
.tp-plan-top em{ display:block; margin-top:6px; font-style:normal; font-size:13.5px; color:var(--text-2); }

.tp-plan-body{ padding:18px 22px 22px; }
.tp-plan-body h4{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--text-3);
}
.tp-plan-body ul{ margin-top:10px; list-style:none; }
.tp-plan-body li{
  position:relative;
  padding-left:20px;
  margin-top:8px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-2);
}
/* 圆点：绿点 = 能做到的事，灰点 = 限制 */
.tp-plan-body li::before{
  content:"";
  position:absolute;
  left:2px; top:9px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px rgba(52,227,159,.6);
}
.tp-plan-body ul.is-limit{ margin-top:22px; }
.tp-plan-body ul.is-limit li::before{ background:var(--text-3); box-shadow:none; }

/* ---------------- 说明与提醒 ---------------- */
.tp-note{
  margin-top:18px;
  padding:13px 16px;
  border-radius:12px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.03);
  font-size:12.5px;
  line-height:1.85;
  color:var(--text-3);
}
.tp-warn{
  margin-top:18px;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid rgba(255,200,97,.30);
  background:rgba(255,200,97,.07);
  font-size:12.5px;
  line-height:1.85;
  color:#ffdca0;
}

/* ---------------- 优惠活动 ---------------- */
.tp-deals{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.tp-deal{
  padding:18px 20px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.tp-deal-tag{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#ffd894;
  background:rgba(255,200,97,.12);
  border:1px solid rgba(255,200,97,.28);
}
.tp-deal b{ display:block; margin-top:11px; font-size:15px; font-weight:800; }
.tp-deal p{ margin-top:8px; font-size:13.5px; line-height:1.85; color:var(--text-2); }

/* ---------------- 功能清单 ---------------- */
.tp-feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.tp-feat{
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.tp-feat b{ font-size:14px; font-weight:800; }
.tp-feat p{ margin-top:7px; font-size:13px; line-height:1.8; color:var(--text-2); }

/* ---------------- 效果示例（你说 / 它会） ---------------- */
.tp-effects{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.tp-effect{
  padding:18px 20px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--glass-bg);
}
.tp-effect-scene{ display:inline-block; font-size:12px; font-weight:800; color:var(--neon-2); letter-spacing:.02em; }
.tp-effect-row{ display:flex; gap:11px; margin-top:13px; }
.tp-effect-row i{
  flex:0 0 auto;
  width:40px;
  padding-top:2px;
  font-style:normal;
  font-size:11.5px;
  font-weight:800;
  color:var(--text-3);
}
.tp-effect-row p{ flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.85; color:var(--text-2); }
.tp-effect-row.is-out p{ color:var(--text); }

/* ---------------- 上手建议 ---------------- */
.tp-tips{ margin-top:22px; list-style:none; }
.tp-tips li{
  position:relative;
  padding-left:24px;
  margin-top:13px;
  font-size:14px;
  line-height:1.9;
  color:var(--text-2);
}
.tp-tips li::before{
  content:"◆";
  position:absolute;
  left:2px; top:1px;
  font-size:10px;
  color:var(--neon-1);
}

/* ---------------- 其他推荐工具 ---------------- */
.tp-more{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }
.tp-more-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  transition:border-color .2s, background .2s, transform .2s;
}
.tp-more-item:hover{
  border-color:var(--line-2);
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}
.tp-more-item > span{ min-width:0; }
.tp-more-item b{ display:block; font-size:14px; font-weight:800; }
.tp-more-item em{ display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--text-3); }

@media (max-width:940px){
  .tp-verdict{ grid-template-columns:1fr 1fr; }
  .tp-plans,
  .tp-deals,
  .tp-feats,
  .tp-effects{ grid-template-columns:1fr; }
  .tp-more{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .tp-head .tp-crumb{ margin-bottom:16px; }
  .tp-id{ flex-direction:column; align-items:flex-start; gap:13px; }
  .tp-id h1{ font-size:24px; }
  .tp-head .tp-tagline{ margin-top:16px; font-size:14.5px; }
  .tp-actions{ margin-top:18px; gap:12px; }
  .tp-actions .btn-go{ width:100%; text-align:center; padding:13px; }
  .tp-verdict{ grid-template-columns:1fr; margin-top:24px; }
  .tp-sec{ margin-top:40px; }
  .tp-sec h2{ font-size:18px; gap:9px; }
  .tp-more{ grid-template-columns:1fr; }
  .tp-effect-row{ flex-direction:column; gap:5px; }
  .tp-effect-row i{ width:auto; padding-top:0; }
}

/* =========================================================
   顶栏的「分享」按钮（share.js 注入，全站共用）
   ---------------------------------------------------------
   按钮做成渐变底而不是透明幽灵钮，是因为它需要「明显」——
   顶栏里已经有站名、四个栏目、搜索框三个元素，不加点颜色看不出来。
   面板是深色玻璃 + 尖角，和站内其他浮层保持一套语言。
   ★ 面板必须写 .share-panel[hidden]{ display:none }：
     下面的规则设了 display:block，会盖过浏览器对 [hidden] 的默认隐藏。
   ========================================================= */

.share{ position:relative; flex:0 0 auto; }

.share-btn{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:none;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  box-shadow:0 10px 26px -12px rgba(124,92,255,.95);
  cursor:pointer;
  transition:transform .18s, filter .18s;
}
.share-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.share-btn:active{ transform:translateY(0); }

.share-panel{
  display:block;
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:60;
  width:270px;
  padding:13px;
  border-radius:16px;
  border:1px solid var(--line-2);
  background:rgba(13,13,24,.97);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 22px 54px -18px rgba(0,0,0,.95);
}
.share-panel[hidden]{ display:none; }

/* 面板上沿那个指向按钮的小尖角 */
.share-panel::before{
  content:"";
  position:absolute;
  top:-6px;
  right:22px;
  width:10px;
  height:10px;
  border-left:1px solid var(--line-2);
  border-top:1px solid var(--line-2);
  background:rgba(13,13,24,.97);
  transform:rotate(45deg);
}

/* 微信里的那条提示：微信不开放网页直接转发，只能引导用户走它的菜单 */
.share-tip{
  margin:0 0 11px;
  padding:9px 11px;
  border-radius:10px;
  font-size:12px;
  line-height:1.6;
  color:#ffd894;
  background:rgba(255,200,97,.10);
  border:1px solid rgba(255,200,97,.30);
}

/* 主按钮：复制链接。永远在第一位，因为它是唯一 100% 可靠的一条路 */
.share-copy{
  display:block;
  width:100%;
  padding:12px;
  border:none;
  border-radius:999px;
  font:inherit;
  font-size:13.5px;
  font-weight:800;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  cursor:pointer;
  transition:filter .18s;
}
.share-copy:hover{ filter:brightness(1.08); }

.share-row{
  display:flex;
  gap:8px;
  margin-top:9px;
}

.share-sec{
  flex:1 1 0;
  min-width:0;
  padding:9px 6px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s, border-color .18s, background .18s;
}
.share-sec:hover{
  color:var(--text);
  border-color:rgba(33,212,253,.5);
  background:rgba(33,212,253,.10);
}

/* 最后一道兜底：自动复制被浏览器挡住时，把链接摆出来让用户长按选中 */
.share-manual{ margin-top:10px; }
.share-manual[hidden]{ display:none; }
.share-manual-tip{
  margin:0 0 7px;
  font-size:12px;
  line-height:1.6;
  color:var(--text-3);
}
.share-url{
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:rgba(0,0,0,.4);
  color:var(--text);
  font:inherit;
  font-size:12.5px;
}

/* ---- 手机端 ----
   390px 宽的顶栏要同时容下「站名方块 + 四个栏目 + 搜索框 + 分享按钮」。
   实测过：不做处理的话搜索框只剩 29px 可输入区，等于没法打字。
   所以要三处一起收：分享按钮只留图标、栏目左右内边距各收一点、
   放大镜图标藏掉（它占 23px，而此刻这 23px 给输入框更值钱 ——
   占位文字「搜索工具名、用途或分类…」本身就说明这是搜索框）。
   面板宽度跟着视口走，免得在小屏上顶出右边界。 */
@media (max-width:640px){
  .topbar-in{ gap:6px; }
  .nav a{ padding:6px 7px; }
  .search{ padding:7px 9px; }
  .search svg{ display:none; }
  .share-btn{ padding:8px 9px; }
  .share-btn-txt{ display:none; }
  .share-panel{ width:min(268px, calc(100vw - 34px)); }
}


/* =========================================================
   单篇解读页（v4-flash-1017.html）
   —— 站点其余部分都是「卡片列表」，这一页是「长文」，
      所以另开一套 .art-* 前缀，不去动列表页已有的类。
   ========================================================= */

/* 顶栏右侧：这一页没有列表可搜，放一个回新闻的入口代替搜索框 */
.topbar-back{
  display:inline-flex; align-items:center;
  padding:8px 14px;
  border:1px solid var(--line-2); border-radius:999px;
  color:var(--text-2); font-size:12.5px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
}
.topbar-back:hover{ color:#fff; border-color:rgba(33,212,253,.5); background:rgba(33,212,253,.08); }

.art-head{ padding-top:54px; }

.art-head h1{
  margin-top:16px;
  font-size:clamp(25px, 4vw, 42px);
  font-weight:900;
  line-height:1.36;
  letter-spacing:.4px;
}
/* 标题里那个 em 是渐变色重点词，跟全站 h1 em 的用法保持一致 */
.art-head h1 em{
  font-style:normal;
  background:linear-gradient(92deg, var(--neon-2), var(--neon-1));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.art-lead{
  margin-top:16px;
  max-width:76ch;
  color:var(--text-2);
  font-size:15px;
  line-height:1.95;
}
.art-lead b{ color:#fff; }

.art-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 20px;
  margin-top:22px;
  color:var(--text-3);
  font-size:12.5px;
}
.art-meta b{ color:var(--text); font-weight:800; }
.art-meta a{
  color:#9fe8fb; text-decoration:none;
  border-bottom:1px dashed rgba(33,212,253,.42);
}
.art-meta a:hover{ color:#fff; border-bottom-color:rgba(33,212,253,.9); }

/* ---- 五张速览卡 ---- */
.art-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(186px, 1fr));
  gap:12px;
  margin-top:26px;
}
.fact{
  padding:14px 16px 15px;
  border:1px solid var(--glass-line);
  border-radius:14px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.fact-k{
  font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
}
.fact-v{
  margin-top:7px;
  font-size:15px; font-weight:800;
  color:var(--text);
  line-height:1.5;
}
.fact-v small{
  display:block; margin-top:4px;
  font-size:12px; font-weight:600;
  color:var(--text-2);
  letter-spacing:0;
}

/* ---- 目录锚点 ---- */
.art-toc{
  display:flex; flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.art-toc a{
  padding:7px 14px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--text-2); font-size:12.5px; font-weight:700;
  text-decoration:none;
  transition:color .18s, border-color .18s, background .18s;
}
.art-toc a:hover{ color:#fff; border-color:rgba(33,212,253,.5); background:rgba(33,212,253,.08); }

/* ---- 正文 ---- */
.art-body{ position:relative; z-index:1; }

.art-doc{
  max-width:900px;
  margin:0 auto;
  padding-bottom:10px;
}

.art-sec{
  padding:38px 0 10px;
  border-top:1px solid var(--line);
  /* 从目录跳过来时，标题别贴着顶栏 */
  scroll-margin-top:86px;
}
.art-sec:first-child{ border-top:0; }

.art-sec h2{
  display:flex; align-items:baseline; gap:13px;
  font-size:clamp(20px, 2.7vw, 27px);
  font-weight:900;
  letter-spacing:.3px;
  line-height:1.4;
}
/* 章节序号：小一号的青色数字 */
.art-sec h2 i{
  font-style:normal;
  flex:none;
  font-size:12px; font-weight:800;
  letter-spacing:.14em;
  color:var(--neon-2);
}

.art-sec p{
  margin-top:15px;
  color:#cfd2df;
  font-size:14.5px;
  line-height:2;
}
.art-sec p b, .art-sec p strong{ color:#fff; font-weight:800; }
.art-sec p a{
  color:#9fe8fb; text-decoration:none;
  border-bottom:1px dashed rgba(33,212,253,.42);
}
.art-sec p a:hover{ color:#fff; }

/* ---- 大图 ---- */
.art-fig{
  margin:24px 0 6px;
  padding:10px;
  border:1px solid var(--glass-line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.art-fig a{ display:block; border-bottom:0; }
.art-fig img{
  display:block; width:100%; height:auto;
  border-radius:12px;
}
.art-fig figcaption{
  margin-top:11px;
  text-align:center;
  color:var(--text-3);
  font-size:12px;
  line-height:1.7;
}

.art-fig-note{
  margin-top:14px !important;
  color:var(--text-3) !important;
  font-size:12.5px !important;
  line-height:1.85 !important;
}

/* ---- 四个案例动图：两列格子，窄屏一列 ---- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:24px;
}
@media (max-width:760px){
  .case-grid{ grid-template-columns:1fr; }
}
.case{
  margin:0;
  overflow:hidden;
  border:1px solid var(--glass-line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.case img{
  display:block; width:100%; height:auto;
}
.case figcaption{
  padding:11px 14px 12px;
  border-top:1px solid var(--line);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.75;
}
.case figcaption b{
  display:block;
  margin-bottom:2px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

/* ---- 黄色提醒块 ---- */
.art-note{
  margin-top:22px;
  padding:15px 17px 16px;
  border-left:3px solid var(--gold);
  border-radius:0 13px 13px 0;
  background:rgba(255,200,97,.07);
  color:#f3e2b8;
  font-size:13.5px;
  line-height:1.9;
}
.art-note b{ color:#ffe6b0; }

/* ---- 下载 / 外链按钮组 ---- */
.art-links{
  display:flex; flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.art-links a{
  display:inline-flex; align-items:center;
  padding:10px 17px;
  border:1px solid rgba(33,212,253,.3); border-radius:999px;
  background:rgba(33,212,253,.08);
  color:#cdf3ff; font-size:13px; font-weight:700;
  text-decoration:none;
  transition:background .18s, border-color .18s, transform .18s;
}
.art-links a:hover{
  background:rgba(33,212,253,.17);
  border-color:rgba(33,212,253,.55);
  transform:translateY(-1px);
}

.art-foot-note{
  margin-top:34px;
  padding-top:18px;
  border-top:1px dashed var(--line);
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.95;
}
.art-foot-note a{
  color:#9fe8fb; text-decoration:none;
  border-bottom:1px dashed rgba(33,212,253,.42);
}
.art-foot-note a:hover{ color:#fff; }

/* ---- 新闻页顶部的「今日重点」入口卡 ---- */
.deep-promo{
  display:grid;
  gap:6px;
  margin-top:26px;
  padding:18px 22px 18px;
  border:1px solid rgba(124,92,255,.38);
  border-radius:18px;
  background:
    linear-gradient(120deg, rgba(124,92,255,.16), rgba(33,212,253,.08) 55%, transparent),
    rgba(255,255,255,.03);
  text-decoration:none;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.deep-promo:hover{
  border-color:rgba(33,212,253,.6);
  transform:translateY(-2px);
  box-shadow:0 24px 50px -30px rgba(33,212,253,.5);
}
.deep-promo-tag{
  justify-self:start;
  padding:2px 10px;
  border:1px solid rgba(255,200,97,.32); border-radius:999px;
  background:rgba(255,200,97,.10);
  color:var(--gold);
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
}
.deep-promo strong{
  font-size:17px; font-weight:900; color:#fff;
  line-height:1.55; letter-spacing:.2px;
}
.deep-promo-sub{
  color:var(--text-2);
  font-size:12.5px; line-height:1.8;
}
.deep-promo-go{
  margin-top:2px;
  color:#9fe8fb;
  font-size:12.5px; font-weight:800;
}
@media (max-width:640px){
  .deep-promo{ padding:16px 17px; }
  .deep-promo strong{ font-size:15.5px; }
}

/* =========================================================
   分享面板里的「朋友圈」+ 海报弹层（share.js 配套）
   —— 微信没有对外开放的网页分享接口，所以这里不是「一键唤起」，
      而是「生成带二维码的长图海报」+「微信内的 ⋯ 菜单引导」。
      见 share.js 开头的说明。
   ========================================================= */

/* 面板第一项：朋友圈。用微信绿做边框，一眼能认出来是哪个渠道 */
.share-wx{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin-top:9px;
  padding:11px;
  border-radius:999px;
  border:1px solid rgba(7,193,96,.42);
  background:rgba(7,193,96,.10);
  color:#7ee2ad;
  font:inherit;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  transition:color .18s, border-color .18s, background .18s;
}
.share-wx:hover{
  color:#c8ffe2;
  border-color:rgba(7,193,96,.72);
  background:rgba(7,193,96,.18);
}

/* ---- 弹层 ---- */
.sh-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.sh-modal[hidden]{ display:none; }

.sh-modal-bd{
  position:absolute;
  inset:0;
  background:rgba(4,4,10,.80);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.sh-modal-box{
  position:relative;
  z-index:1;
  width:min(380px, 100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:20px 20px 18px;
  border:1px solid var(--line-2);
  border-radius:20px;
  background:#0e0e1c;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.95);
  text-align:center;
}

.sh-modal-x{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:var(--text-2);
  cursor:pointer;
  transition:color .18s, background .18s;
}
.sh-modal-x:hover{ color:#fff; background:rgba(255,255,255,.12); }

.sh-modal-h{
  font-size:16.5px;
  font-weight:900;
  letter-spacing:.3px;
  color:#fff;
}

.sh-modal-sub{
  margin-top:6px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.75;
}

/* 微信里额外那条「点 ⋯ 才是能点的卡片」 */
.sh-wx-tip{
  margin-top:10px;
  padding:9px 12px;
  border-radius:11px;
  border:1px solid rgba(255,200,97,.30);
  background:rgba(255,200,97,.09);
  color:#ffd894;
  font-size:12px;
  line-height:1.7;
  text-align:left;
}
.sh-wx-tip b{ color:#ffe6b0; }

/* 微信里：全屏遮罩 + 指右上角的箭头 + 一张说明卡
   —— 真正发出去的动作在微信原生菜单里，网页只负责把人指过去 */
.sh-modal--wx .sh-modal-bd{
  background:rgba(4,4,10,.86);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.sh-wx-arrow{
  position:absolute;
  top:8px;
  right:10px;
  width:60px;
  height:60px;
  color:#fff;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.65));
  animation:sh-point 1.6s ease-in-out infinite;
}
@keyframes sh-point{
  0%, 100%{ transform:translate(0, 0); opacity:.72; }
  50%     { transform:translate(4px, -4px); opacity:1; }
}

.sh-wx-card{
  position:relative;
  z-index:1;
  width:min(340px, calc(100vw - 44px));
  padding:20px 20px 18px;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:#0e0e1c;
  text-align:center;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
}

.sh-guide-big{
  color:#fff;
  font-size:15.5px;
  font-weight:800;
  line-height:1.75;
}
.sh-guide-big b{ color:#7ee2ad; }

.sh-guide-sub{
  margin-top:9px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.85;
}

/* 微信外那三步：序号用青色，读起来像操作手册 */
.sh-steps{
  margin:11px 0 0;
  padding-left:19px;
  text-align:left;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.9;
}
.sh-steps li{ margin-top:5px; }
.sh-steps li::marker{ color:var(--neon-2); font-weight:800; }
.sh-steps b{ color:#fff; }

.sh-link{ margin-top:13px; }
.sh-link-in{
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:rgba(0,0,0,.45);
  color:var(--text-2);
  font:inherit;
  font-size:12px;
}

.sh-modal-acts{
  display:flex;
  gap:9px;
  margin-top:15px;
}
.sh-copy2, .sh-wx-ok{
  flex:1 1 0;
  min-width:0;
  padding:11px 8px;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
}
.sh-copy2{
  border:none;
  color:#0b0b14;
  background:linear-gradient(135deg,#07c160,#21d4fd);
}
.sh-copy2:hover{ filter:brightness(1.08); }
.sh-wx-ok{
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.sh-wx-ok:hover{ border-color:rgba(33,212,253,.5); background:rgba(33,212,253,.10); }

/* 小屏：弹层贴着底部上滑，更像系统的分享面板，也更好按 */
@media (max-width:520px){
  .sh-modal{ align-items:flex-end; padding:0; }
  .sh-modal-box{
    width:100%;
    max-height:88vh;
    border-radius:20px 20px 0 0;
    border-bottom:0;
    padding-bottom:22px;
    animation:sh-up .26s ease-out;
  }
}
@keyframes sh-up{
  from{ transform:translateY(18px); opacity:.6; }
  to{ transform:translateY(0); opacity:1; }
}

/* =========================================================
   工具页「官网打不开？」反馈（配合 feedback.js）
   刻意做得比主按钮低调：是个求助入口，不该抢「访问官网」的注意力。
   ========================================================= */

.tp-report{ margin-top:14px; }

.tp-report-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  font-size:12.5px;
  font-family:inherit;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.tp-report-btn:hover{
  color:var(--text);
  border-color:rgba(255,200,97,.45);
  background:rgba(255,200,97,.08);
}
.tp-report-btn::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  opacity:.75;
}

.tp-report-panel{
  margin-top:12px;
  max-width:520px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}

.tp-report-q{
  font-size:13px;
  color:var(--text-2);
  margin-bottom:10px;
}

.tp-report-opts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.tp-report-opts label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12.5px;
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.tp-report-opts label:hover{ border-color:var(--line-2); color:var(--text); }
.tp-report-opts input{ accent-color:var(--neon-2); width:13px; height:13px; }
.tp-report-opts label:has(input:checked){
  color:var(--text);
  border-color:rgba(33,212,253,.45);
  background:rgba(33,212,253,.10);
}

.tp-report-note{
  display:block;
  width:100%;
  min-height:64px;
  resize:vertical;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  font:inherit;
  font-size:13px;
  line-height:1.6;
  outline:none;
}
.tp-report-note:focus{ border-color:rgba(33,212,253,.45); }
.tp-report-note::placeholder{ color:var(--text-3); }

.tp-report-foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.tp-report-send{
  padding:8px 20px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:#0b0b14;
  background:linear-gradient(135deg,var(--neon-1),var(--neon-2));
  cursor:pointer;
  transition:filter .2s, transform .2s;
}
.tp-report-send:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.tp-report-send:disabled{ opacity:.55; cursor:default; transform:none; filter:none; }

.tp-report-cancel{
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
}
.tp-report-cancel:hover{ color:var(--text); border-color:var(--line-2); }

.tp-report-msg{ font-size:12.5px; color:var(--text-3); }
.tp-report-msg.is-err{ color:#ffb3b3; }

.tp-report-done{
  font-size:13.5px;
  line-height:1.8;
  color:var(--green);
}

@media (max-width:520px){
  .tp-report-panel{ padding:14px; }
  .tp-report-opts label{ font-size:12px; padding:6px 10px; }
}

/* =========================================================
   亮色主题（第二套皮肤）—— 2026-10-20 新增

   访客在顶栏点太阳 / 月亮切换，选择记在 localStorage["9160.theme"]，
   由 theme.js 把 <html data-theme="light"> 写上去。没有这个属性 = 上面的暗色。

   ★ 这一段全部写在文件末尾，上面 3488 行一个字节都没动。
     所以暗色下的渲染结果和改之前完全一致，不会有任何回归。

   ★ 为什么是「覆盖」而不是「抽变量」？
     300 多处硬编码里大半是霓虹辉光和投影，抽成 token 收益很小、风险很大；
     而真正要变的只有「底色 / 描边 / 文字」三类，正好由下面这组变量兜住。
     以后调色只改这一段。

   ★ 主色：靛蓝 #4f58d6（对齐 ai-bot.cn）+ 粉。
     注意 --neon-2 在亮色下取的是「压暗的洋红 #9c46bd」而不是浅粉 #eac9e4 ——
     因为它同时被当成文字色和「渐变底 + 白字」按钮的末端，
     浅粉配白字只有 2:1，根本看不清。浅粉只出现在 --lt-pink 的装饰光斑里。
   ========================================================= */

/* ---------------- 0. 变量 ---------------- */
:root[data-theme="light"]{
  color-scheme:light;                    /* 原生搜索框清除按钮、滚动条跟着变浅 */

  --bg:       #f6f7fb;
  --bg-2:     #ffffff;
  --panel:    #ffffff;
  --panel-2:  #f4f6fb;                   /* 不能等于 --panel：hover 层次靠它 */
  --line:     #e7e9f2;
  --line-2:   #d9dded;
  --text:     #14171b;
  --text-2:   #5b6373;
  --text-3:   #6b7285;

  --neon-1:   #4f58d6;                   /* 主色：靛蓝 */
  --neon-2:   #9c46bd;                   /* 洋红：文字 / 渐变末端 */
  --neon-3:   #e8437a;
  --gold:     #8a5a00;
  --green:    #0a7a4f;

  --glass-bg:   #ffffff;
  --glass-line: #e7e9f2;
  --glass-blur: blur(14px);              /* 顶栏 / 分类条仍要糊住底下内容 */

  /* 只在亮色区块里使用的两个补充色 */
  --lt-pink:  #eac9e4;                   /* 装饰光斑专用，不做文字 */
  --lt-wash:  #f7f8fd;                   /* 替代所有「白色低透明度」的次级面 */
  --lt-veil:  rgba(20,23,27,.05);        /* 替代 rgba(255,255,255,.06) 这类提亮 */
  --lt-ink:   #14171b;
}

/* ---------------- 1. 主题切换按钮（两套主题通用） ---------------- */
.theme-btn{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  line-height:0;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .12s;
}

.theme-btn:hover{ color:var(--text); border-color:var(--line-2); background:rgba(255,255,255,.06); }
.theme-btn:active{ transform:scale(.94); }
.theme-btn:focus-visible{ outline:2px solid var(--neon-2); outline-offset:2px; }
.theme-btn svg{ display:none; }

/* 图标显示的是「点一下会变成什么」：
   暗色 → 太阳（去亮色）｜亮色 → 半明半暗（去跟随系统）｜跟随系统 → 月亮（回暗色）。
   判断依据是 data-mode 而不是 data-theme —— auto 解析成亮或暗之后，
   光看 data-theme 就分不出用户到底选的是哪一档了。 */
html[data-mode="dark"]  .theme-btn .ico-sun{ display:block; }
html[data-mode="light"] .theme-btn .ico-auto{ display:block; }
html[data-mode="auto"]  .theme-btn .ico-moon{ display:block; }
/* 内联脚本被禁用时没有 data-mode：按暗色兜底，至少有个太阳 */
html:not([data-mode]) .theme-btn .ico-sun{ display:block; }

html[data-theme="light"] .theme-btn:hover{ background:var(--lt-veil); }

/* ---------------- 1b. 窄屏「更多」菜单 ----------------
   宽屏下 .more-wrap 完全不渲染（display:none），
   640px 以下反过来：导航和配色按钮都收进来，顶栏只留
   Logo / 搜索 / 分享 / 更多 —— 搜索框才有宽度可用。 */
.more-wrap{ display:none; position:relative; flex:0 0 auto; }

.more-btn{
  display:flex;
  align-items:center;
  gap:3px;
  height:32px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.more-btn:hover{ color:var(--text); border-color:var(--line-2); }
.more-btn svg{ transition:transform .2s; }
.more-wrap.open .more-btn{ color:var(--text); border-color:rgba(124,92,255,.45); }
.more-wrap.open .more-btn svg{ transform:rotate(180deg); }

.more-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:60;
  width:224px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  /* 不能直接用 var(--panel)：暗色那个是 5% 白的玻璃片，
     面板底下压着首屏标题，会漏得看不清 —— 这里要一个实底。
     也别在这层再叠 backdrop-filter：父级 .topbar 已经有一层，
     叠上去在部分内核里会把面板自身的底色一起模糊掉，看着像半透明。 */
  background:#0f0f1a;
  box-shadow:0 26px 54px -28px rgba(0,0,0,.85);
}
.more-panel[hidden]{ display:none; }

.more-sec + .more-sec{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.more-label{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:.6px;
  color:var(--text-3);
}

/* 三档分段控件 */
.seg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:3px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
}
.seg-btn{
  padding:7px 2px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:color .18s, background .18s;
}
.seg-btn:hover{ color:var(--text); }
.seg-btn.on{ color:#fff; background:linear-gradient(135deg,var(--neon-1),var(--neon-2)); }

.more-links{ display:flex; flex-direction:column; gap:2px; }
.more-links a{
  padding:9px 10px;
  border-radius:9px;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
  transition:color .18s, background .18s;
}
.more-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.more-links a.on{ color:#fff; background:rgba(124,92,255,.20); }

/* ---------------- 2. 页面背景两层 ---------------- */
html[data-theme="light"] body::before{
  background:
    radial-gradient(58% 46% at 12% 0%,   rgba(79,88,214,.10), transparent 70%),
    radial-gradient(48% 42% at 88% 4%,   rgba(231,199,226,.13), transparent 70%),
    radial-gradient(80% 55% at 50% 106%, rgba(79,88,214,.05), transparent 70%);
}

/* 网格线：暗色是白线，亮色必须换成深线，否则在白底上根本看不见 */
html[data-theme="light"] body::after{
  background-image:
    linear-gradient(to right,  rgba(20,23,27,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,23,27,.035) 1px, transparent 1px);
}

/* 首屏那个青色小标签 */
html[data-theme="light"] .eyebrow{
  border-color:rgba(79,88,214,.22);
  background:rgba(79,88,214,.07);
  color:#434cc4;
}
html[data-theme="light"] .eyebrow::before{
  background:var(--neon-1);
  box-shadow:0 0 8px rgba(79,88,214,.55);
}

/* ---------------- 3. 顶栏 ---------------- */
html[data-theme="light"] .topbar{ background:rgba(246,247,251,.84); }
html[data-theme="light"] .topbar::after{ opacity:.35; }

html[data-theme="light"] .brand-mark{
  color:#fff;
  box-shadow:0 6px 16px -8px rgba(79,88,214,.9);
}
html[data-theme="light"] .brand-num{ background-image:linear-gradient(90deg,#4f58d6,#9c46bd); }

html[data-theme="light"] .nav a:hover{ background:var(--lt-veil); }

/* 当前栏目：暗色是「渐变描边 + 半透明紫底 + 白字」，
   亮色换成「浅靛蓝底 + 靛蓝字」，比一颗实心紫色胶囊更接近资料站的观感 */
html[data-theme="light"] .nav a.on{
  color:#434cc4;
  background:linear-gradient(135deg,rgba(79,88,214,.11),rgba(231,199,226,.11));
  border-color:rgba(79,88,214,.30);
  box-shadow:0 4px 12px -10px rgba(79,88,214,.9);
}

html[data-theme="light"] .search{ background:#fff; }
html[data-theme="light"] .search:focus-within{
  border-color:rgba(79,88,214,.45);
  box-shadow:0 0 0 3px rgba(79,88,214,.10), 0 6px 18px -12px rgba(79,88,214,.55);
}

/* 窄屏「更多」面板：白底 + 纸片阴影 */
html[data-theme="light"] .more-panel{
  background:#fff;
  border-color:#e7e9f2;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:
    0 2px 6px rgba(20,23,27,.05),
    0 20px 44px -26px rgba(20,23,27,.30);
}
html[data-theme="light"] .more-btn:hover{ background:var(--lt-veil); }
html[data-theme="light"] .more-wrap.open .more-btn{ border-color:rgba(79,88,214,.45); }
html[data-theme="light"] .seg{ background:#f1f3fa; }
html[data-theme="light"] .seg-btn.on{
  color:#fff;
  background:linear-gradient(135deg,#4f58d6,#9c46bd);
  box-shadow:0 6px 14px -10px rgba(79,88,214,.85);
}
html[data-theme="light"] .more-links a:hover{ background:#f4f6fb; }
html[data-theme="light"] .more-links a.on{
  color:#434cc4;
  background:rgba(79,88,214,.10);
}

/* ---------------- 4. 首屏 ---------------- */
/* 亮色下不用那张深色光带图，改成白底 + 三团柔光，最接近 ai-bot.cn 的顶部。
   注意：这里只改 background（简写会把手机端的 background-position 一起清掉），
   不要动 transform —— 原规则里的 scaleX(-1) 有自测在盯着。 */
html[data-theme="light"] .hero::before{
  background:
    radial-gradient(55% 60% at 12% 6%,  rgba(79,88,214,.15), transparent 66%),
    radial-gradient(46% 52% at 84% 10%, rgba(231,199,226,.26), transparent 68%),
    radial-gradient(60% 45% at 50% 104%, rgba(79,88,214,.07), transparent 70%),
    #f8f9fd;
}

/* 亮色没有右侧光带图可以配平，文案块居中收拢，左右留白对称，
   否则 1440 宽下会「缩在左边、右边空一大片」，看着像没做完。
   只改亮色，暗色仍是左对齐 —— 那个是给光带图留的位置。 */
html[data-theme="light"] .hero-copy{ margin-left:auto; margin-right:auto; }

/* 亮色首屏再压一圈高度：没有光带图要「撑场面」，竖着多留 90px 空白反而散。
   内容集中在一屏里，往下滚一点就能看到工具列表。 */
html[data-theme="light"] .hero{
  min-height:clamp(400px,56vh,540px);
  padding:72px 0 62px;
}

html[data-theme="light"] .hero::after{
  background:linear-gradient(180deg, transparent 56%, rgba(246,247,251,.70) 84%, var(--bg) 100%);
}

html[data-theme="light"] .stats span{
  background:rgba(255,255,255,.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* 统计数字：暗色是「白→青」渐变字，亮色下白色那端会直接消失。
   注意这里必须用 background-image —— 写成 background 简写会顺手把
   background-clip:text 重置成 border-box，渐变字会变成一块实心色块。 */
html[data-theme="light"] .stats b{ background-image:linear-gradient(135deg,#14171b 30%,#4f58d6); }

/* ---------------- 5. 帮你挑工具 ---------------- */
html[data-theme="light"] .ask-box{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .ask-box:focus-within{
  border-color:rgba(79,88,214,.5);
  box-shadow:0 0 0 4px rgba(79,88,214,.12);
}

html[data-theme="light"] .ask-chips button{ background:#fff; }
html[data-theme="light"] .ask-chips button:hover{
  border-color:rgba(79,88,214,.4);
  background:rgba(79,88,214,.07);
  color:#434cc4;
}

html[data-theme="light"] .ask-out{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 18px 44px -28px rgba(20,23,27,.30);
}

html[data-theme="light"] .ask-note b,
html[data-theme="light"] .ask-more{ color:#434cc4; }

html[data-theme="light"] .ask-row{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .ask-row:hover{ background:var(--lt-wash); }
html[data-theme="light"] .ask-ico{ background:rgba(20,23,27,.05); }
html[data-theme="light"] .ask-cat-tag{ color:color-mix(in srgb, var(--c,var(--neon-1)) 58%, #14171b); }

/* ---------------- 6. 工具名滚动条 ---------------- */
html[data-theme="light"] .marquee{ background:rgba(20,23,27,.02); }
html[data-theme="light"] .marquee-track i{ color:rgba(79,88,214,.7); }

/* ---------------- 7. 分类标签条 ---------------- */
html[data-theme="light"] .tabs{ background:rgba(246,247,251,.88); }
html[data-theme="light"] .tab.on{
  color:#fff;
  box-shadow:0 8px 20px -14px rgba(79,88,214,.95);
}

/* ---------------- 8. 推荐栏 ---------------- */
html[data-theme="light"] .reco-rim{
  background:linear-gradient(118deg,
    rgba(79,88,214,.55) 0%,
    rgba(231,199,226,.45) 34%,
    rgba(79,88,214,.22) 62%,
    rgba(231,199,226,.50) 100%);
  box-shadow:
    0 30px 70px -52px rgba(79,88,214,.55),
    0 16px 40px -34px rgba(231,199,226,.55);
}

/* 推荐栏内板：暗色是 #15152a→#0f0f1e 的深色硬渐变，亮色换成白底 + 两团淡光 */
html[data-theme="light"] .reco-in{
  background:
    radial-gradient(78% 130% at 0% 0%,   rgba(79,88,214,.07), transparent 62%),
    radial-gradient(70% 130% at 100% 0%, rgba(231,199,226,.10), transparent 64%),
    #ffffff;
}

html[data-theme="light"] .reco-head{ border-bottom-color:var(--line); }
html[data-theme="light"] .reco-title h2{ background-image:linear-gradient(100deg,#14171b 28%,#4f58d6 66%,#9c46bd); }

html[data-theme="light"] .pick{
  border-color:#eef0f7;
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(20,23,27,.035), 0 5px 12px -10px rgba(20,23,27,.10);
}
html[data-theme="light"] .pick:hover,
html[data-theme="light"] .pick:focus-visible{
  border-color:#e2e6f2;
  background:linear-gradient(180deg,#ffffff,#fafbff);
  box-shadow:
    0 2px 4px rgba(20,23,27,.045),
    0 12px 22px -18px rgba(20,23,27,.16),
    0 0 22px -20px var(--c,var(--neon-1));
}
html[data-theme="light"] .pick .ico{
  background:rgba(20,23,27,.05);
  border-color:var(--line);
  box-shadow:0 8px 20px -16px var(--c,var(--neon-1));
}
html[data-theme="light"] .pick-rank{
  color:color-mix(in srgb, var(--c,var(--neon-1)) 55%, #14171b);
  opacity:.55;
}
html[data-theme="light"] .pick-star{ color:#fff; box-shadow:0 6px 14px -8px rgba(79,88,214,.9); }

/* ---------------- 9. 卡片网格 ---------------- */
/* 贴纸感：白卡 + 极细描边 + 一层几乎看不见的落影（不再靠大范围模糊压暗）。
   投影半径小、负扩散大，看起来是「轻轻贴在纸上」，而不是浮在半空的玻璃板。
   左侧分类色条是第一眼的识别点：加宽到 4px、只压 8% 墨色，
   保留荧光色相（原来压到 78% 在白底上偏灰，远看像一条阴影）。 */
html[data-theme="light"] .card{
  background:#ffffff;
  border-color:#eef0f7;
  border-left-width:4px;
  border-left-color:color-mix(in srgb, var(--c,var(--neon-1)) 92%, #14171b);
  backdrop-filter:none;                  /* 220 张卡，白底上模糊既没用又费性能 */
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(20,23,27,.035), 0 5px 12px -10px rgba(20,23,27,.10);
}
html[data-theme="light"] .card::after{ opacity:.10; }
html[data-theme="light"] .card:hover,
html[data-theme="light"] .card:focus-visible{
  background:linear-gradient(180deg,#ffffff,#fafbff);
  border-color:#e2e6f2;
  border-left-color:color-mix(in srgb, var(--c,var(--neon-1)) 92%, #14171b);
  box-shadow:
    0 2px 4px rgba(20,23,27,.045),
    0 12px 22px -18px rgba(20,23,27,.16),
    0 0 22px -20px var(--c,var(--neon-1));
}
html[data-theme="light"] .card:hover::after{ opacity:.14; }

html[data-theme="light"] .ico{ background:rgba(20,23,27,.05); }

/* 分类色是 JS 写进行内 --c 的荧光色，白底上直接当文字色会看不清。
   这里用 color-mix 把它往墨色里压，保留色相、保证对比度，不用改 JS。
   对比页的两个分类小字也走同一条规则 —— 否则「视频生成」这种金色
   在白底上几乎看不见。 */
html[data-theme="light"] .card-cat,
html[data-theme="light"] .cmp-h-t em,
html[data-theme="light"] .cmp-opt-c,
html[data-theme="light"] .chip{
  color:color-mix(in srgb, var(--c,var(--neon-1)) 58%, #14171b);
  background:color-mix(in srgb, var(--c,var(--neon-1)) 10%, #ffffff);
  border-color:color-mix(in srgb, var(--c,var(--neon-1)) 26%, #ffffff);
}

/* 金色系（需外网 / 提示 / 优惠）统一换成深琥珀字 + 浅琥珀底 */
html[data-theme="light"] .badge-net,
html[data-theme="light"] .grid-sep span,
html[data-theme="light"] .chip-warn,
html[data-theme="light"] .news-kind,
html[data-theme="light"] .tp-deal-tag,
html[data-theme="light"] .deep-promo-tag,
html[data-theme="light"] .share-tip,
html[data-theme="light"] .sh-wx-tip{
  color:#8a5a00;
  background:#fff8e6;
  border-color:#f0d9a8;
}

html[data-theme="light"] .grid-sep span{ border-style:dashed; }
html[data-theme="light"] .empty{ background:#fbfcff; }

/* ---------------- 10. 特色区（左图右文） ---------------- */
html[data-theme="light"] .feature-visual{
  box-shadow:
    0 24px 50px -34px rgba(20,23,27,.30),
    0 0 50px -30px rgba(79,88,214,.35);
}
html[data-theme="light"] .feat-list li{
  background:#ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .feat-list li:hover{ background:var(--lt-wash); }

/* ---------------- 11. 底部光带 ---------------- */
html[data-theme="light"] .cta-in{
  background:linear-gradient(120deg,#eef1ff 0%,#fdeef9 55%,#eaf7ff 100%);
  box-shadow:0 26px 60px -44px rgba(20,23,27,.35);
}
/* 这一条必须写：暗色用一层深罩把光带图压暗，换底之后它会把淡色底重新压黑 */
html[data-theme="light"] .cta-in::before{ background:none; }

/* ---------------- 12. 详情弹窗 ---------------- */
html[data-theme="light"] .modal-mask{ background:rgba(20,23,27,.42); }
html[data-theme="light"] .modal-box{
  background:linear-gradient(180deg,#ffffff,#fbfbfe);
  box-shadow:
    0 22px 54px -22px rgba(20,23,27,.34),
    0 0 40px -30px var(--c,var(--neon-1));
}

/* ---------------- 13. 共用：渐变底按钮的文字 ---------------- */
/* 暗色下这些按钮是「紫青渐变 + 近黑字」，亮色换成靛蓝→洋红后必须改白字 */
html[data-theme="light"] .ask-go,
html[data-theme="light"] .tab.on,
html[data-theme="light"] .pick-star,
html[data-theme="light"] .feat-list .n,
html[data-theme="light"] .btn-cta,
html[data-theme="light"] .btn-go,
html[data-theme="light"] .tut-rank,
html[data-theme="light"] .share-btn,
html[data-theme="light"] .share-copy,
html[data-theme="light"] .tp-report-send{ color:#fff; }

/* 对比相关的两个渐变按钮也属于这一类。
   注意 :not(.is-off) —— 「再选 1 个」那个不可点状态是半透明面板底，
   一起变白字就等于整块消失。 */
html[data-theme="light"] .cmp-entry.ready,
html[data-theme="light"] .cmp-go:not(.is-off){ color:#fff; }

html[data-theme="light"] .btn-cta{ box-shadow:0 14px 30px -16px rgba(79,88,214,.85); }
html[data-theme="light"] .share-btn{ box-shadow:0 8px 20px -14px rgba(79,88,214,.95); }
html[data-theme="light"] .tut-rank{ box-shadow:0 6px 16px -10px rgba(79,88,214,.95); }

/* ---------------- 14. 分页标题 / 横幅 ---------------- */
/* 横幅底下是一张深色光带图，亮色下只用白色蒙版会变成一块发灰的照片，
   所以先垫一层淡彩底，再把图压到 38% 当水彩用 */
html[data-theme="light"] .page-banner{
  background:linear-gradient(120deg,#eef1ff 0%,#fdeef9 58%,#eaf7ff 100%);
}
html[data-theme="light"] .page-banner img{ opacity:.38; }
html[data-theme="light"] .page-banner::after{
  background:
    linear-gradient(120deg, rgba(79,88,214,.10), rgba(231,199,226,.13) 60%, rgba(79,88,214,.07)),
    linear-gradient(90deg, rgba(246,247,251,.93) 0%, rgba(246,247,251,.55) 46%, transparent 100%),
    linear-gradient(0deg, rgba(246,247,251,.88), transparent 60%);
}

/* ---------------- 15. AI 新闻 ---------------- */
html[data-theme="light"] .news-item{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-left-color:color-mix(in srgb, var(--c,var(--neon-1)) 82%, #14171b);
}
html[data-theme="light"] .news-item:hover{
  border-color:#d8dce9;
  border-left-color:color-mix(in srgb, var(--c,var(--neon-1)) 82%, #14171b);
  box-shadow:
    0 16px 34px -26px rgba(20,23,27,.30),
    0 0 26px -18px var(--c,var(--neon-1));
}
html[data-theme="light"] .news-src{ color:color-mix(in srgb, var(--c,var(--neon-1)) 58%, #14171b); }
html[data-theme="light"] .news-kind.is-deep{
  color:#0b6f8f;
  background:#eaf9ff;
  border-color:#bfeaf7;
}

/* ---------------- 16. AI 教程 ---------------- */
html[data-theme="light"] .tut-card:hover{
  border-color:#d8dce9;
  box-shadow:
    0 18px 38px -26px rgba(20,23,27,.30),
    0 0 26px -18px var(--neon-1);
}
html[data-theme="light"] .tut-thumb{ background:#eef0f7; }
/* 封面上的时长 / 播放量角标压在图上，亮色下继续用深色胶囊，反而更清楚 */
html[data-theme="light"] .tut-stats{ background:rgba(20,23,27,.03); }
html[data-theme="light"] .tut-topic{
  color:#434cc4;
  background:#eef0ff;
  border-color:#d9deff;
}
/* 亮色下「本周精选」角标是橙金渐变（紫青会跟白卡片糊在一起），字用深色 */
html[data-theme="light"] .tut-new{
  color:#2a1400;
  background:linear-gradient(135deg,#ffd76e,#ff9f45);
}
html[data-theme="light"] .tut-card.is-pin{ border-color:#e2d6b8; }
html[data-theme="light"] .tut-group-tag{
  color:#4a3aa8;
  background:#eeebff;
  border-color:#dbd4ff;
}
html[data-theme="light"] .tut-group.is-now .tut-group-tag{
  color:#fff;
  background:linear-gradient(135deg,#4f58d6,#b03fc9);
  border-color:transparent;
}

/* ---------------- 17. 模型天梯 ---------------- */
html[data-theme="light"] .rk-stat b{ background-image:linear-gradient(100deg,#14171b 28%,#4f58d6 66%,#9c46bd); }

html[data-theme="light"] .pod{
  background:linear-gradient(180deg,#ffffff,#f8f9fe);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 10px 26px -22px rgba(20,23,27,.26);
}
html[data-theme="light"] .pod-1{ box-shadow:0 0 46px -24px rgba(200,140,20,.75); }
html[data-theme="light"] .pod-ver,
html[data-theme="light"] .lad-ver,
html[data-theme="light"] .lad-chg{ background:rgba(20,23,27,.06); }

html[data-theme="light"] .lad:hover{ background:rgba(20,23,27,.035); }
html[data-theme="light"] .lad-track,
html[data-theme="light"] .vdr-track{ background:rgba(20,23,27,.07); }
html[data-theme="light"] .lad-bar{
  background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #ffffff));
  box-shadow:0 0 10px -3px color-mix(in srgb, var(--c) 60%, transparent);
}

/* 行内 color 由 rank.js 写死，CSS 压不掉，只能整体压暗（保留色相） */
html[data-theme="light"] .lad-num,
html[data-theme="light"] .lad-rank{ filter:brightness(.62) saturate(1.08); }

/* 涨红跌绿：亮色下都要压深一档 */
html[data-theme="light"] .lad-chg.up{ color:#c2244a; background:#fdeaef; }
html[data-theme="light"] .lad-chg.down{ color:#0a7a4f; background:#e9f7f0; }

html[data-theme="light"] .rk-note .warn{
  color:#7a4a00;
  background:#fff8e6;
  border-color:#f0d9a8;
}
/* 口径说明里那两个行内色（rank.html 手写的 span），全站仅此一处用 !important */
html[data-theme="light"] .rk-note span[style*="#ff6b8f"]{ color:#c2244a !important; }
html[data-theme="light"] .rk-note span[style*="#34e39f"]{ color:#0a7a4f !important; }

/* ---------------- 18. 工具详情页 ---------------- */
html[data-theme="light"] .chip-ok{ color:#0a7a4f; background:#e9f9f1; border-color:#bfe8d6; }
html[data-theme="light"] .chip-quiet{ background:rgba(20,23,27,.04); }
html[data-theme="light"] .tp-num{
  color:var(--neon-1);
  border-color:rgba(79,88,214,.28);
  background:#eef0ff;
}
html[data-theme="light"] .is-free .tp-plan-tag{ color:#0a7a4f; background:#e9f9f1; border-color:#bfe8d6; }
html[data-theme="light"] .is-paid .tp-plan-tag{ color:#8a5a00; background:#fff8e6; border-color:#f0d9a8; }
html[data-theme="light"] .tp-plan-body li::before{ box-shadow:none; }

html[data-theme="light"] .tp-note,
html[data-theme="light"] .tp-deal,
html[data-theme="light"] .tp-feat,
html[data-theme="light"] .tp-more-item{ background:#f7f8fd; }
html[data-theme="light"] .tp-more-item:hover{ background:#eef1f8; border-color:#d8dce9; }
html[data-theme="light"] .tp-warn{ color:#7a4a00; background:#fff8e6; border-color:#f0d9a8; }

/* ---------------- 19. 分享按钮与面板 ---------------- */
html[data-theme="light"] .share-panel{
  background:#ffffff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 20px 44px -20px rgba(20,23,27,.30);
}
html[data-theme="light"] .share-panel::before{ background:#ffffff; }
html[data-theme="light"] .share-sec{ background:#f7f8fd; }
html[data-theme="light"] .share-sec:hover{
  color:var(--text);
  border-color:rgba(79,88,214,.45);
  background:#eef0ff;
}
html[data-theme="light"] .share-url{ background:#f6f7fb; }
html[data-theme="light"] .share-wx{
  color:#0a7a4f;
  border-color:rgba(10,122,79,.3);
  background:#e9f9f1;
}
html[data-theme="light"] .share-wx:hover{
  color:#065c3a;
  border-color:rgba(10,122,79,.55);
  background:#dff6ea;
}

/* ---------------- 20. 单篇解读页 ---------------- */
html[data-theme="light"] .topbar-back:hover{
  color:var(--text);
  border-color:rgba(79,88,214,.45);
  background:#eef0ff;
}
html[data-theme="light"] .art-lead b{ color:#14171b; }
html[data-theme="light"] .art-meta a{ color:#434cc4; border-bottom-color:rgba(79,88,214,.4); }
html[data-theme="light"] .art-meta a:hover{ color:#14171b; border-bottom-color:rgba(79,88,214,.8); }

html[data-theme="light"] .art-toc a{ background:#f7f8fd; }
html[data-theme="light"] .art-toc a:hover{
  color:var(--text);
  border-color:rgba(79,88,214,.45);
  background:#eef0ff;
}

html[data-theme="light"] .art-sec p{ color:#4a5160; }
html[data-theme="light"] .art-sec p b,
html[data-theme="light"] .art-sec p strong{ color:#14171b; }
html[data-theme="light"] .art-sec p a{ color:#434cc4; border-bottom-color:rgba(79,88,214,.4); }
html[data-theme="light"] .art-sec p a:hover{ color:#14171b; }

html[data-theme="light"] .art-fig,
html[data-theme="light"] .case{ background:#f7f8fd; }
html[data-theme="light"] .case figcaption b{ color:#14171b; }

html[data-theme="light"] .art-note{ color:#5a4210; background:#fff8e6; }
html[data-theme="light"] .art-note b{ color:#3f2d05; }

html[data-theme="light"] .art-links a{
  color:#0b6f8f;
  background:#eaf9ff;
  border-color:#bfeaf7;
}
html[data-theme="light"] .art-links a:hover{ background:#dcf3ff; border-color:#8fd8ee; }
html[data-theme="light"] .art-foot-note a{ color:#434cc4; border-bottom-color:rgba(79,88,214,.4); }
html[data-theme="light"] .art-foot-note a:hover{ color:#14171b; }

html[data-theme="light"] .deep-promo{
  border-color:rgba(79,88,214,.3);
  background:
    linear-gradient(120deg, rgba(79,88,214,.07), rgba(231,199,226,.06) 55%, transparent),
    #fbfaff;
}
html[data-theme="light"] .deep-promo:hover{
  border-color:rgba(79,88,214,.5);
  box-shadow:0 18px 40px -30px rgba(79,88,214,.55);
}
html[data-theme="light"] .deep-promo strong{ color:#14171b; }
html[data-theme="light"] .deep-promo-go{ color:#434cc4; }

/* ---------------- 21. 分享弹层 ---------------- */
html[data-theme="light"] .sh-modal-bd{ background:rgba(20,23,27,.38); }
html[data-theme="light"] .sh-modal--wx .sh-modal-bd{ background:rgba(20,23,27,.44); }
html[data-theme="light"] .sh-modal-box,
html[data-theme="light"] .sh-wx-card{
  background:#ffffff;
  box-shadow:0 24px 60px -28px rgba(20,23,27,.38);
}
html[data-theme="light"] .sh-modal-x{ background:#f7f8fd; }
html[data-theme="light"] .sh-modal-x:hover{ color:var(--text); background:#eef1f8; }
html[data-theme="light"] .sh-modal-h,
html[data-theme="light"] .sh-guide-big,
html[data-theme="light"] .sh-steps b{ color:#14171b; }
html[data-theme="light"] .sh-wx-tip b{ color:#5a3a00; }
html[data-theme="light"] .sh-wx-arrow{
  color:#14171b;
  filter:drop-shadow(0 4px 10px rgba(20,23,27,.25));
}
html[data-theme="light"] .sh-guide-big b{ color:#0a7a4f; }
html[data-theme="light"] .sh-link-in{ background:#f6f7fb; }

/* 微信绿→青的渐变，白字要压深两端才够对比度 */
html[data-theme="light"] .sh-copy2{
  color:#fff;
  background:linear-gradient(135deg,#0a8a48,#0e7fc0);
}
html[data-theme="light"] .sh-wx-ok{ background:#f7f8fd; }
html[data-theme="light"] .sh-wx-ok:hover{
  border-color:rgba(79,88,214,.45);
  background:#eef0ff;
}

/* ---------------- 22. 反馈块 ---------------- */
html[data-theme="light"] .tp-report-btn{ background:#f7f8fd; }
html[data-theme="light"] .tp-report-btn:hover{
  color:var(--text);
  border-color:rgba(200,140,20,.45);
  background:#fff8e6;
}
html[data-theme="light"] .tp-report-panel{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .tp-report-opts label:has(input:checked){
  color:var(--text);
  border-color:rgba(79,88,214,.45);
  background:#eef0ff;
}
html[data-theme="light"] .tp-report-note{ background:#fbfcff; }
html[data-theme="light"] .tp-report-note:focus{ border-color:rgba(79,88,214,.45); }
html[data-theme="light"] .tp-report-msg.is-err{ color:#c02b2b; }

/* ---------------- 23. 天梯前三名的 Q 版形象：阴影换浅 ---------------- */
html[data-theme="light"] .pod-chibi::before{
  background:radial-gradient(54% 52% at 50% 58%, rgba(79,88,214,.12), transparent 72%);
}
html[data-theme="light"] .pod-chibi img{
  filter:brightness(var(--chibi-lift,1)) saturate(1.02) drop-shadow(0 6px 14px rgba(20,23,27,.18));
}
html[data-theme="light"] .pod:hover .pod-chibi img{
  filter:brightness(var(--chibi-lift,1)) saturate(1.02) drop-shadow(0 10px 18px rgba(20,23,27,.22));
}

/* ---------------- 24. 手机端顶栏：导航收进「更多」 ----------------
   上一版是把导航字号和内距压窄硬塞进 390px，代价是暗色手机端间距变紧、看着局促。
   这一版改成「更多」菜单：4 个栏目和配色三档都收进面板，
   顶栏只留 Logo / 搜索 / 分享 / 更多，搜索框反而回到 100px 以上，
   而且暗色的字号内距可以完全恢复原样。 */
/* 断点取 900 而不是 640：768 的 iPad 竖屏下 brand+nav+分享+按钮+间距
   已经吃掉 684px，搜索框只剩 37px（输入区 0），和不能用没区别；
   900 的窄笔记本也一样（输入区 89px）。收到「更多」里以后，
   这块宽度全还给搜索框：768 → 319px，390 → 191px。 */
@media (max-width:900px){
  .topbar-in{ gap:8px; }
  .nav{ display:none; }        /* 栏目进「更多」 */
  .theme-btn{ display:none; }  /* 配色三档在「更多」里选 */
  .more-wrap{ display:block; }  /* DOM 顺序在 share 之前，正好落在「分享」左边 */
  .share-btn{ padding:8px 9px; }
}

/* =========================================================
   25. AI Skill 栏目（skills.html）
   ---------------------------------------------------------
   这一页的卡片比教程卡「信息密度高、视觉更素」：
   一条 Skill 要同时说清用途、三维分数、装法和坑，
   所以不做大封面，靠排版分层。星级用两层 ★ 叠宽度裁切，
   底层灰、上层金色，--pct 由 skills.js 写进行内样式。
   ========================================================= */

/* ---- 三张说明卡：进页面先讲清 Skill 是什么 ---- */
.sk-intro{ margin-top:4px; }

.sk-intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.sk-intro-card{
  padding:16px 18px 17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}

.sk-intro-n{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--neon-1);
}

.sk-intro-card b{
  display:block;
  margin-top:7px;
  font-size:13.5px;
  letter-spacing:-.1px;
}

.sk-intro-card em{
  display:block;
  margin-top:7px;
  font-style:normal;
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-2);
}

/* ---- 排序条：紧跟在分类标签下面 ---- */
.sk-sortbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.sk-sort-label{
  font-size:12px;
  color:var(--text-3);
}

.sk-sorts{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.sk-sort-btn{
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
  transition:.18s;
}

.sk-sort-btn:hover{ color:var(--text); border-color:var(--line-2); }

.sk-sort-btn.on{
  color:var(--text);
  font-weight:700;
  border-color:var(--neon-1);
  background:rgba(124,92,255,.13);
}

/* ---- 卡片列表 ---- */
.sk-list{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.sk-card{
  padding:17px 20px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--glass-bg);
  transition:border-color .18s, transform .18s;
}

.sk-card:hover{
  border-color:var(--line-2);
  transform:translateY(-1px);
}

.sk-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.sk-num{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

.sk-name{
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sk-from{
  flex:0 0 auto;
  padding:2px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  color:var(--text-3);
  white-space:nowrap;
}

.sk-rate{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.sk-rate b{
  font-size:15px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* 星条：两层同一个字串，上层按 --pct 裁宽度 */
.sk-stars{
  position:relative;
  display:inline-block;
  line-height:1;
  font-size:13px;
  letter-spacing:1.5px;
}

.sk-stars i{ font-style:normal; }

.sk-stars-bg{ color:var(--line-2); }

.sk-stars-fg{
  position:absolute;
  left:0;
  top:0;
  width:var(--pct,0%);
  overflow:hidden;
  white-space:nowrap;
  color:var(--gold);
}

/* ---- 用途 + 元信息 ---- */
.sk-use{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-2);
}

.sk-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.sk-dims{
  display:flex;
  gap:13px;
  font-size:11.5px;
  color:var(--text-3);
}

.sk-dims b{
  margin-left:4px;
  font-weight:700;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

.sk-cat{
  padding:2px 9px;
  border:1px solid;
  border-radius:999px;
  font-size:11px;
  white-space:nowrap;
}

.sk-repo{
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-3);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:color .18s;
}

.sk-repo:hover{ color:var(--neon-2); }

/* ---- 安装命令 + 复制 ---- */
.sk-cmd{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:7px 7px 7px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-2);
}

.sk-cmd code{
  flex:1;
  min-width:0;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--text-2);
}

.sk-cmd code::-webkit-scrollbar{ display:none; }

.sk-copy{
  flex:0 0 auto;
  padding:5px 12px;
  border:1px solid var(--line-2);
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:.18s;
}

.sk-copy:hover{ color:var(--text); border-color:var(--neon-1); }

/* 复制成功：只变色不加底色，亮暗两套主题都不会糊掉文字 */
.sk-copy.ok{
  color:var(--green);
  border-color:var(--green);
}

/* ---- 坑 / 提醒 ---- */
.sk-note{
  margin-top:9px;
  padding-left:11px;
  border-left:2px solid var(--line-2);
  font-size:12px;
  line-height:1.65;
  color:var(--text-3);
}

/* ---- 页脚评分口径 ---- */
.sk-note-box{
  margin-top:26px;
  padding:18px 20px 19px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}

.sk-note-box>b{ font-size:13.5px; }

.sk-note-box ul{
  margin-top:10px;
  padding-left:18px;
  display:grid;
  gap:8px;
}

.sk-note-box li{
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-2);
}

.sk-note-box li b{
  font-size:12.5px;
  color:var(--text);
}

@media (max-width:940px){
  .sk-intro-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .sk-card{ padding:15px 15px 16px; }
  .sk-name{ font-size:15px; }
  .sk-from{ display:none; }          /* 窄屏先舍来源，名字和分数不能挤掉 */
  .sk-rate b{ font-size:14px; }
  .sk-stars{ font-size:12px; letter-spacing:1px; }
  .sk-meta{ gap:8px 10px; }
  .sk-repo{ margin-left:0; }
  .sk-cmd code{ font-size:11px; }
  .sk-note-box{ padding:16px 16px 17px; }
}

/* ---------------- 26. 我的清单（saved.html） ----------------
   这页是「管理自己存下来的东西」，不是逛的，所以不用网格卡片，
   改成一行一条的列表：左边图标名字，右边三个动作，扫得快、点得准。
   强调色统一用 --gold（和收藏星标同色），一眼就知道「这里是我的收藏」。
   ------------------------------------------------------------- */
.sv-main{
  position:relative;
  z-index:1;
  padding:6px 0 90px;
}

.sv-group{ margin-top:34px; }

.sv-gh{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.sv-gh h2{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.2px;
}

.sv-gh h2 i{
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  padding:1px 7px;
  border-radius:999px;
  color:var(--text-3);
  background:color-mix(in srgb, currentColor 12%, transparent);
}

.sv-gh em{
  font-style:normal;
  font-size:12.5px;
  color:var(--text-3);
}

.sv-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sv-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  transition:border-color .2s, background .2s;
}

.sv-row:hover{
  border-color:var(--line-2);
  background:var(--panel-2);
}

/* 收藏对应的工具已经从库里删掉了：整行压暗，别再让人以为是能点的 */
.sv-row.is-gone{ opacity:.72; }
.sv-gone{
  font-size:11px;
  font-weight:700;
  padding:1px 7px;
  border-radius:6px;
  color:var(--neon-3);
  background:color-mix(in srgb, var(--neon-3) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--neon-3) 32%, transparent);
}

.sv-ico{
  position:relative;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.26);
  overflow:hidden;
}

.sv-ico img{
  width:22px;
  height:22px;
  object-fit:contain;
}

.sv-ico .fb{ display:none; font-size:15px; font-weight:800; color:var(--text-2); }
.sv-ico.is-fb .fb{ display:block; }

.sv-info{
  flex:1 1 auto;
  min-width:0;
}

.sv-name{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.1px;
}

.sv-name a{
  color:inherit;
  text-decoration:none;
  transition:color .18s;
}

.sv-name a:hover{ color:var(--neon-2); }

.sv-desc{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.72;
  color:var(--text-2);
}

.sv-row .card-meta{ margin-top:8px; }

.sv-ops{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}

/* 三个动作共用一套小按钮外观，只有「打开」是链接 */
.sv-mv,
.sv-go,
.sv-del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:.18s;
}

.sv-mv:hover,
.sv-go:hover,
.sv-del:hover{
  color:var(--text);
  border-color:var(--line-2);
}

/* 已经在的那一组：金色实底，并且不可再点 */
.sv-mv.on{
  color:var(--gold);
  border-color:color-mix(in srgb, var(--gold) 45%, transparent);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
  cursor:default;
}

.sv-go{
  color:var(--text);
  border-color:color-mix(in srgb, var(--neon-2) 34%, transparent);
}

.sv-go:hover{
  border-color:color-mix(in srgb, var(--neon-2) 60%, transparent);
  background:color-mix(in srgb, var(--neon-2) 10%, transparent);
}

.sv-del{
  width:28px;
  padding:0;
}

.sv-del svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

.sv-del:hover{
  color:var(--neon-3);
  border-color:color-mix(in srgb, var(--neon-3) 45%, transparent);
  background:color-mix(in srgb, var(--neon-3) 10%, transparent);
}

/* ---- 空态 / 提示 ---- */
.sv-note{
  margin-top:6px;
  padding:18px 18px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--text-3);
  font-size:13px;
  line-height:1.8;
}

.sv-note-lg{ margin-top:26px; text-align:center; }

.sv-empty{
  margin-top:38px;
  padding:58px 26px 54px;
  border:1px dashed var(--line-2);
  border-radius:20px;
  text-align:center;
}

.sv-empty-star{
  display:inline-grid;
  place-items:center;
  width:62px;
  height:62px;
  margin-bottom:20px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background:color-mix(in srgb, var(--gold) 8%, transparent);
}

.sv-empty-star svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linejoin:round;
}

.sv-empty h2{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.3px;
}

.sv-empty p{
  max-width:480px;
  margin:12px auto 22px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.85;
}

/* ---- 页尾：清空 ---- */
.sv-tail{
  margin-top:52px;
  padding-top:22px;
  border-top:1px dashed var(--line);
  text-align:center;
}

.sv-clear{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
  transition:.18s;
}

.sv-clear:hover{
  color:var(--text-2);
  border-color:var(--line-2);
}

/* 「上膛」状态：整颗变红，3 秒内再点就真清空 */
.sv-clear.is-armed{
  color:var(--neon-3);
  border-color:color-mix(in srgb, var(--neon-3) 55%, transparent);
  background:color-mix(in srgb, var(--neon-3) 12%, transparent);
  font-weight:700;
}

.sv-tail em{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-size:11.5px;
  color:var(--text-3);
}

@media (max-width:640px){
  /* 窄屏把动作按钮换到第二行靠右，名字和简介才有整行可用 */
  .sv-row{ flex-wrap:wrap; padding:14px; }
  .sv-ops{ width:100%; justify-content:flex-end; margin-top:11px; }
  .sv-gh{ gap:8px; }
  .sv-gh em{ width:100%; }
  .sv-empty{ padding:44px 20px 40px; }
}

/* ---------------- 27. 工具对比：卡片按钮、底部对比栏、对比页 ----------------
   对比和收藏是两个不同的动作，所以视觉上也刻意分开：
   收藏是金色星星，对比是青色三根柱子。形状、颜色都不同，
   并排放在卡片右下角也不会被当成同一个按钮点错。 */

/* ---- 卡片右下角那一组动作：对比 + 收藏 ---- */
.card-acts{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}
/* 星标本来是靠 margin-left:auto 顶到右边的，进了这一组就该交给组去顶 */
.card-acts .fav{ margin-left:0; }

/* ---- 对比按钮 ---- */
.cmpbtn{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
.cmpbtn svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linejoin:round;
}
.cmpbtn:hover{
  color:var(--neon-2);
  border-color:color-mix(in srgb, var(--neon-2) 45%, transparent);
}
.cmpbtn:active{ transform:scale(.9); }
.cmpbtn.on{
  color:var(--neon-2);
  border-color:color-mix(in srgb, var(--neon-2) 55%, transparent);
  background:color-mix(in srgb, var(--neon-2) 14%, transparent);
}
.cmpbtn.on svg{ fill:currentColor; stroke:none; }
.cmpbtn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--neon-2) 65%, transparent);
  outline-offset:2px;
}
.cmpbtn-lg{ width:30px; height:30px; }
.cmpbtn-lg svg{ width:16px; height:16px; }

/* ---- 底部对比栏 ----
   固定在视口底部，只有选了工具才出现。body 加 .has-tray 补一段内边距，
   否则栏会盖住页脚最后一行。 */
.cmp-tray{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:150;
  border-top:1px solid var(--line-2);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 -14px 36px rgba(0,0,0,.38);
}
.cmp-tray[hidden]{ display:none; }
body.has-tray{ padding-bottom:92px; }

.cmp-tray-in{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding-top:10px;
  padding-bottom:10px;
}
.cmp-tray-n{
  flex:0 0 auto;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text-3);
  white-space:nowrap;
}
.cmp-tray-n b{ margin-left:3px; font-size:15px; color:var(--text); }
.cmp-tray-n i{ font-style:normal; color:var(--text-3); }

.cmp-tray-list{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  padding:2px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.cmp-tray-list::-webkit-scrollbar{ display:none; }

.cmp-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  padding:3px 6px 3px 11px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--panel);
  font-size:12.5px;
  color:var(--text-2);
  white-space:nowrap;
}
.cmp-chip b{ font-weight:700; color:var(--text); }
.cmp-chip-x{
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-3);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:color .15s, background .15s;
}
.cmp-chip-x:hover{ color:var(--bg); background:var(--text-3); }

/* 选满 4 个还去点第 5 个时，这里会浮出一句话。空着就整块不占位 */
.cmp-tray-tip{ flex:0 0 auto; font-style:normal; font-size:12px; color:var(--gold); white-space:nowrap; }
.cmp-tray-tip:empty{ display:none; }
.cmp-tray-in.is-warn{ animation:cmpShake .34s ease-in-out 1; }
@keyframes cmpShake{
  0%,100%{ transform:translateX(0); }
  25%     { transform:translateX(-4px); }
  75%     { transform:translateX(4px); }
}

.cmp-go{
  flex:0 0 auto;
  padding:9px 20px;
  border-radius:999px;
  background:linear-gradient(120deg, var(--neon-1), var(--neon-2));
  color:#0b0b14;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  white-space:nowrap;
  text-decoration:none;
  transition:filter .2s, transform .2s;
}
.cmp-go:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.cmp-go.is-off{
  background:var(--panel);
  border:1px dashed var(--line-2);
  color:var(--text-3);
  font-weight:700;
  cursor:not-allowed;
}
.cmp-go.is-off:hover{ filter:none; transform:none; }

.cmp-clear{
  flex:0 0 auto;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-3);
  font-size:12.5px;
  cursor:pointer;
  transition:color .18s, border-color .18s;
}
.cmp-clear:hover{ color:var(--text-2); border-color:var(--line-2); }

/* ---- 对比页 ---- */
.cmp-main{ padding-bottom:64px; }

.cmp-hint{
  margin:0 0 18px;
  padding:12px 16px;
  border:1px dashed var(--line-2);
  border-radius:12px;
  font-size:13px;
  color:var(--text-2);
}

.cmp-sum{
  margin:0 0 18px;
  padding:14px 18px;
  border:1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-left:3px solid var(--green);
  border-radius:12px;
  background:color-mix(in srgb, var(--green) 8%, transparent);
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-2);
}
.cmp-sum b{ color:var(--green); }

.cmp-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}
.cmp-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
}
.cmp-cap{
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text-3);
}
.cmp-table th,
.cmp-table td{
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td{ border-bottom:0; }

.cmp-dim{
  width:86px;
  font-size:12px;
  font-weight:700;
  color:var(--text-3);
  white-space:nowrap;
}
.cmp-dim-top{ vertical-align:bottom; }
.cmp-col{ padding-top:16px; padding-bottom:16px; }

.cmp-head{ display:flex; align-items:flex-start; gap:9px; }
.cmp-h-ico{ flex:0 0 auto; display:block; }
.cmp-h-ico .ico{ width:34px; height:34px; border-radius:10px; }
.cmp-h-t{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.cmp-h-t b{
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  color:var(--text);
}
.cmp-h-t em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--c, var(--text-3));
}

/* 每个工具右上角那个叉：移出对比 */
.cmp-x{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-left:auto;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--text-3);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:color .16s, border-color .16s, background .16s;
}
.cmp-x:hover{
  color:var(--neon-3);
  border-color:color-mix(in srgb, var(--neon-3) 55%, transparent);
  background:color-mix(in srgb, var(--neon-3) 12%, transparent);
}

.cmp-visit{
  display:inline-block;
  margin-top:9px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--neon-2);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--neon-2) 35%, transparent);
}
.cmp-visit:hover{ border-bottom-color:var(--neon-2); }

.cmp-cell{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-2);
  white-space:nowrap;
}
/* 这一格是「更省事」的那一个：免费 / 免登录 / 国内直连 / 可商用 */
.cmp-cell.is-best{
  color:var(--green);
  font-weight:700;
  background:color-mix(in srgb, var(--green) 9%, transparent);
}
.cmp-cell-desc{
  min-width:200px;
  font-size:12.5px;
  color:var(--text-3);
  white-space:normal;
}

/* ---- 手机端：表格换成一人一张卡（横向滑动看四列太难受了） ---- */
.cmp-cards{ display:none; }

.cmp-card{
  padding:16px 18px 8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
.cmp-card-h{ display:flex; align-items:flex-start; gap:10px; }
.cmp-card-h .cmp-h-ico .ico{ width:38px; height:38px; }
.cmp-card-rows{ margin-top:12px; }
.cmp-kv{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.cmp-kv .k{ flex:0 0 auto; color:var(--text-3); font-size:12px; font-weight:700; }
.cmp-kv .v{ text-align:right; color:var(--text-2); line-height:1.55; }
.cmp-kv .v.is-best{ color:var(--green); font-weight:700; }

.cmp-empty{
  padding:52px 28px 56px;
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  text-align:center;
}
.cmp-empty b{ display:block; margin-bottom:10px; font-size:16px; color:var(--text); }
.cmp-empty p{
  max-width:520px;
  margin:0 auto;
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-2);
}
.cmp-empty a{ color:var(--neon-2); }

.cmp-foot{
  margin:20px 0 0;
  font-size:12px;
  line-height:1.8;
  color:var(--text-3);
}
.cmp-foot strong{ color:var(--text-2); }

/* ---- 顶栏那个「挑工具」下拉 ----
   挂在 .search 上，因为是绝对定位，得给它一个定位上下文 */
.search.combobox{ position:relative; }
.cmp-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:60;
  max-height:min(66vh, 430px);
  overflow-y:auto;
  padding:8px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 20px 52px rgba(0,0,0,.48);
}
.cmp-panel[hidden]{ display:none; }
.cmp-panel-note{
  margin:0 0 6px;
  padding:3px 9px;
  font-size:11.5px;
  color:var(--text-3);
}
.cmp-opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:background .15s;
}
.cmp-opt:hover{ background:var(--panel-2); }
.cmp-opt:disabled{ opacity:.42; cursor:not-allowed; }
.cmp-opt .ico{ width:28px; height:28px; border-radius:8px; }
.cmp-opt-t{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.cmp-opt-t b{ font-size:13px; font-weight:700; }
.cmp-opt-t em{
  font-style:normal;
  font-size:11.5px;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmp-opt-c{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  color:var(--c, var(--text-3));
}

@media (max-width:760px){
  /* 并排四个实在挤不下，换成一人一张卡 */
  .cmp-table-wrap{ display:none; }
  .cmp-cards{ display:grid; gap:14px; }
}

@media (max-width:640px){
  body.has-tray{ padding-bottom:118px; }
  .cmp-tray-in{ flex-wrap:wrap; gap:8px 10px; padding-top:9px; padding-bottom:9px; }
  /* 第一行放「对比 2/4 + 开始对比 + 清空」，第二行整条放已选的名字 */
  .cmp-tray-n{ order:1; }
  .cmp-go{ order:2; margin-left:auto; padding:8px 16px; }
  .cmp-clear{ order:3; }
  .cmp-tray-tip{ order:4; width:100%; }
  .cmp-tray-list{ order:5; width:100%; }
  .cmp-empty{ padding:40px 18px 44px; }
  .cmp-cell-desc{ min-width:150px; }
}

/* ---- 首屏那排胶囊里的对比入口 ----
   和「画画」「写代码」同一行，所以样式向胶囊看齐（同样的圆角、字号、边框），
   只在「已经有选择」之后才染色 —— 一进来就高亮反而像广告位。
   刻意没有做成导航项：它是动作，不是栏目。 */
.ask-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.ask-foot .ask-chips{ margin-top:0; }

/* 对比入口：原本是纯灰玻璃底，混在一排快捷胶囊里几乎看不见。
   现在给一层极淡的靛蓝染色（13% 底 / 38% 描边 / 提亮字色），
   比灰色显眼，又没到「帮我找」那种满饱和渐变的程度 —— 醒目但不抢主 CTA。
   三级梯度：默认淡紫描边 → 选了 1 个转青（.has）→ 选了 2 个以上渐变实心（.ready）。 */
.cmp-entry{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px 6px 10px;
  border:1px solid color-mix(in srgb, var(--neon-1) 40%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--neon-1) 14%, rgba(255,255,255,.03));
  color:color-mix(in srgb, var(--neon-1) 30%, #ffffff);
  font-size:12.5px;
  line-height:1.4;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:color .2s, border-color .2s, background .2s, box-shadow .2s, filter .2s;
}
.cmp-entry svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linejoin:round;
}
.cmp-entry-n{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.cmp-entry-n[hidden]{ display:none; }
.cmp-entry:hover{
  color:#fff;
  border-color:color-mix(in srgb, var(--neon-1) 62%, transparent);
  background:color-mix(in srgb, var(--neon-1) 22%, rgba(255,255,255,.04));
  box-shadow:0 7px 18px -14px color-mix(in srgb, var(--neon-1) 85%, transparent);
}

/* 选了 1 个：染成青色，说明里面有东西了，但还不能比 */
.cmp-entry.has{
  color:var(--neon-2);
  border-color:color-mix(in srgb, var(--neon-2) 48%, transparent);
  background:color-mix(in srgb, var(--neon-2) 15%, transparent);
  box-shadow:0 6px 16px -14px color-mix(in srgb, var(--neon-2) 85%, transparent);
}

/* 选了 2 个以上：可以直接进对比页，做成实心按钮 */
.cmp-entry.ready,
.cmp-entry.ready:hover{
  color:#0b0b14;
  font-weight:800;
  border-color:transparent;
  background:linear-gradient(120deg, var(--neon-1), var(--neon-2));
  box-shadow:0 8px 22px -12px color-mix(in srgb, var(--neon-2) 72%, transparent);
}
.cmp-entry.ready svg{ stroke-width:2.1; }
.cmp-entry.ready:hover{ filter:brightness(1.07); }

/* 浅色：同样的靛蓝染色思路，但底要压到接近白，否则一片紫看着脏 */
html[data-theme="light"] .cmp-entry{
  border-color:color-mix(in srgb, var(--neon-1) 42%, #ffffff);
  background:color-mix(in srgb, var(--neon-1) 11%, #ffffff);
  color:color-mix(in srgb, var(--neon-1) 64%, #14171b);
  box-shadow:none;
}
html[data-theme="light"] .cmp-entry:hover{
  color:color-mix(in srgb, var(--neon-1) 70%, #14171b);
  border-color:color-mix(in srgb, var(--neon-1) 52%, #ffffff);
  background:color-mix(in srgb, var(--neon-1) 14%, #ffffff);
  box-shadow:0 6px 16px -14px color-mix(in srgb, var(--neon-1) 80%, transparent);
}
/* 浅色下青字压不住白底，往墨色里压一档（和分类小标签同一条思路） */
html[data-theme="light"] .cmp-entry.has{
  color:color-mix(in srgb, var(--neon-2) 44%, #14171b);
  border-color:color-mix(in srgb, var(--neon-2) 40%, #ffffff);
  background:color-mix(in srgb, var(--neon-2) 12%, #ffffff);
}
/* 浅色下渐变底是靛蓝→洋红，近黑字会糊在里面，换白字（和「帮我找」一致） */
html[data-theme="light"] .cmp-entry.ready,
html[data-theme="light"] .cmp-entry.ready:hover{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(120deg, var(--neon-1), var(--neon-2));
}

/* ---------------- 页脚：备案号与隐私政策（备案要求，别删） ----------------
   工信部要求备案号放在首页底部显著位置，并链接到 beian.miit.gov.cn。
   公安备案号下来后，加在 .foot-beian 同一行后面即可。 */
.foot-links{
  margin:10px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  justify-content:center;
}
.foot-links a{
  color:var(--text-3);
  text-decoration:none;
  transition:color .18s;
}
.foot-links a:hover{ color:var(--neon-2); }
.foot-beian{
  margin:8px 0 0;
  font-size:12px;
  letter-spacing:.02em;
}
.foot-beian a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  text-decoration:none;
  transition:color .18s;
}
.foot-beian a:hover{ color:var(--text-2); }
.foot-beian img{ width:14px; height:14px; display:block; }
html[data-theme="light"] .foot-links a:hover{ color:color-mix(in srgb, var(--neon-2) 46%, #14171b); }

/* 反馈面板底部的隐私提示 */
.tp-report-privacy{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.75;
  color:var(--text-3);
}
.tp-report-privacy a{
  color:var(--text-2);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------- 隐私政策这类纯文字页 ---------------- */
.legal{
  max-width:760px;
  margin:0 auto;
  padding:0 24px 8px;
}
.legal h2{
  margin:34px 0 10px;
  font-size:19px;
  letter-spacing:.01em;
}
.legal h2:first-child{ margin-top:6px; }
.legal p,
.legal li{
  font-size:14.5px;
  line-height:1.95;
  color:var(--text-2);
}
.legal ul{ margin:8px 0 0; padding-left:18px; }
.legal li{ margin:0 0 6px; }
.legal a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-underline-offset:3px;
}
.legal a:hover{
  color:var(--neon-1);
  text-decoration-color:currentColor;
}
.legal-meta{
  margin:0 0 4px;
  font-size:12.5px;
  color:var(--text-3);
}
.legal-note{
  margin:22px 0 0;
  padding:14px 16px;
  font-size:13px;
  line-height:1.85;
  color:var(--text-3);
  border-left:2px solid var(--line-2);
  background:var(--panel);
  border-radius:0 10px 10px 0;
}