/* ============================================================
   WorkBuddy 积分助手 · 教程站
   配色方案：墨蓝（主）+ 亮蓝（强调）+ 琥珀（提示）
   ------------------------------------------------------------
   想换配色只改 :root 里的令牌即可，全站自动生效。
   ============================================================ */

/* ===== 设计令牌 ===== */
:root{
  /* 底色与容器 */
  --bg:#f4f6fa;
  --bg-2:#ebeff6;
  --surface:#ffffff;
  --surface-2:#f8fafd;

  /* 描边 */
  --line:#e3e8f0;
  --line-strong:#ccd6e4;

  /* 文字 */
  --text:#14202f;
  --muted:#5c6b80;
  --faint:#8b98ab;

  /* 主色：墨蓝 */
  --brand:#152740;
  --brand-2:#1d3557;
  --brand-3:#27496f;

  /* 强调色：亮蓝 */
  --accent:#2f6feb;
  --accent-ink:#1b57c4;
  --accent-soft:#e9f1ff;
  --accent-line:#c3d9fb;

  /* 提示色：琥珀 */
  --amber-bg:#fff8ea;
  --amber-line:#e5a93f;
  --amber-ink:#7a5200;

  /* 标注色 */
  --red:#d64545;

  /* 圆角 / 阴影 / 尺寸 */
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(21,39,64,.05);
  --shadow:0 1px 2px rgba(21,39,64,.05), 0 12px 32px rgba(21,39,64,.08);
  --shadow-lg:0 18px 48px rgba(21,39,64,.16);
  --maxw:940px;
}

/* ===== 基础 ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-ink)}
code{
  font-family:"JetBrains Mono",Consolas,Monaco,monospace;
  font-size:.88em;
  padding:2px 7px;
  border-radius:6px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-weight:600;
}
.page{max-width:var(--maxw);margin:0 auto;padding:0 20px 72px}

/* ===== 顶部滚动进度条 ===== */
.progress{
  position:fixed;top:0;left:0;right:0;
  height:3px;z-index:100;
  background:transparent;
  pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),#5aa2ff);
  box-shadow:0 0 10px rgba(47,111,235,.5);
  transition:width .1s linear;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  margin:24px 0 0;
  padding:46px 40px 48px;
  border-radius:22px;
  background:
    radial-gradient(90% 130% at 88% -10%, rgba(90,162,255,.30) 0%, rgba(21,39,64,0) 58%),
    radial-gradient(70% 120% at 8% 110%, rgba(47,111,235,.22) 0%, rgba(21,39,64,0) 60%),
    linear-gradient(135deg, #152740 0%, #1d3557 55%, #12203a 100%);
  color:#eaf1fb;
  box-shadow:var(--shadow-lg);
}
/* 装饰：细点阵 */
.hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(70% 90% at 85% 20%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 90% at 85% 20%, #000 0%, transparent 75%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}

.hero .eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 0 14px;
  padding:5px 13px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:#9dc6ff;
}
.hero h1{
  margin:0;
  font-size:clamp(27px,4.8vw,40px);
  line-height:1.24;
  font-weight:900;
  letter-spacing:.01em;
  color:#ffffff;
}
.hero .lead{
  margin:15px 0 0;
  max-width:56ch;
  font-size:15.5px;
  color:#bfd3ec;
  text-wrap:pretty;
}
.hero .meta{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-top:24px;
}
.hero .chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#dce9fb;
  font-size:13px;font-weight:500;
}
.hero .chip svg{flex:0 0 auto}
.hero.center{text-align:center}
.hero.center .lead{margin-left:auto;margin-right:auto}
.hero.center .meta{justify-content:center}

/* ============================================================
   首页 · 选择卡片
   ============================================================ */
.pickgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.pick{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:30px 26px 26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  text-decoration:none;
  color:var(--text);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* 顶部色条 */
.pick::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),#6ea8ff);
}
.pick.mac::before{background:linear-gradient(90deg,#33465e,#6b7c94)}

.pick:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-line);
}
.pick .os-ic{
  width:48px;height:48px;
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;
  margin-bottom:8px;
  background:var(--accent-soft);
}
.pick.mac .os-ic{background:#eef1f5}
.pick h2{margin:0;font-size:20px;font-weight:900;letter-spacing:.01em}
.pick p{margin:4px 0 0;font-size:14px;color:var(--muted);text-wrap:pretty}
.pick .ver{
  display:inline-block;margin-top:12px;
  padding:4px 11px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:12px;color:var(--muted);
  align-self:flex-start;
}
.pick .go{
  margin-top:16px;
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent-ink);
  font-size:14.5px;font-weight:700;
}
.pick .go svg{transition:transform .18s ease}
.pick:hover .go svg{transform:translateX(3px)}

