/* ==========================================================================
   照片地图定位 · 官网样式
   设计语言：制图图纸（Cartographic sheet）
   —— 暖米白纸底、精密网格、测绘红作标记色、等宽字承载坐标与参数
   ========================================================================== */

:root{
  --paper:      #F6F4EF;
  --paper-2:    #EFEDE6;
  --surface:    #FFFFFF;
  --ink:        #1B1A17;
  --ink-2:      #57544C;
  --ink-3:      #8C887D;
  --line:       rgba(27,26,23,.13);
  --line-2:     rgba(27,26,23,.07);
  --red:        #B5392C;
  --red-deep:   #8E2A1F;
  --red-wash:   #F7E9E5;
  --blue:       #2E5B7A;
  --grid:       rgba(27,26,23,.055);

  --sans: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",
          system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: "Cascadia Code","JetBrains Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  --wrap: 1160px;
  --gut:  clamp(20px, 4vw, 40px);
  --sec:  clamp(68px, 8.5vw, 128px);
  --r:    3px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.28; letter-spacing:-.012em }
h1{ font-size:clamp(2rem, 4.6vw, 3.35rem); letter-spacing:-.022em; line-height:1.2 }
h2{ font-size:clamp(1.55rem, 3vw, 2.3rem); letter-spacing:-.018em }
h3{ font-size:1.1rem }
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }
a{ color:inherit; text-decoration:none }
img{ max-width:100% }
hr{ border:0; border-top:1px solid var(--line-2); margin:0 }

::selection{ background:var(--red-wash); color:var(--red-deep) }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px }

/* ---------- 布局 ---------- */

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.sec{ padding:var(--sec) 0; position:relative }
.sec--tight{ padding:clamp(44px,5vw,70px) 0 }
.sec--paper2{ background:var(--paper-2) }
.sec--line{ border-top:1px solid var(--line-2) }

.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.eyebrow{
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em;
  color:var(--red); text-transform:uppercase; margin-bottom:20px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--red); flex:0 0 auto }
.eyebrow--plain::before{ display:none }

.sec-head{ max-width:660px; margin-bottom:clamp(40px,5vw,64px) }
.sec-head p{ color:var(--ink-2); font-size:1.02rem; margin-top:16px }

.lead{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink-2); line-height:1.75 }

/* ---------- 导航 ---------- */

.nav{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line-2);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:66px }

.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto }
.brand img{ width:30px; height:30px; border-radius:7px; display:block }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand-txt strong{ font-size:.97rem; font-weight:600; letter-spacing:.01em }
.brand-txt em{
  font-family:var(--mono); font-style:normal; font-size:.63rem;
  letter-spacing:.11em; color:var(--ink-3); text-transform:uppercase;
}

.nav-links{ display:flex; align-items:center; gap:2px }
.nav-links a{
  padding:8px 14px; font-size:.9rem; color:var(--ink-2); border-radius:var(--r);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:var(--line-2) }
.nav-links a.is-on{ color:var(--ink); font-weight:500 }
.nav-links a.nav-cta{
  margin-left:10px; background:var(--ink); color:var(--paper); font-weight:500;
  padding:9px 18px;
}
.nav-links a.nav-cta:hover{ background:var(--red) }

.nav-burger{
  display:none; width:40px; height:40px; border:1px solid var(--line);
  background:transparent; border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-burger span{ display:block; width:16px; height:1.5px; background:var(--ink) }

/* ---------- 按钮 ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; font-size:.93rem; font-weight:500; font-family:inherit;
  border:1px solid transparent; border-radius:var(--r); cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--paper) }
.btn--primary:hover{ background:var(--red) }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent }
.btn--ghost:hover{ border-color:var(--ink); background:var(--surface) }
.btn--red{ background:var(--red); color:#fff }
.btn--red:hover{ background:var(--red-deep) }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px }

.arrow::after{ content:'→'; font-family:var(--mono); transition:transform .22s var(--ease) }
.arrow:hover::after{ transform:translateX(3px) }

/* ---------- 首屏 ---------- */

.hero{ position:relative; padding:clamp(52px,6.5vw,92px) 0 0; overflow:hidden }
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 42% 0%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse 78% 62% at 42% 0%, #000 20%, transparent 72%);
}
.hero-inner{ position:relative; max-width:820px }
.hero h1{ margin-bottom:22px; text-wrap:balance }
.hero .lead{ max-width:60ch }

