/* ============================================================
   方案 A · 编辑部精选制
   借鉴参考稿：Hero 资源位（左主推 + 右榜单）、大 Tab 分区、
   卡片信息层级（封面/标题/描述/作者行）
   ============================================================ */
/* ============================================================
   绿色配色 —— Hero 和 51 张卡片共用这一套，换色只改这一块。

   [在用] 提亮版深墨绿 #0B623E：就是原来那支深墨绿（H156 S79%），
          色相和饱和度一个数没动，只把明度从 13.3% 抬到 21.3%（+8），
          所以还是「深墨绿」，只是不再往下沉。白字对比度 7.5:1。
          想再亮/再暗，只改 --cbg 和 --cscrim 两处色值，别的全跟着走。

   [已弃] 原深墨绿 #073d27→#04291b   --cscrim:4,38,25      太重太闷
   [已弃] 品牌绿   #5AE893→#38D97C   --cscrim:72,226,134   太响，一整墙荧光绿
                   （这版是深字：--cink:#052a19; --cink2:rgba(5,42,25,.72);
                     --ctag:var(--deep); --ctag-fg:var(--mint); --cmbox:#cdf3dd）
   [已弃] 中间值   #0E7244→#085432   --cscrim:8,84,50      偏亮
   [已弃] 中绿     #15A862→#0B7E49   --cscrim:11,126,73    偏亮偏怪
   ============================================================ */
