/* ============================================================
   仲晴-剑桥国际英语 · 统一教务工作台
   样式表 · 与 zq-tcpk.cn 品牌色一致
   ============================================================ */

:root{
  --brand:       #FF7A3C;
  --brand-2:     #FF9A56;
  --brand-grad:  linear-gradient(135deg,#FFA24E 0%,#FF6B35 100%);

  --teach:       #FF7A3C;
  --teach-grad:  linear-gradient(135deg,#FFA24E 0%,#FF6B35 100%);
  --teach-soft:  #FFF3EC;

  --affair:      #3D63D8;
  --affair-grad: linear-gradient(135deg,#5B8DF8 0%,#3D63D8 100%);
  --affair-soft: #EEF3FE;

  --finance:     #22A06B;
  --finance-grad:linear-gradient(135deg,#3ECF8E 0%,#1E8E5E 100%);
  --finance-soft:#EBF8F2;

  --bg:          #F4F6FA;
  --surface:     #FFFFFF;
  --text:        #1F2733;
  --text-2:      #4A5666;
  --muted:       #7B8794;
  --border:      #E5EAF1;
  --border-2:    #EFF3F8;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 1px 3px rgba(23,43,77,.06), 0 8px 24px rgba(23,43,77,.06);
  --shadow-lg:   0 12px 40px rgba(23,43,77,.14);
}

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

html,body{height:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------------- 顶栏 ---------------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.topbar-inner{
  max-width:1200px;margin:0 auto;padding:0 28px;
  height:66px;display:flex;align-items:center;gap:14px;
}
.logo{
  width:37px;height:42px;border-radius:0;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:17px;letter-spacing:-.5px;
  box-shadow:0 3px 10px rgba(255,107,53,.22);
  flex:none;
}
/* 2026-10-03 换成品牌图 logo。
   注意：源图是「竖版」构图（1280x1475，宽高比 0.868），不是正方形。
   踩过的坑：曾把它裁成正方形 + object-fit:cover，结果上下各切掉 ~100px，
   图形顶部第一行与底部第二行被切平、显不完整。
   正确做法：源图按原比例缩放（logo_256.jpg = 222x256），容器同比例，
   object-fit:contain 完整显示，且容器不加 overflow:hidden / border-radius，
   圆角交给图片自身造型，避免二次裁切。 */
.logo img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
/* 品牌名双色 · 苹果系统风格（2026-10-03）
   仲晴 = 橙色；剑桥国际英语 = 天蓝色。
   Apple 风格要点：**克制**。用系统字体栈 + 精细字重 + 单色/极浅渐变，
   靠字面本身（SF Pro 的光学尺寸、字距）取胜，不加发光、不加立体阴影、
   不加描边。之前的水晶质感（多层 drop-shadow + 高对比渐变）在小字号下
   会糊成一片并互相染色，已弃用。 */
.brand-name{
  font-size:17px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:baseline;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
              "PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.brand-name>span{display:inline-block}
/* 单色为主，仅保留极轻的同色向渐变，模拟 Apple 商标字标的通透感 */
.bn-a{
  color:#FF6B35;
  background-image:linear-gradient(180deg,#FF8A4C 0%,#FF6B35 62%,#F2601F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.bn-b{
  margin-left:.18em;
  color:#0B84D6;
  background-image:linear-gradient(180deg,#3FA9E8 0%,#0B84D6 62%,#0A74BC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* 已删除中间的连字符，仅留两段之间的呼吸间距 */
.brand-sub{font-size:11.5px;color:var(--muted);letter-spacing:.4px}
.topbar-spacer{flex:1}
.topbar-meta{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot-live{
  width:7px;height:7px;border-radius:50%;background:#3ECF8E;
  box-shadow:0 0 0 3px rgba(62,207,142,.18);flex:none;
}
.back-link{
  font-size:13px;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface);transition:all .16s;
}
.back-link:hover{border-color:#CBD5E1;color:var(--text);transform:translateX(-2px)}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.crumb b{color:var(--text);font-weight:600}
.crumb span.sep{color:#C7D0DB}

/* ---------------- 页面容器 ---------------- */
.wrap{max-width:1200px;margin:0 auto;padding:52px 28px 80px}
.wrap.narrow{padding-top:40px}

/* ---------------- 首页 Hero ---------------- */
.hero{text-align:center;margin-bottom:44px}
.hero h1{
  font-size:33px;font-weight:700;letter-spacing:-.4px;
  margin-bottom:12px;color:var(--text);
}
.hero p{font-size:15px;color:var(--muted);max-width:620px;margin:0 auto}
.hero .hint{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:12.5px;color:var(--text-2);background:var(--surface);
  border:1px solid var(--border);border-radius:100px;padding:7px 16px;
}

/* ---------------- 三大顶层卡片 ---------------- */
.top-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.top-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:32px 30px 28px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s,border-color .22s;
  display:flex;flex-direction:column;
}
.top-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent-grad);
}
.top-card::after{
  content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;
  border-radius:50%;background:var(--accent-soft);opacity:.75;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.top-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.top-card:hover::after{transform:scale(1.35)}

.top-card.teach  {--accent:var(--teach);  --accent-grad:var(--teach-grad);  --accent-soft:var(--teach-soft)}
.top-card.affair {--accent:var(--affair); --accent-grad:var(--affair-grad); --accent-soft:var(--affair-soft)}
.top-card.finance{--accent:var(--finance);--accent-grad:var(--finance-grad);--accent-soft:var(--finance-soft)}

.tc-icon{
  width:58px;height:58px;border-radius:16px;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -4px var(--accent);position:relative;z-index:1;
  margin-bottom:22px;
}
.tc-icon svg{width:29px;height:29px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

.tc-title{
  font-size:23px;font-weight:700;letter-spacing:-.2px;margin-bottom:10px;
  position:relative;z-index:1;color:#fff0;
}
.tc-title{color:var(--text)}
.tc-desc{
  font-size:13.5px;color:var(--text-2);line-height:1.75;margin-bottom:20px;
  position:relative;z-index:1;flex:1;
}
.tc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px;position:relative;z-index:1}
.tag{
  font-size:11.5px;padding:4px 11px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent);font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  white-space:nowrap;
}
.tag.plain{background:var(--border-2);color:var(--muted);border-color:transparent;font-weight:500}

.tc-action{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px dashed var(--border);position:relative;z-index:1;
}
.tc-count{font-size:12.5px;color:var(--muted)}
.tc-count b{color:var(--text);font-size:17px;font-weight:700;margin-right:2px}
.tc-go{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--accent);
}
.tc-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.top-card:hover .tc-go svg{transform:translateX(4px)}

/* ---------------- 内页头部 ---------------- */
.page-head{
  display:flex;align-items:flex-start;gap:18px;margin-bottom:34px;
  padding:26px 28px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.page-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent-grad)}
.page-head .ph-icon{
  width:52px;height:52px;border-radius:14px;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 8px 18px -6px var(--accent);
}
.page-head .ph-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.page-head h1{font-size:24px;font-weight:700;letter-spacing:-.2px;margin-bottom:6px}
.page-head p{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:760px}
.page-head .ph-count{
  margin-left:auto;flex:none;text-align:right;padding-left:20px;
}
.ph-count .num{font-size:26px;font-weight:700;color:var(--accent);line-height:1}
.ph-count .lbl{font-size:11.5px;color:var(--muted);margin-top:4px}

/* ---------------- 分组标题 ---------------- */
.group-title{
  display:flex;align-items:center;gap:10px;margin:34px 0 16px;
  font-size:14.5px;font-weight:650;color:var(--text-2);
}
.group-title:first-of-type{margin-top:0}
.group-title::after{content:"";flex:1;height:1px;background:var(--border)}
.group-title .gcount{
  font-size:11.5px;font-weight:500;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;padding:2px 9px;
}

/* ---------------- 子模块卡片 ---------------- */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mod-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:22px 22px 20px;display:flex;flex-direction:column;
  transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;
}
.mod-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 10px 28px rgba(23,43,77,.10)}
.mod-card.off{opacity:.62;background:linear-gradient(180deg,#FCFDFE,#F7F9FC)}
.mod-card.off:hover{transform:none;border-color:var(--border);box-shadow:none}
.mod-card.retired{opacity:.55;background:#FAFBFC}

.mc-top{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.mc-icon{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
}
.mc-icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mc-name{font-size:15.5px;font-weight:650;letter-spacing:-.1px}
.mc-desc{font-size:12.8px;color:var(--text-2);line-height:1.72;flex:1;margin-bottom:15px}

.mc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.mc-tags .tag{padding:3px 9px;font-size:11px}

.mc-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:13px;border-top:1px solid var(--border-2);
}
.mc-url{
  font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%;
}
.mc-go{font-size:12.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;flex:none}
.mc-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.status{
  font-size:10.5px;font-weight:650;padding:3px 9px;border-radius:6px;
  letter-spacing:.2px;white-space:nowrap;margin-left:auto;flex:none;
}
.status.live{background:#E7F8F0;color:#1E8E5E}
.status.build{background:#FFF4E5;color:#B26B00}
.status.plan{background:#EEF3FE;color:#3D63D8}
.status.retired{background:#F1F3F6;color:#8695A6}
.status.local{background:#F3EEFF;color:#6D4AC7}

/* ---------------- 数据互通区块 ---------------- */
.section{margin-top:52px}
.section-head{margin-bottom:20px}
.section-head h2{font-size:19px;font-weight:700;letter-spacing:-.2px;margin-bottom:7px}
.section-head p{font-size:13px;color:var(--muted)}

.share-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.share-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;
}
.share-card h3{
  font-size:14.5px;font-weight:650;margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
.share-card h3 .sh-badge{
  width:26px;height:26px;border-radius:8px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.share-card h3 .sh-badge svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.share-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.share-card li{
  font-size:12.8px;color:var(--text-2);line-height:1.65;padding-left:16px;position:relative;
}
.share-card li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.6;
}
.share-card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.8px;
  background:var(--border-2);padding:1.5px 6px;border-radius:5px;color:var(--text);
}

/* ---------------- 提示条 ---------------- */
.notice{
  display:flex;gap:12px;align-items:flex-start;
  background:#FFFBF4;border:1px solid #FBE6C0;border-radius:12px;
  padding:15px 18px;margin-bottom:26px;
}
.notice svg{width:18px;height:18px;stroke:#D99414;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.notice p{font-size:12.8px;color:#8A6413;line-height:1.7}
.notice b{color:#75530A}

/* ---------------- 页脚 ---------------- */
.footer{
  text-align:center;padding:30px 20px 40px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--border);margin-top:20px;
}
.footer b{color:var(--text-2);font-weight:600}

/* ---------------- 响应式（手机 / 平板 / PC 三端） ---------------- */

/* 平板及以下 */
@media (max-width:1000px){
  .top-grid{grid-template-columns:1fr;gap:18px}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .share-grid{grid-template-columns:1fr}
}

/* 手机 / 竖屏平板 */
@media (max-width:680px){
  .wrap{padding:32px 16px calc(56px + env(safe-area-inset-bottom))}
  .wrap.narrow{padding-top:26px}
  .topbar-inner{padding:0 16px}
  .hero{margin-bottom:32px}
  .hero h1{font-size:25px}
  .hero p{font-size:14px}
  .mod-grid{grid-template-columns:1fr;gap:14px}
  .page-head{flex-wrap:wrap;padding:20px;gap:14px}
  .page-head .ph-count{margin-left:0;text-align:left;padding-left:0;width:100%}
  .topbar-meta{display:none}
  .notice{padding:13px 15px}
  .section{margin-top:38px}
}

/* 小屏手机 */
@media (max-width:480px){
  .wrap{padding:26px 13px calc(48px + env(safe-area-inset-bottom))}
  .topbar-inner{padding:0 13px;height:58px;gap:10px}
  .logo{width:32px;height:36px;font-size:15px}  .brand-name{font-size:15px}
  .brand-sub{font-size:10.5px}

  .hero h1{font-size:22px}
  .hero p{font-size:13.5px}
  .hero .hint{font-size:11.5px;padding:7px 13px;text-align:left;line-height:1.5}

  /* 顶层大卡 */
  .top-grid{gap:14px}
  .top-card{padding:24px 20px 22px;border-radius:16px}
  .tc-icon{width:50px;height:50px;border-radius:14px;margin-bottom:16px}
  .tc-icon svg{width:25px;height:25px}
  .tc-title{font-size:20px;margin-bottom:8px}
  .tc-desc{font-size:13px;margin-bottom:16px}
  .tc-action{flex-wrap:wrap;gap:8px;padding-top:15px}
  .tc-go{font-size:13px}

  /* 内页头部 */
  .page-head{padding:16px;margin-bottom:24px;border-radius:15px}
  .page-head h1{font-size:19px}
  .page-head p{font-size:12.5px}
  .page-head .ph-icon{width:44px;height:44px;border-radius:12px}
  .page-head .ph-icon svg{width:22px;height:22px}
  .ph-count .num{font-size:22px}

  /* 分组与子模块卡 */
  .group-title{margin:26px 0 13px;font-size:13.5px}
  .mod-card{padding:17px 16px 15px;border-radius:13px}
  .mc-top{gap:9px;margin-bottom:11px}
  .mc-icon{width:34px;height:34px;border-radius:10px}
  .mc-icon svg{width:18px;height:18px}
  .mc-name{font-size:15px}
  .mc-desc{font-size:12.5px;margin-bottom:13px}
  .mc-foot{justify-content:flex-end}
  .mc-url{display:none}          /* 窄屏隐藏冗长 URL，避免挤压操作区 */
  .status{font-size:10px;padding:3px 7px}

  /* 数据互通区块 */
  .share-grid{gap:13px}
  .share-card{padding:16px 17px;border-radius:13px}
  .share-card h3{font-size:14px}
  .share-card li{font-size:12.5px}

  .back-link{padding:9px 13px}
  .footer{font-size:11px;padding:24px 14px 32px}
}

/* 触屏设备：去掉 hover 位移，避免点按后卡片"卡住" */
@media (hover:none),(pointer:coarse){
  .top-card:hover{transform:none}
  .mod-card:hover{transform:none}
  .back-link:hover{transform:none}
  .top-card,.mod-card,.back-link{-webkit-tap-highlight-color:transparent}
}


/* ==========================================================================
   模块功能介绍隐藏（2026-10-03）
   需求：各模块界面不再展示长段功能介绍文案。
   实现：仅 CSS 隐藏，HTML 源码原样保留 —— 去掉本段即可全部恢复。
   ========================================================================== */
.mc-desc,.tc-desc{display:none !important}
/* 简介消失后，标签组自然上移到卡片底部，保持间距不粘连 */
.mc-desc + .mc-tags,.tc-desc + .tc-tags{margin-top:0}


/* ==========================================================================
   Apple 设计语言覆盖层（2026-10-03）
   目标：把整套工作台从「深阴影 + 重描边 + 高饱和渐变」改为 Apple 式观感。
   做法：**只追加覆盖层，不改原样式主体** —— 删掉本段即可完全回滚。

   Apple 设计的六条准则（对应下方各条覆盖）：
   1. 大留白 + 宽松行距，而非用边框划区块
   2. 极轻的分隔线（半透明黑），不用实色灰边
   3. 阴影要「双层且极淡」：一层贴地扩散，一层环境光
   4. 圆角统一且偏大（连续圆角观感）
   5. 强调色克制使用，只在关键处点缀
   6. 动效用 spring 感的缓动，不用线性/匀速
   ========================================================================== */

/* ---- 1. 设计令牌：中性色阶改为 Apple 灰 ---- */
:root{
  /* Apple 灰阶：背景用 #F5F5F7(官网同款)，分隔线用半透明黑 */
  --bg:          #F5F5F7;
  --surface:     #FFFFFF;
  --text:        #1D1D1F;          /* Apple 官方近黑 */
  --text-2:      #424245;
  --muted:       #86868B;          /* Apple 官方次级灰 */
  --border:      rgba(0,0,0,.08);
  --border-2:    rgba(0,0,0,.05);
  --radius:      20px;
  --radius-sm:   12px;
  /* 阴影：贴地一层 + 环境光一层，都是极淡的大扩散 */
  --shadow:      0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.06);
  --shadow-lg:   0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.10);

  /* 品牌色略降饱和，更贴近 Apple 的柔和观感 */
  --teach:       #F26B3A;
  --teach-grad:  linear-gradient(145deg,#FF8A52 0%,#F26B3A 100%);
  --teach-soft:  #FFF2EC;

  --affair:      #3B6FE0;
  --affair-grad: linear-gradient(145deg,#5B8DEF 0%,#3B6FE0 100%);
  --affair-soft: #EDF2FD;

  --finance:     #1E9E6A;
  --finance-grad:linear-gradient(145deg,#40C48D 0%,#1E9E6A 100%);
  --finance-soft:#E9F7F1;
}

/* ---- 2. 字体：真正的系统栈 + 光学字重 ---- */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  letter-spacing:-.01em;                    /* Apple 全局负字距 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;           /* 打开字距调整 */
}

/* ---- 3. 顶栏：毛玻璃 + 发丝线（Apple 导航栏特征） ---- */
.topbar{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.topbar-inner{height:60px;gap:12px}

/* ---- 4. 大留白：Apple 用空间而非线条分区 ---- */
.wrap{padding:64px 28px 96px}
.wrap.narrow{padding-top:52px}
.hero{margin-bottom:52px}
.hero h1{font-size:40px;font-weight:700;letter-spacing:-.025em;margin-bottom:0}

/* ---- 5. 顶部大类卡：大圆角 + 柔和阴影 + spring 动效 ---- */
.top-grid{gap:22px}
.top-card{
  border-radius:24px;
  padding:36px 32px 30px;
  border:1px solid var(--border-2);
  box-shadow:var(--shadow);
  /* Apple 式缓动：起步快、收尾柔和 */
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .5s cubic-bezier(.16,1,.3,1),
             border-color .5s cubic-bezier(.16,1,.3,1);
}
.top-card::before{
  height:4px;opacity:.9;
  /* 顶部彩条改为渐隐，更接近 Apple 的细腻过渡 */
  background:linear-gradient(90deg,var(--accent-grad),transparent 78%);
}
.top-card::after{
  right:-90px;top:-90px;width:230px;height:230px;
  opacity:.55;filter:blur(8px);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.top-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.top-card:hover::after{transform:scale(1.28)}

/* 图标块：Apple 用柔和的内嵌感，而非浓重投影 */
.tc-icon{
  width:56px;height:56px;border-radius:16px;
  box-shadow:0 6px 16px -6px var(--accent);
  margin-bottom:24px;
}
.tc-icon svg{width:28px;height:28px;stroke-width:1.7}
.tc-title{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.tc-count b{font-weight:600}
.tc-go svg{transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* ---- 6. 内页头部 ---- */
.page-head{
  border-radius:22px;
  padding:30px 32px;
  border:1px solid var(--border-2);
  box-shadow:var(--shadow);
}
.page-head::before{width:4px}
.page-head .ph-icon{
  width:54px;height:54px;border-radius:15px;
  box-shadow:0 6px 16px -6px var(--accent);
}
.page-head .ph-icon svg{stroke-width:1.7}
.page-head h1{font-size:26px;font-weight:600;letter-spacing:-.02em}
.ph-count .num{font-weight:600}

/* ---- 7. 分组标题：不用实线，改淡色 ---- */
.group-title{font-weight:600;letter-spacing:-.01em}
.group-title::after{background:var(--border-2)}

/* ---- 8. 子模块卡：更方的圆角 + 更轻的边 ---- */
.mod-grid{gap:16px}
.mod-card{
  border-radius:18px;
  border:1px solid var(--border-2);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             box-shadow .45s cubic-bezier(.16,1,.3,1),
             border-color .45s cubic-bezier(.16,1,.3,1);
}
.mod-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.08);
}
.mc-icon{border-radius:11px}
.mc-name{font-weight:600;letter-spacing:-.01em}
.mc-foot{border-top-color:var(--border-2)}

/* ---- 9. 标签：胶囊更圆润 ---- */
.tag{
  border-radius:100px;font-weight:500;
  border-color:color-mix(in srgb,var(--accent) 12%,transparent);
}
.mc-tags .tag{border-radius:100px;font-weight:500}
.status{border-radius:100px;font-weight:500;letter-spacing:0}

/* ---- 10. 返回按钮 / 面包屑 / 提示条 ---- */
.back-link{
  border-radius:100px;border-color:var(--border);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.notice{
  background:#FFFBF5;border:1px solid rgba(217,148,20,.16);
  border-radius:16px;
}

/* ---- 11. 页脚：去掉分割线，用留白分隔 ---- */
.footer{
  border-top:none;
  margin-top:32px;padding:44px 20px 56px;
  font-size:12.5px;
}


/* ---- 12. 触屏：Apple 强调按钮即点即响，无需位移 ---- */
@media (hover:none),(pointer:coarse){
  .top-card:hover{transform:none}
  .mod-card:hover{transform:none}
  .back-link:hover{transform:none}
  .top-card:active,.mod-card:active{transform:scale(.985)}
  .top-card,.mod-card,.back-link{-webkit-tap-highlight-color:transparent}
}

/* ---- 13. 溢出兜底 + 覆盖层自身的响应式对齐 ----
   覆盖层把 .wrap padding 加大到 64px/28px，若不同步调整小屏规则，
   窄屏会因 padding 挤压内容导致横向溢出，故在此补齐。 */
html,body{overflow-x:hidden}

@media (max-width:680px){
  .wrap{padding:34px 16px 64px}
  .wrap.narrow{padding-top:28px}
  .hero{margin-bottom:34px}
  .hero h1{font-size:28px;letter-spacing:-.02em}
  .top-card{padding:28px 24px 24px;border-radius:22px}
  .tc-title{font-size:21px}
  .page-head{padding:22px 20px;border-radius:20px}
  .page-head h1{font-size:22px}
}
@media (max-width:480px){
  .wrap{padding:26px 13px 52px}
  .wrap.narrow{padding-top:22px}
  .topbar-inner{height:56px;padding:0 13px;gap:10px}
  .hero{margin-bottom:26px}
  .hero h1{font-size:24px}
  .top-grid{gap:14px}
  .top-card{padding:24px 20px 22px;border-radius:20px}
  .tc-icon{width:50px;height:50px;border-radius:14px;margin-bottom:18px}
  .tc-icon svg{width:25px;height:25px}
  .tc-title{font-size:19px}
  .tc-action{padding-top:16px;flex-wrap:wrap;gap:8px}
  .mod-card{padding:17px 16px 15px;border-radius:16px}
  .page-head{padding:18px 16px;margin-bottom:24px;border-radius:18px}
  .page-head h1{font-size:19px}
  .page-head .ph-icon{width:46px;height:46px;border-radius:13px}
  .page-head .ph-icon svg{width:23px;height:23px}
  .footer{margin-top:24px;padding:30px 14px 40px}
}

/* ==========================================================================
   内页模块排列优化（2026-10-03）
   问题：原 `.mod-grid{grid-template-columns:repeat(3,1fr)}` 是**固定三列**，
   导致只有 1 张或 2 张卡的分组右侧留出大片空白，且同行卡片高度被最矮的
   内容拉平后仍不美观（底部留白不均）。

   方案：
   1. 改为 `auto-fit` + `minmax` 自适应列数 —— 卡片数少时自动铺满整行；
   2. 用 `grid-auto-rows:1fr` 让同一分组内卡片等高；
   3. 卡片内部改用 grid（头部 / 标签 / 页脚三行），让「页脚」始终贴卡片底部，
      标签区自适应伸展，视觉上形成整齐的横线对齐。
   ========================================================================== */

/* --- 自适应列数：≤1280px 两列，≤760px 一列 --- */
@media (min-width:1081px){
  .mod-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
}
@media (max-width:1080px){
  .mod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .mod-grid{grid-template-columns:1fr}
}

/* --- 同行卡片等高 --- */
@media (min-width:761px){
  .mod-grid{grid-auto-rows:1fr}
}

/* --- 卡片内部三行布局：页脚贴底 --- */
.mod-card{
  display:grid;
  grid-template-rows:auto 1fr auto;      /* 头部 / 标签区(伸展) / 页脚 */
  row-gap:0;
}
.mc-top{grid-row:1;margin-bottom:13px}
.mc-desc{grid-row:2}
.mc-tags{grid-row:3;align-self:start;margin-bottom:0}
.mc-foot{grid-row:4;align-self:end;margin-top:15px}
/* 已隐藏 mc-desc，标签区直接承接第 2 行 */
.mc-desc + .mc-tags{grid-row:2;align-self:start}

/* --- 分组标题：留白更匀称，与卡片间距收紧 --- */
.group-title{margin:44px 0 18px}
.group-title:first-of-type{margin-top:8px}

/* --- 小屏：单列时不需要等高与贴底逻辑 --- */
@media (max-width:760px){
  .mod-card{display:flex;grid-template-rows:none;row-gap:normal}
  .mc-top{margin-bottom:11px}
  .mc-tags{margin-bottom:15px}
  .mc-foot{margin-top:0}
  .group-title{margin:32px 0 14px}
  .group-title:first-of-type{margin-top:4px}
}