.hero-specs{
  display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:26px;
  font-family:var(--mono); font-size:.79rem; color:var(--ink-3);
}
.hero-specs span{ display:flex; align-items:center; gap:8px }
.hero-specs span::before{ content:''; width:5px; height:5px; background:var(--red); flex:0 0 auto }

.hero-shot{ position:relative; margin-top:clamp(42px,6vw,76px) }

/* ---------- 截图框（图幅） ---------- */

.shot{
  position:relative; background:var(--surface);
  border:1px solid var(--line); padding:7px; border-radius:var(--r);
}
.shot::before,.shot::after{
  content:''; position:absolute; width:13px; height:13px; border:1px solid var(--red);
}
.shot::before{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.shot::after{ bottom:-1px; right:-1px; border-left:0; border-top:0 }
.shot img{ display:block; width:100%; height:auto; border-radius:1px }

.shot-cap{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:6px 16px; margin-top:11px; font-family:var(--mono); font-size:.76rem; color:var(--ink-3);
}
.shot-cap b{ font-weight:400; color:var(--ink-2) }

/* 双图并排 —— 适合展示「两端配合」或「前后对比」的界面 */

.dual-shot{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,26px); align-items:center;
}
.dual-shot .shot-cap{ justify-content:flex-start }

@media (max-width:720px){
  .dual-shot{ grid-template-columns:1fr; gap:24px }
}

.clickable{ cursor:zoom-in }
.clickable:hover img{ opacity:.94 }

/* ---------- 论点条 ---------- */

.claims{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  overflow:hidden;
}
.claim{ padding:clamp(24px,3vw,34px); border-left:1px solid var(--line-2) }
.claim:first-child{ border-left:0 }
.claim-num{ font-family:var(--mono); font-size:.73rem; letter-spacing:.14em; color:var(--red) }
.claim h3{ margin:13px 0 9px; font-size:1.02rem }
.claim p{ font-size:.92rem; color:var(--ink-2); line-height:1.68 }

/* ---------- 图文功能块 ---------- */

.feature{
  display:grid; grid-template-columns:1fr 1.12fr;
  gap:clamp(28px,4.5vw,68px); align-items:center;
  padding:clamp(34px,4.2vw,60px) 0;
  border-top:1px solid var(--line-2);
}
.feature:first-of-type{ border-top:0; padding-top:0 }
.feature--flip .feature-media{ order:-1 }

.feature-tag{
  display:block; font-family:var(--mono); font-size:.73rem;
  letter-spacing:.15em; color:var(--red); margin-bottom:14px;
}
.feature h3{ font-size:clamp(1.24rem,2vw,1.62rem); margin-bottom:14px; letter-spacing:-.016em }
.feature p{ color:var(--ink-2); font-size:.97rem }

.ticks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px }
.ticks li{ display:flex; gap:11px; font-size:.93rem; color:var(--ink-2); line-height:1.62 }
.ticks li::before{
  content:''; flex:0 0 auto; width:5px; height:5px; margin-top:.66em;
  background:var(--red);
}
.ticks b{ font-weight:500; color:var(--ink) }

/* ---------- 画廊 ---------- */

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.gallery .shot-cap{ font-size:.73rem }

/* ---------- 步骤 ---------- */

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px }
.step-num{
  font-family:var(--mono); font-size:2rem; line-height:1; font-weight:600;
  color:var(--ink-3); opacity:.42;
}
.step h3{ margin:15px 0 8px; font-size:1.02rem }
.step p{ font-size:.92rem; color:var(--ink-2); line-height:1.68 }

/* ---------- 数据表 ---------- */