:root{
  --cbg:linear-gradient(140deg,#0B623E 0%,#084E33 100%);
  --cscrim:8,78,51;                /* 蒙层主色，取渐变暗端，必须同色系封面才化得进去 */
  --cink:#fff;                     /* 标题 */
  --cink2:rgba(226,247,236,.7);    /* 描述 */
  --cedge:rgba(84,233,144,.22);
  --cedge-h:rgba(84,233,144,.5);
  --cmbox:#0a5836;                 /* 封面占位色，取和底色接近的绿，懒加载时不闪黑块 */
  --cbadge:rgba(255,255,255,.16);  /* 右上角产物徽标 */
  --cbadge-fg:#eafff3;
  --cbadge-bd:rgba(255,255,255,.28);
  --ctag:var(--mint);              /* 行业标签 */
  --ctag-fg:var(--deep);
  --cbox-bd:rgba(255,255,255,.16); /* 首卡 Prompt 框 */
  --cbox-bg:rgba(255,255,255,.07);
  --cbox-k:rgba(190,250,215,.9);
  --cbox-t:rgba(232,255,242,.62);
  --ccta:var(--mint);              /* 首卡 / Hero 按钮 */
  --ccta-fg:var(--deep)
}

.shell{max-width:1240px;margin:0 auto;padding:0 22px}

/* ---------- 页头文案 ---------- */
.ph{padding:30px 8px 0}
.ph h1{font-size:29px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.ph .sub{font-size:14px;color:var(--muted);line-height:1.7}
.ph .stat{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.ph .stat .s{display:flex;align-items:baseline;gap:5px}
.ph .stat .s b{font-size:20px;font-weight:800;color:var(--green-strong);letter-spacing:-.02em}
.ph .stat .s span{font-size:12.5px;color:var(--muted)}

/* ---------- HERO 资源位 ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;margin-top:22px}

/* 左：主推案例大卡 */
.spot{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:352px;cursor:pointer;
  background:var(--cbg);
  border:1px solid var(--cedge);
  box-shadow:0 24px 52px -18px rgba(3,70,42,.32);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.spot:hover{transform:translateY(-3px);box-shadow:0 30px 64px -18px rgba(3,70,42,.42)}
.spot-media{
  position:absolute;right:-6%;bottom:-5%;width:60%;height:60%;border-radius:16px 0 0 0;
  overflow:hidden;z-index:1;transform:perspective(900px) rotate(-2deg) scale(1);
  box-shadow:-16px -18px 42px rgba(4,38,25,.2);
  transition:transform .3s var(--ease)
}
.spot:hover .spot-media{transform:perspective(900px) rotate(-2deg) scale(1.03)}
.spot-media img,.spot-media video{width:100%;height:100%;object-fit:cover;object-position:top left}
.spot-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(var(--cscrim)) 0%,rgba(var(--cscrim),.3) 32%,transparent 60%)}
.spot-body{position:relative;z-index:2;height:100%;width:68%;padding:26px 26px 24px;
  display:flex;flex-direction:column;align-items:flex-start}
.spot-kick{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  color:var(--mint);letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.spot-kick .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(80,232,137,.28);animation:sp 1.8s ease infinite}
@keyframes sp{0%,100%{box-shadow:0 0 0 3px rgba(80,232,137,.28)}50%{box-shadow:0 0 0 7px rgba(80,232,137,.1)}}
.spot h2{font-size:clamp(23px,2.3vw,33px);font-weight:850;color:var(--cink);line-height:1.24;
  letter-spacing:-.028em;margin-bottom:13px}
.spot p{font-size:13.5px;line-height:1.78;color:var(--cink2);max-width:400px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spot-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.spot-tags span{padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:600;
  border:1px solid rgba(80,232,137,.4);color:#a8f0c6}
/* 行业标签在深色卡上做实心，和场景标签区分开——两个维度两种样式 */
.spot-tags .sd{background:var(--ctag);border-color:var(--ctag);color:var(--ctag-fg);font-weight:800}
.spot-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  background:var(--ccta);color:var(--ccta-fg);border-radius:99px;padding:10px 20px;
  font-size:13px;font-weight:800;box-shadow:0 10px 26px rgba(80,232,137,.3)}

/* 右：热门榜单 */
.rank{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 18px;min-height:352px;display:flex;flex-direction:column}
.rank-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rank-h h4{font-size:14.5px;font-weight:750;color:var(--ink)}
.rank-h .tip{font-size:11.5px;color:var(--subtle)}
/* 7 条榜单撑满但不溢出 352px：ul 均分剩余高度，li 不允许被压缩出界 */
.rank ul{list-style:none;flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:2px}
/* flex:1 让 7 条撑满桌面端 352px；min-height 保证移动端 height:auto 时不会挤成一坨 */
.rank li{display:flex;align-items:center;gap:11px;padding:0 11px;border-radius:10px;
  flex:1;min-height:38px;cursor:pointer;transition:background .18s}
.rank li:hover{background:var(--bg)}
.rank li.on{background:var(--mint-soft);border:1px solid #c9efda}
.rank li .n{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;flex:none;
  font-size:11.5px;font-weight:800;color:var(--subtle);background:var(--bg)}
.rank li:nth-child(1) .n{background:var(--green);color:#fff}
.rank li:nth-child(2) .n{background:#feecd5;color:#b36d1f}
.rank li:nth-child(3) .n{background:#f0edfc;color:#5a45c2}
.rank li .t{flex:1;min-width:0;font-size:13px;color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank li .k{flex:none}

/* ---------- 大 Tab 分区 ---------- */
/* 6 个 Tab（全部 + 5 场景）：收一点字号和间距，保证一行放得下 */
.tabs{display:flex;align-items:center;gap:20px;margin-top:32px;padding:0 8px;flex-wrap:wrap}
.tab{font-size:17.5px;font-weight:500;color:var(--subtle);cursor:pointer;padding-bottom:6px;
  border-bottom:2px solid transparent;transition:.18s;background:none;white-space:nowrap}
.tab.on{color:var(--ink);font-weight:800;border-bottom-color:var(--green)}
.tab .c{font-size:12px;font-weight:600;color:var(--subtle);margin-left:5px;vertical-align:2px}
/* 搜索框贴在 Tab 行最右（排序开关已去掉，这里不再有第二个元素） */
.tabs .fsearch{margin-left:auto}

/* ---------- 筛选（任务分组 + 产物） ---------- */
.filters{margin-top:16px;padding:0 8px}
.frow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.frow .fl{font-size:12px;font-weight:700;color:var(--subtle);width:60px;flex:none;line-height:1.5}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:600;transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--green);color:var(--green-strong)}
.chip.on{background:var(--deep);border-color:var(--deep);color:var(--mint)}
.chip .n{font-size:10.5px;opacity:.62;font-weight:600}
.chip svg{opacity:.72}
.fsearch{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;color:var(--subtle);transition:.18s}
.fsearch:focus-within{border-color:var(--green)}
.fsearch input{border:none;outline:none;background:none;font-size:12.5px;width:172px;color:var(--ink)}

/* ---------- 区块标题 ---------- */
.sec{display:flex;align-items:baseline;gap:12px;margin:30px 8px 14px;flex-wrap:wrap}
.sec h3{font-size:17.5px;font-weight:780;color:var(--ink);letter-spacing:-.015em}
.sec .d{font-size:12.5px;color:var(--subtle)}
.sec .m{margin-left:auto;font-size:13px;font-weight:600;color:var(--green-ink);
  display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.sec .m:hover{color:var(--green-strong)}

/* ---------- 案例网格 ----------
   卡片和 Hero 同一套语言：深绿底 + 封面侧放（右下角旋转 2°）+ 蒙层，
   标题、描述、标签全部压在封面上。
   为什么这么做：51 张封面的亮度、构图、底色差异极大（深色终端、白底表格、
   彩色海报都有），并排时最刺眼的就是「不统一」。统一蒙层和统一底色以后，
   卡片阵列的观感由卡片决定，而不是由素材决定。 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 8px}
.card{position:relative;aspect-ratio:5/4;overflow:hidden;cursor:pointer;
  border-radius:var(--radius-lg);background:var(--cbg);
  border:1px solid var(--cedge);
  box-shadow:0 16px 36px -20px rgba(3,70,42,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px);border-color:var(--cedge-h);
  box-shadow:0 26px 54px -18px rgba(3,70,42,.38)}
/* 侧放的那块封面。右下出血、只圆左上角，和 Hero 的 spot-media 同一手法 */
.card .mbox{position:absolute;right:-6%;bottom:-5%;width:72%;height:60%;
  border-radius:14px 0 0 0;overflow:hidden;z-index:1;background:var(--cmbox);
  transform:perspective(900px) rotate(-2deg);
  box-shadow:-14px -16px 32px rgba(4,38,25,.16);
  transition:transform .3s var(--ease)}
.card:hover .mbox{transform:perspective(900px) rotate(-2deg) scale(1.035)}
.card .mbox img,.card .mbox video{width:100%;height:100%;object-fit:cover;object-position:top left}
/* 蒙层：左侧压成底色、右侧透出产物。z-index 2 是为了悬停播放时视频也一起压住，
   否则视频（z-index 1）会盖过蒙层，文字底下突然变亮 */
.card .mbox::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgb(var(--cscrim)) 0%,rgba(var(--cscrim),.34) 30%,transparent 58%)}
/* 卡片级蒙层：压在封面之上、文字之下。
   只靠封面自己那层渐变不够 —— 白底 Excel、浅色海报这类封面推到 40% 处还是很亮。
   但标题/描述实际落在封面上沿（45%）之上，中段不需要压那么死，
   所以 55% 之后迅速收掉，右半边把产物让出来。 */
.card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,rgba(var(--cscrim),.96) 0 38%,rgba(var(--cscrim),.55) 55%,
    rgba(var(--cscrim),.1) 76%,rgba(var(--cscrim),0) 92%)}
.card .body{position:relative;z-index:3;padding:17px 17px 0;width:78%}
.card h4{font-size:15px;font-weight:800;color:var(--cink);line-height:1.5;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:7px}
.card p{font-size:12px;line-height:1.7;color:var(--cink2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 产物类型徽标移到右上角（原来在封面左上，封面一转就跟着歪） */
.card .kind{position:absolute;right:14px;top:14px;z-index:4;
  background:var(--cbadge);color:var(--cbadge-fg);border:1px solid var(--cbadge-bd);
  backdrop-filter:blur(6px);font-weight:700}
.card .play{position:absolute;right:18px;bottom:16px;z-index:4;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  color:var(--deep);box-shadow:0 5px 14px rgba(4,38,25,.24)}
/* 底栏贴卡片下沿，只放行业一个实心标签（场景描边标签两个挤一起太碎，已去掉） */
.card .foot{position:absolute;left:17px;right:17px;bottom:15px;z-index:3;
  display:flex;align-items:center;gap:6px}
.card .dtag{background:var(--ctag);border:1px solid var(--ctag);color:var(--ctag-fg);
  font-weight:800;font-size:11px;padding:4px 11px;border-radius:99px}

/* <a> 版卡片继承父级颜色、去掉下划线；display:block 让它接管原来 <article> 的布局角色 */
a.card,a.spot{color:inherit;text-decoration:none;display:block}
a.card:focus-visible,a.spot:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* 榜单条目也换成 <a>：撑满 li、保留原来的 flex 排列 */
.rank li a{display:flex;align-items:center;gap:11px;flex:1;min-width:0;height:100%;
  color:inherit;text-decoration:none;padding:0 11px;border-radius:10px}
.rank li a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.dtag{display:inline-flex;align-items:center;flex:none;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:6px;letter-spacing:.01em;white-space:nowrap;
  background:var(--mint-soft);color:var(--green-ink);border:1px solid #d3eede}

/* 区块标题上的当前筛选范围 */
.sec .scope{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;
  background:var(--mint-soft);color:var(--green-ink);border:1px solid #d3eede}

/* ---------- 精选首卡（跨 2 列 × 2 行，等于一块小 Hero） ---------- */
.grid.feat .card.lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.grid.feat .card.lead .mbox{width:64%;height:66%;right:-4%;bottom:-4%;border-radius:18px 0 0 0}
.grid.feat .card.lead .body{padding:26px 26px 0;width:68%}
.grid.feat .card.lead h4{font-size:25px;line-height:1.32;-webkit-line-clamp:2;margin-bottom:12px}
.grid.feat .card.lead p{font-size:13.5px;line-height:1.8;-webkit-line-clamp:3;max-width:430px}
/* Prompt 预览 */
.grid.feat .card.lead .lprompt{margin-top:16px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--cbox-bd);background:var(--cbox-bg);max-width:460px}
.grid.feat .card.lead .lp-k{display:block;font-size:10px;font-weight:800;color:var(--cbox-k);
  letter-spacing:.06em;margin-bottom:5px}
.grid.feat .card.lead .lp-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.7;color:var(--cbox-t)}
/* 底栏在大卡上分两行：标签一行，CTA 另起一行（flex 元素会自己换行） */
.grid.feat .card.lead .foot{left:26px;right:26px;bottom:22px;display:block}
.grid.feat .card.lead .dtag{font-size:11.5px;padding:5px 12px}
.grid.feat .card.lead .lcta{display:flex;width:max-content;align-items:center;gap:6px;margin-top:14px;
  background:var(--ccta);color:var(--ccta-fg);border-radius:99px;padding:9px 18px;
  font-size:13px;font-weight:800;box-shadow:0 10px 26px rgba(4,38,25,.22)}
.grid.feat .card.lead .lcta svg{transition:transform .2s var(--ease)}
.grid.feat .card.lead:hover .lcta svg{transform:translateX(3px)}
.grid.feat .card.lead .play{width:38px;height:38px;right:22px;bottom:20px}

@media(max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .rank{height:auto}
  /* 高度不再写死：标题/描述行数变多时卡片自己长高，
     写死高度会让 flex 把描述段压成「半行被切」的残句 */
  .spot{min-height:320px}
  .grid{grid-template-columns:repeat(2,1fr)}
  /* 两列下首卡独占一整行，不再跨行 */
  .grid.feat .card.lead{grid-column:span 2;grid-row:span 1;aspect-ratio:2/1}
  .grid.feat .card.lead h4{font-size:21px}
  .grid.feat .card.lead .lprompt{display:none}
  /* 两列下卡片变矮变宽，封面要跟着长大，否则左下角空一大块 */
  #grid .card:not(.lead) .mbox{width:76%;height:66%}
  .grid.feat .card.lead .mbox{width:56%;height:76%}
}
@media(max-width:680px){
  .grid{grid-template-columns:1fr}
  .card{aspect-ratio:16/10}
  .card .body{width:84%}
  .grid.feat .card.lead{grid-column:span 1;grid-row:span 1;aspect-ratio:16/10}
  .grid.feat .card.lead h4{font-size:17px}
  .grid.feat .card.lead .body{width:84%;padding:18px 18px 0}
  .grid.feat .card.lead .foot{left:18px;right:18px;bottom:16px}
  /* 单列：卡片最宽最矮，封面开到最大，文字仍在封面上沿之上 */
  #grid .card .mbox,.grid.feat .card.lead .mbox{width:82%;height:74%}
  .spot-body{width:100%;background:linear-gradient(180deg,rgba(var(--cscrim),.2),rgba(var(--cscrim),.9))}
  .spot-media{width:100%;height:52%;right:0;bottom:0;border-radius:0}
  .ph h1{font-size:24px}
  .tab{font-size:16px}
}