/* ============================================================
   顶栏（返回）
   ============================================================ */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px 0 12px;
  font-size:14px;
}
.topbar .back{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px 7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  transition:color .16s ease,border-color .16s ease;
}
.topbar .back:hover{color:var(--accent-ink);border-color:var(--accent-line)}
.badge{
  padding:6px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

/* ============================================================
   步骤条（sticky）
   ============================================================ */
.stepper{
  position:sticky;top:0;z-index:50;
  display:flex;gap:6px;
  margin:20px 0 0;
  padding:11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(21,39,64,.07);
  overflow-x:auto;
  scrollbar-width:none;
}
.stepper::-webkit-scrollbar{display:none}
.stepper a{
  flex:1 1 0;
  min-width:118px;
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;
  border:1px solid transparent;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
  font-size:14px;font-weight:600;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
/* 步骤号：方形（区别于原版的圆形） */
.stepper a i{
  flex:0 0 auto;
  width:27px;height:27px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-style:normal;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:13px;font-weight:700;
  transition:background .18s ease,color .18s ease;
}
.stepper a:hover{background:var(--surface-2);border-color:var(--line)}
.stepper a.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.stepper a.active i{background:rgba(255,255,255,.20);color:#fff}
@media (max-width:760px){
  .stepper a{min-width:auto;flex:0 0 auto;padding:9px 12px}
}

/* ============================================================
   章节
   ============================================================ */
.step-sec{
  position:relative;
  overflow:hidden;
  margin-top:22px;
  padding:28px 30px 30px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* 左侧强调竖条 */
.step-sec::before{
  content:"";
  position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),rgba(47,111,235,.15));
}
.sec-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sec-head .step-tag{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:12.5px;font-weight:700;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  padding:4px 11px;
  border-radius:8px;
  white-space:nowrap;
}
.sec-head h2{
  margin:0;
  font-size:22px;font-weight:900;line-height:1.3;
  letter-spacing:.01em;
}
.sec-goal{
  margin:12px 0 0;
  color:var(--muted);
  font-size:14.5px;
  text-wrap:pretty;
}

/* ===== 操作项 ===== */
.actions{list-style:none;margin:20px 0 0;padding:0}
.action{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:16px;
  align-items:start;
  padding:18px 0 0;
}
.action + .action{
  margin-top:20px;
  padding-top:20px;
  border-top:1px dashed var(--line-strong);
}
.a-num{
  grid-row:1 / span 3;
  width:44px;height:44px;
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:17px;font-weight:700;
  box-shadow:0 4px 12px rgba(21,39,64,.18);
}
.a-body{min-width:0}
.a-body h3{
  margin:0 0 8px;
  font-size:16.5px;font-weight:800;line-height:1.45;
}
.a-body p{margin:0 0 8px;font-size:15px;color:var(--text);text-wrap:pretty}
.a-body p + p{margin-top:6px;color:var(--muted);font-size:14.5px}

/* ===== 下载链接 ===== */
.linklist{
  list-style:none;margin:12px 0 0;padding:0;
  display:grid;gap:9px;
}
.linklist li{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
}
.linklist .l-name{font-size:14px;font-weight:600;color:var(--text)}
.linklist a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:13px;font-weight:700;
  text-decoration:none;
  color:var(--accent-ink);
  padding:4px 10px;
  border-radius:8px;
  background:var(--accent-soft);
  transition:background .16s ease,color .16s ease;
}
.linklist a:hover{background:var(--accent);color:#fff}

/* ===== 完成反馈 ===== */
.ok{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;
  padding:11px 14px;
  border-radius:11px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-ink);
  font-size:14px;font-weight:600;
}
.ok svg{flex:0 0 auto;margin-top:3px}
.ok b{font-weight:800}

/* ===== 提示框 ===== */
.notice{
  display:flex;gap:10px;
  margin:16px 0 0;
  padding:14px 16px;
  border:1px solid var(--amber-line);
  border-left:4px solid var(--amber-line);
  border-radius:11px;
  background:var(--amber-bg);
  color:var(--amber-ink);
  font-size:14px;
}
.notice svg{flex:0 0 auto;margin-top:3px}
.notice b{font-weight:800}

/* ============================================================
   截图
   ============================================================ */
.shot{
  margin:16px 0 0;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.shot-bar{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;
  background:linear-gradient(180deg,#f2f5fa,#e9eef6);
  border-bottom:1px solid var(--line);
}
.shot-bar .dots{display:flex;gap:6px}
.shot-bar .dots i{width:11px;height:11px;border-radius:999px;background:#cdd8e6}
.shot-bar .dots i:nth-child(1){background:#e4736a}
.shot-bar .dots i:nth-child(2){background:#e8b34a}
.shot-bar .dots i:nth-child(3){background:#5cb085}
.shot-title{
  font-size:12.5px;color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot-body{position:relative;background:#fff;line-height:0}
.shot-body img{display:block;width:100%;height:auto}
.shot-body .mark{
  position:absolute;
  border:3px solid var(--red);
  border-radius:6px;
  pointer-events:none;
}
.shot figcaption{
  padding:10px 14px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
  font-size:13.5px;color:var(--muted);line-height:1.65;
}
.shot figcaption b{color:var(--text)}

/* ============================================================
   名词说明
   ============================================================ */
.glossary{
  margin-top:34px;
  padding:26px 28px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.glossary h2{margin:0 0 5px;font-size:19px;font-weight:900}
.glossary .sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.glossary dl{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.glossary .term{
  border-top:2px solid var(--accent-line);
  padding-top:14px;
}
.glossary dt{font-size:14.5px;font-weight:800;color:var(--text)}
.glossary dt code{margin-left:6px}
.glossary dd{margin:6px 0 0;font-size:14px;color:var(--muted);text-wrap:pretty}
@media (max-width:760px){
  .glossary dl{grid-template-columns:1fr}
}

/* ============================================================
   遇到问题
   ============================================================ */
.help{
  position:relative;
  overflow:hidden;
  margin-top:34px;
  padding:28px;
  border-radius:var(--radius);
  background:
    radial-gradient(70% 130% at 92% 0%, rgba(90,162,255,.22) 0%, rgba(21,39,64,0) 60%),
    linear-gradient(135deg,#152740 0%,#1d3557 100%);
  color:#eaf1fb;
  box-shadow:var(--shadow-lg);
}
.help h2{margin:0 0 7px;font-size:20px;font-weight:900;color:#fff}
.help .lead{margin:0 0 18px;font-size:14.5px;color:#bfd3ec}
.help ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:11px}
.help li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;color:#dce9fb;
}
.help li svg{flex:0 0 auto;margin-top:4px}
.help .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;
  border-radius:12px;
  background:#fff;
  color:var(--brand);
  font-size:15px;font-weight:800;
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.help .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}

/* ============================================================
   通用：提示块 / 页脚
   ============================================================ */
.note{
  margin-top:22px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:13px;
  background:var(--surface);
  color:var(--muted);
  font-size:14px;
  box-shadow:var(--shadow);
}
.note b{color:var(--text)}

.footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line-strong);
  display:flex;
  justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;
  color:var(--faint);
  font-size:13px;
}
.footer.center{justify-content:center}

/* ============================================================
   动效 & 无障碍
   ============================================================ */
.step-sec{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.step-sec.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .step-sec{opacity:1;transform:none;transition:none}
  .pick:hover,.help .btn:hover{transform:none}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:640px){
  body{font-size:14.5px}
  .page{padding-left:14px;padding-right:14px}
  .hero{padding:30px 22px 32px;border-radius:18px}
  .hero h1{font-size:27px}
  .pickgrid{grid-template-columns:1fr}
  .step-sec{padding:20px 18px 22px}
  .action{grid-template-columns:1fr}
  .a-num{grid-row:auto;width:38px;height:38px;font-size:15px;border-radius:11px}
  .glossary{padding:20px 18px}
  .help{padding:22px 20px}
}