.tbl{ width:100%; border-collapse:collapse; font-size:.91rem }
.tbl th,.tbl td{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.tbl th{
  font-family:var(--mono); font-size:.73rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
  border-bottom:1px solid var(--line);
}
.tbl td:first-child{ font-weight:500; white-space:nowrap }
.tbl tr:hover td{ background:rgba(27,26,23,.015) }
.tbl .mono{ font-size:.86rem; color:var(--ink-2) }

/* ---------- 更新日志 ---------- */

.tl{ list-style:none; padding:0; margin:0 }
.tl-item{
  display:grid; grid-template-columns:172px 1fr; gap:clamp(20px,3vw,44px);
  padding:clamp(28px,3.5vw,44px) 0; border-top:1px solid var(--line-2);
}
.tl-item:first-child{ border-top:0; padding-top:0 }
.tl-ver{ font-family:var(--mono); position:sticky; top:88px; align-self:start }
.tl-ver strong{
  display:block; font-size:1.42rem; font-weight:600; color:var(--red);
  letter-spacing:-.01em; line-height:1.2;
}
.tl-ver span{ display:block; font-size:.76rem; color:var(--ink-3); margin-top:6px; letter-spacing:.04em }
.tl-ver em{
  display:inline-block; font-style:normal; font-size:.7rem; margin-top:10px;
  padding:2px 8px; border:1px solid var(--line); border-radius:2px; color:var(--ink-3);
}
.tl-body h4{ font-size:.99rem; margin:22px 0 9px; font-weight:600 }
.tl-body h4:first-child{ margin-top:0 }
.tl-body ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.tl-body li{ font-size:.93rem; color:var(--ink-2); line-height:1.68; padding-left:17px; position:relative }
.tl-body li::before{ content:''; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--ink-3) }
.tl-body b{ font-weight:500; color:var(--ink) }

/* ---------- 问答 ---------- */

.faq{ border-top:1px solid var(--line-2) }
.faq details{ border-bottom:1px solid var(--line-2) }
.faq summary{
  cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:1rem; font-weight:500; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.15rem; color:var(--red); font-weight:400;
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ content:'−' }
.faq .faq-a{ padding:0 60px 24px 0; font-size:.94rem; color:var(--ink-2) }
.faq .faq-a p{ margin-bottom:.8em }

/* ---------- 行动区（浅色） ---------- */

.cta{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:clamp(30px,4vw,52px); border-radius:var(--r);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
  position:relative; overflow:hidden;
}
.cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 100% 50%, #000, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 90% at 100% 50%, #000, transparent 70%);
}
.cta > *{ position:relative }
.cta h2{ margin-bottom:14px }
.cta p{ color:var(--ink-2); font-size:.97rem; margin:0 }
.cta .btn--primary{ background:var(--ink); color:var(--paper) }
.cta .btn--primary:hover{ background:var(--red); color:#fff }
.cta .btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent }
.cta .btn--ghost:hover{ border-color:var(--ink); background:var(--paper-2) }
.cta-meta{
  font-family:var(--mono); font-size:.79rem; color:var(--ink-2);
  margin-top:22px; display:grid; gap:8px;
}
.cta-meta span{ display:flex; gap:10px }
.cta-meta i{ font-style:normal; color:var(--ink-3); min-width:64px }

/* ---------- 下载区（浅色 · 多网盘） ---------- */

.dl-box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(28px,3.6vw,50px);
}
.dl-head h2{ margin-bottom:14px }
.dl-head > p{ color:var(--ink-2); font-size:.97rem; margin:0; max-width:62ch }
.dl-meta{
  display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:20px;
  font-family:var(--mono); font-size:.79rem; color:var(--ink-2);
}
.dl-meta span{ display:flex; gap:10px }
.dl-meta i{ font-style:normal; color:var(--ink-3); min-width:58px }

.dl-channels{ margin-top:30px; border-top:1px solid var(--line-2) }
.dl-item{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 22px;
  padding:17px 6px; border-bottom:1px solid var(--line-2);
  transition:background .22s var(--ease);
}
.dl-item:last-child{ border-bottom:0 }
.dl-item:hover{ background:var(--paper-2) }
.dl-name{ font-weight:500; min-width:88px }
.dl-code{ font-family:var(--mono); font-size:.8rem; color:var(--ink-3) }
.dl-code b{ font-weight:400; color:var(--ink) }
.dl-go{
  margin-left:auto; font-family:var(--mono); font-size:.8rem;
  color:var(--red); white-space:nowrap;
}
.dl-item:hover .dl-go{ text-decoration:underline }

/* 下载区：按版本分组 */

.dl-variant{ padding:28px 0 4px; border-top:1px solid var(--line-2) }
.dl-variant:first-of-type{ margin-top:24px }
.dl-variant-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:9px 13px; margin-bottom:9px }
.dl-variant-head h3{ font-size:1.06rem; letter-spacing:-.01em }
.dl-variant-size{ margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--ink-3) }
.dl-variant-file{
  margin:0 0 9px; font-size:.78rem; color:var(--ink-3); word-break:break-all;
}
.dl-variant-desc{ margin:0 0 14px; font-size:.93rem; color:var(--ink-2); max-width:62ch }
.dl-variant .dl-channels{ margin-top:0; border-top:0 }

/* 链接待填的渠道行 —— 预览时一眼可见，填好后删掉 is-pending 类 */

.dl-item.is-pending{ opacity:.45; cursor:not-allowed; pointer-events:none }

@media (max-width:560px){
  .dl-item{ gap:4px 14px; padding:15px 4px }
  .dl-name{ min-width:74px }
  .dl-code,.dl-go{ font-size:.77rem }
}

/* ---------- 页脚 ---------- */

.foot{ border-top:1px solid var(--line); padding:clamp(40px,5vw,58px) 0 44px; margin-top:var(--sec) }
.foot-inner{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start }
.foot-brand{ display:flex; align-items:center; gap:11px }
.foot-brand img{ width:28px; height:28px; border-radius:6px }
.foot-brand strong{ display:block; font-size:.94rem; font-weight:600 }
.foot-brand em{
  font-family:var(--mono); font-style:normal; font-size:.72rem; color:var(--ink-3);
}
.foot-nav{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.88rem; color:var(--ink-2) }
.foot-nav a:hover{ color:var(--red) }
.foot-note{
  margin-top:34px; padding-top:24px; border-top:1px solid var(--line-2);
  font-size:.8rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between;
}
.foot-note .mono{ font-size:.76rem }

/* ---------- 灯箱 ---------- */

.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
  background:rgba(20,19,17,.93);
}
.lightbox.on{ display:flex }
.lightbox img{ max-width:100%; max-height:100%; border:1px solid rgba(246,244,239,.2) }
.lightbox-close{
  position:absolute; top:18px; right:20px; width:42px; height:42px;
  border:1px solid rgba(246,244,239,.3); background:transparent; color:var(--paper);
  font-size:1.2rem; font-family:var(--mono); cursor:pointer; border-radius:var(--r);
  line-height:1;
}
.lightbox-close:hover{ background:rgba(246,244,239,.12) }

/* ---------- 入场动画 ----------
   渐进增强：只有 JS 正常执行（html.js）时才把元素藏起来做动画。
   JS 不可用时元素默认可见，绝不会出现整页空白。 */

.js .rv{ opacity:0; transform:translateY(16px); transition:opacity .72s var(--ease), transform .72s var(--ease) }
.js .rv.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .rv{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------- 响应式 ---------- */

@media (max-width:980px){
  .feature{ grid-template-columns:1fr; gap:30px }
  .feature--flip .feature-media{ order:0 }
  .gallery{ grid-template-columns:repeat(2,1fr) }
  .cta{ grid-template-columns:1fr; gap:32px }
}

@media (max-width:760px){
  .nav-burger{ display:flex }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 18px; display:none;
  }
  .nav-links.open{ display:flex }
  .nav-links a{ padding:13px 4px; border-bottom:1px solid var(--line-2) }
  .nav-links a.nav-cta{ margin:14px 0 0; text-align:center; padding:13px 18px }
  .claims{ grid-template-columns:1fr }
  .claim{ border-left:0; border-top:1px solid var(--line-2) }
  .claim:first-child{ border-top:0 }
  .gallery{ grid-template-columns:1fr }
  .tl-item{ grid-template-columns:1fr; gap:18px }
  .tl-ver{ position:static; display:flex; align-items:baseline; gap:14px }
  .tl-ver span{ margin-top:0 }
  .tl-ver em{ margin-top:0 }
  .hero-specs{ gap:7px 18px }
}

@media (max-width:520px){
  .btn{ width:100% }
  .btn-row{ flex-direction:column }
  .nav-links a.nav-cta{ width:auto }
}

/* ---------- 代码与路径 ---------- */

pre{
  font-family:var(--mono); font-size:.83rem; line-height:1.72;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--r);
  padding:15px 18px; overflow-x:auto; margin:0 0 1.1em; color:var(--ink);
}
p code,li code,td code,summary code{
  font-family:var(--mono); font-size:.87em; background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:2px; padding:1px 6px;
  white-space:nowrap;
}
.sec--paper2 p code,.sec--paper2 li code{ background:var(--paper) }

/* 步骤条（带序号） */

.steprow{
  display:grid; grid-template-columns:44px 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--line-2);
}
.steprow:first-child{ border-top:1px solid var(--line-2) }
.steprow-n{
  font-family:var(--mono); font-size:.8rem; color:var(--red);
  padding-top:4px; letter-spacing:.06em;
}
.steprow h3{ font-size:1rem; margin-bottom:7px }
.steprow p{ font-size:.93rem; color:var(--ink-2); margin:0 }
.steprow p + p{ margin-top:9px }
.steprow pre{ margin-top:12px; margin-bottom:0 }

/* 提示块 */

.note{
  border-left:2px solid var(--red); background:var(--red-wash);
  padding:16px 20px; border-radius:0 var(--r) var(--r) 0;
  font-size:.93rem; color:var(--ink-2); margin:22px 0;
}
.note b{ color:var(--red-deep); font-weight:500 }
.note--calm{ border-left-color:var(--ink-3); background:var(--paper-2) }
.note--calm b{ color:var(--ink) }

/* ---------- 模块索引条 ---------- */

.toc{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin-bottom:clamp(22px,2.6vw,34px);
}
.toc a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
  padding:6px 13px; border:1px solid var(--line); border-radius:2px;
  color:var(--ink-2); white-space:nowrap;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.toc a:hover{ border-color:var(--ink); color:var(--ink); background:var(--surface) }

/* ---------- 子站导航：返回门户 ---------- */

.nav-links a.nav-back{ color:var(--ink-3) }
.nav-links a.nav-back:hover{ color:var(--ink) }

/* ---------- 下载区说明 ---------- */

.dl-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:22px 0 0; font-size:.85rem; color:var(--ink-3);
}
.dl-note a{ color:var(--ink-2); border-bottom:1px solid var(--line) }
.dl-note a:hover{ color:var(--red); border-bottom-color:var(--red) }

/* ---------- 门户：页头 ---------- */

.page-head{ margin-bottom:clamp(30px,3.8vw,46px) }
.page-head h1{ font-size:clamp(1.75rem,3.2vw,2.4rem) }
.page-sub{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:7px 18px;
  margin-top:15px; font-size:.94rem; color:var(--ink-3);
}
.page-sub .mono{ color:var(--red); font-size:.84rem }

/* ---------- 门户：软件卡片 ---------- */

.app-list{ display:grid; gap:26px }

.app-card{
  display:grid; grid-template-columns:1fr 1.28fr;
  gap:clamp(26px,3.6vw,52px); align-items:center;
  padding:clamp(26px,3.2vw,42px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .28s var(--ease);
}
.app-card:hover{ border-color:rgba(27,26,23,.26) }

.app-head{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-bottom:18px }
.app-icon{
  width:52px; height:52px; border-radius:12px; flex:0 0 auto;
  border:1px solid var(--line-2); display:block;
}
.app-title h2{ font-size:1.3rem; letter-spacing:-.016em; line-height:1.2 }
.app-title em{
  display:block; margin-top:5px; font-style:normal;
  font-family:var(--mono); font-size:.69rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.app-badge{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.71rem; letter-spacing:.05em;
  color:var(--red); border:1px solid rgba(181,57,44,.32);
  border-radius:2px; padding:4px 10px; white-space:nowrap;
}
.app-badge::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex:0 0 auto;
}

.app-desc{ margin:0; color:var(--ink-2); font-size:.96rem }

.app-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 24px }
.tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  padding:4px 10px; border:1px solid var(--line); border-radius:2px; color:var(--ink-2);
}

.app-actions{ display:flex; flex-wrap:wrap; gap:10px }

@media (max-width:880px){
  .app-card{ grid-template-columns:1fr; gap:28px }
  .app-title h2{ font-size:1.18rem }
  .app-icon{ width:46px; height:46px }
}

@media (max-width:520px){
  .app-tags{ margin:18px 0 20px }
}

/* ---------- 打印 ---------- */

@media print{
  .nav,.lightbox,.cta::after{ display:none }
  body{ background:#fff }
  .sec{ padding:24px 0 }
}