/* ==========================================================================
   Shadowrocket 官方下载站 · 组件层
   tab / toc / FAQ / 术语卡 / App Store 按钮 / 事实胶囊 / 官方截图
   设备入口卡 / 文章卡 / callout / dl-fab / 徽章 / 表格 / 步骤 / 文末引导卡
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tab 切换(role=tablist / role=tab)
   -------------------------------------------------------------------------- */

.tabs{display:block;}

.tablist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}

.tab{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding-block:10px;
  padding-inline:16px;
  border-radius:var(--radius-chip);
  border:1px solid transparent;
  background-color:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-size:14.5px;
  line-height:1.25;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.tab:hover{background-color:var(--hover-veil);color:var(--text);}
.tab[aria-selected="true"]{
  background-color:var(--active-veil);
  color:var(--text);
  border-color:var(--active-ring);
}
.section--light .tab{color:var(--text-on-light-muted);}
.section--light .tab:hover{background-color:#eef4fa;color:var(--text-on-light);}
.section--light .tab[aria-selected="true"]{
  background-color:#e7f1fa;
  color:var(--text-on-light);
  border-color:#bcd8ee;
}

.tabpanel{display:none;}
.tabpanel.is-active{display:block;animation:tab-in .16s ease both;}

@keyframes tab-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:none;}
}

/* --------------------------------------------------------------------------
   2. 长页分类跳转导航(toc)
   说明:做成静态胶囊条,窄屏自动换行铺开(不横滚、不切字),不做吸顶,避免吸顶行程问题
   -------------------------------------------------------------------------- */

.toc{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  overflow-x:visible;
  max-width:100%;
  min-width:0;
  padding-block:4px 12px;
  border-bottom:1px solid var(--hairline-soft);
}
.toc a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding-block:8px;
  padding-inline:14px;
  border-radius:var(--radius-pill);
  background-color:var(--veil);
  border:1px solid var(--hairline);
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
}
.toc a:hover{color:var(--text);border-color:var(--border);}
.section--light .toc{border-bottom-color:var(--border-light);}
.section--light .toc a{
  background-color:var(--bg-light-panel);
  border-color:var(--border-light);
  color:var(--text-on-light-muted);
}
.section--light .toc a:hover{color:var(--text-on-light);}

.toc-title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.section--light .toc-title{color:var(--text-on-light-muted);}

/* --------------------------------------------------------------------------
   3. FAQ 折叠项(<details>)
   -------------------------------------------------------------------------- */

.faq-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;}

.faq-item{
  border-radius:16px;
  border:1px solid var(--hairline);
  background-color:var(--veil);
  color:var(--text);
  overflow:clip;
}
.faq-item > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:56px;
  padding-block:14px;
  padding-inline:18px;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-4px;
  opacity:.7;
  transition:transform .2s ease;
}
.faq-item[open] > summary::after{transform:rotate(-135deg);margin-top:4px;}
.faq-item > summary:hover{background-color:var(--hover-veil);}
.faq-body{
  padding-inline:18px;
  padding-bottom:18px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.faq-body p{margin:0 0 .8em;}
.faq-body p:last-child{margin-bottom:0;}

.faq-item--light{
  background-color:var(--bg-light);
  color:var(--text-on-light);
  border-color:var(--border-light);
}
.faq-item--light > summary:hover{background-color:var(--bg-light-panel);}
.faq-item--light .faq-body{color:var(--text-on-light-body);}

/* --------------------------------------------------------------------------
   4. 术语卡
   -------------------------------------------------------------------------- */

.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.term-grid > *{min-width:0;}

.term-card{
  border-radius:20px;
  border:1px solid var(--border-light);
  background-color:var(--bg-light);
  color:var(--text-on-light);
  padding-block:20px;
  padding-inline:20px;
  box-shadow:var(--shadow-soft);
}
.term-name{
  margin:0;
  font-family:var(--font-mono);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}
.term-cat{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding-block:3px;
  padding-inline:9px;
  border-radius:var(--radius-pill);
  background-color:#eaf3fb;
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
}
.term-desc{margin:12px 0 0;font-size:14px;line-height:1.8;color:var(--text-on-light-body);}

.term-card--dark{
  background-color:var(--veil);
  color:var(--text);
  border-color:var(--hairline);
  box-shadow:none;
}
.term-card--dark .term-cat{background-color:var(--active-veil);color:var(--accent-soft);}
.term-card--dark .term-desc{color:var(--text-muted);}

/* --------------------------------------------------------------------------
   5. App Store 按钮(自绘苹果标,不使用官方徽章位图)
   -------------------------------------------------------------------------- */

.store-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding-block:10px;
  padding-inline:22px;
  border-radius:var(--radius-btn);
  background-color:var(--text-on-light);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:var(--shadow-btn);
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.store-btn:hover,.store-btn.is-demo-hover{background-color:#123f60;transform:translateY(-1px);}
.store-btn-mark{width:22px;height:22px;fill:currentColor;flex-shrink:0;}
.store-btn-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.store-btn-top{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.store-btn-main{font-size:15.5px;font-weight:600;line-height:1.2;color:#ffffff;}

.store-btn--light{
  background-color:var(--bg-light);
  color:var(--text-on-light);
  border-color:var(--border-light);
  box-shadow:var(--shadow-soft);
}
.store-btn--light .store-btn-main{color:var(--text-on-light);}
.store-btn--light .store-btn-top{color:var(--text-on-light-muted);}
.store-btn--light:hover,.store-btn--light.is-demo-hover{background-color:var(--bg-light-panel);}

/* --------------------------------------------------------------------------
   6. 事实胶囊行
   -------------------------------------------------------------------------- */

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.fact{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  max-width:100%;
  padding-block:6px;
  padding-inline:12px;
  border-radius:var(--radius-pill);
  background-color:var(--veil);
  border:1px solid var(--hairline);
  color:var(--text);
  font-size:12.5px;
}
.fact-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.fact-v{font-weight:600;overflow-wrap:anywhere;}
.fact--light{
  background-color:var(--bg-light-panel);
  border-color:var(--border-light);
  color:var(--text-on-light);
}
.fact--light .fact-k{color:var(--text-on-light-muted);}

/* --------------------------------------------------------------------------
   7. 官方截图 figure(截图满幅:不锁比例、不 contain、不加内边距)
   -------------------------------------------------------------------------- */

.official-shot{
  margin:0;
  max-width:280px;
  flex-shrink:0;
}
.official-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-shot);
  border:1px solid var(--border-light);
}
.official-shot figcaption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-on-light-muted);
}
.official-shot--dark img{border-color:var(--hairline);}
.official-shot--dark figcaption{color:var(--text-muted);}

.shot-row{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
  justify-content:center;
}

/* --------------------------------------------------------------------------
   8. 设备入口卡
   -------------------------------------------------------------------------- */

.device-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.device-cards > *{min-width:0;}

.device-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-block:26px;
  padding-inline:26px;
  border-radius:var(--radius-panel);
  border:1px solid var(--border-light);
  background-color:var(--bg-light);
  color:var(--text-on-light);
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,border-color .2s ease;
}
.device-card:hover{transform:translateY(-2px);border-color:#bcd8ee;}
.device-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:14px;
  background-color:#eaf3fb;
  color:var(--accent-dark);
}
.device-card-icon svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.device-card-name{margin:4px 0 0;font-family:var(--font-display);font-size:1.25rem;font-weight:700;}
.device-card-note{margin:0;font-size:14px;line-height:1.75;color:var(--text-on-light-body);}
.device-card-go{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--accent-dark);
}
.device-card-go svg{
  width:15px;height:15px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   9. 博客文章卡
   -------------------------------------------------------------------------- */

.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.post-grid > *{min-width:0;}

.post-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-block:24px;
  padding-inline:24px;
  border-radius:var(--radius-panel);
  border:1px solid var(--border-light);
  background-color:var(--bg-light);
  color:var(--text-on-light);
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease,border-color .2s ease;
}
.post-card:hover{transform:translateY(-2px);border-color:#bcd8ee;}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.post-date{font-family:var(--font-mono);font-size:11.5px;color:var(--text-on-light-muted);}
.post-title{margin:0;font-family:var(--font-display);font-size:1.0625rem;font-weight:700;line-height:1.4;}
.post-summary{margin:0;font-size:14px;line-height:1.8;color:var(--text-on-light-body);}
.post-more{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--accent-dark);
}

.post-card--dark{
  background-color:var(--veil);
  color:var(--text);
  border-color:var(--hairline);
  box-shadow:none;
}
.post-card--dark .post-title{color:var(--text);}
.post-card--dark .post-summary{color:var(--text-muted);}
.post-card--dark .post-date{color:var(--text-muted);}
.post-card--dark .post-more{color:var(--accent-soft);}

/* --------------------------------------------------------------------------
   10. callout
   -------------------------------------------------------------------------- */

.callout{
  border-left:3px solid var(--accent);
  border-radius:0 16px 16px 0;
  background-color:var(--veil);
  color:var(--text);
  padding-block:16px;
  padding-inline:20px;
  font-size:14.5px;
  line-height:1.8;
}
.callout p{margin:0 0 .7em;}
.callout p:last-child{margin-bottom:0;}
.callout-title{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-soft);
}
.callout--warn{border-left-color:var(--warn);}
.callout--warn .callout-title{color:var(--warn);}
.callout--error{border-left-color:var(--error);}
.callout--error .callout-title{color:var(--error);}
.callout--light{
  background-color:var(--bg-light-panel);
  color:var(--text-on-light-body);
  border-left-color:var(--accent-dark);
}
.callout--light .callout-title{color:var(--accent-dark);}
.callout--light strong{color:var(--text-on-light);}

/* --------------------------------------------------------------------------
   11. 右下角常驻引导浮层(博客文章页使用)
   -------------------------------------------------------------------------- */

.dl-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding-block:11px;
  padding-inline:18px;
  border-radius:var(--radius-pill);
  background-color:var(--accent-dark);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:var(--shadow-btn);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.dl-fab:hover{background-color:var(--accent-hover);transform:translateY(-2px);}
.dl-fab-mark{width:17px;height:17px;fill:currentColor;flex-shrink:0;}

/* --------------------------------------------------------------------------
   12. 徽章 / 标签 / 状态点
   -------------------------------------------------------------------------- */

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding-block:4px;
  padding-inline:10px;
  border-radius:var(--radius-pill);
  background-color:var(--veil);
  border:1px solid var(--hairline);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.03em;
  overflow:hidden;
}
.badge--accent{background-color:var(--accent-dark);border-color:rgba(255,255,255,.22);color:#ffffff;}
.badge--light{
  background-color:#eaf3fb;
  border-color:#cfe2f3;
  color:var(--text-on-light);
}

.status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted);}
.status .dot{width:8px;height:8px;}
.status--ok{color:var(--text);}
.status--warn{color:var(--text);}
.status--error{color:var(--text);}

/* --------------------------------------------------------------------------
   13. 表格
   -------------------------------------------------------------------------- */

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
  color:var(--text-on-light);
  background-color:var(--bg-light);
}
.data-table th,
.data-table td{
  padding-block:11px;
  padding-inline:14px;
  border-bottom:1px solid var(--border-light);
  text-align:left;
  vertical-align:top;
}
.data-table th{
  background-color:var(--bg-light-panel);
  color:var(--text-on-light);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.data-table td code{color:var(--text-on-light);}

.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

.data-table--dark{color:var(--text);background-color:transparent;}
.data-table--dark th{background-color:var(--bg-panel2);color:var(--text);}
.data-table--dark td{border-bottom-color:var(--hairline);}

/* --------------------------------------------------------------------------
   14. 步骤列表
   -------------------------------------------------------------------------- */

.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;}
.steps > li{
  position:relative;
  counter-increment:step;
  padding-left:56px;
  min-width:0;
}
.steps{counter-reset:step;}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:12px;
  background-color:var(--active-veil);
  border:1px solid var(--active-ring);
  color:var(--accent-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
}
.section--light .steps > li::before{
  background-color:#eaf3fb;
  border-color:#cfe2f3;
  color:var(--accent-dark);
}
.step-title{margin:0;font-size:1.0625rem;font-family:var(--font-display);font-weight:700;line-height:1.35;}
.step-body{margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--text-muted);}
.section--light .step-body{color:var(--text-on-light-body);}
.step-body p{margin:0 0 .8em;}

/* --------------------------------------------------------------------------
   15. 文末 App Store 引导卡
   -------------------------------------------------------------------------- */

.store-cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-block:28px;
  padding-inline:30px;
  border-radius:var(--radius-card);
  border:1px solid var(--hairline);
  background:var(--surface-b-face);
  color:var(--text);
}
.store-cta-copy{min-width:0;max-width:560px;}
.store-cta-title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1.3;}
.store-cta-text{margin:10px 0 0;font-size:14.5px;line-height:1.8;color:var(--text-muted);}

/* --------------------------------------------------------------------------
   16. 能力区(左列编号 tab + 右侧详情面板)
   -------------------------------------------------------------------------- */

.feature-tabs{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:32px;
  align-items:start;
}
.feature-tabs > *{min-width:0;}

.feature-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.feature-tab{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding-block:12px;
  padding-inline:16px;
  border-radius:16px;
  border:1px solid transparent;
  background-color:transparent;
  color:var(--text-on-light-muted);
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.feature-tab:hover{background-color:#eef4fa;color:var(--text-on-light);}
.feature-tab[aria-selected="true"]{
  background-color:#e7f1fa;
  color:var(--text-on-light);
  border-color:#bcd8ee;
}
.feature-num{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--accent-dark);
}
.feature-tab[aria-selected="true"] .feature-num{color:var(--text-on-light);}

.detail-panel{
  min-height:420px;
  border-radius:var(--radius-panel);
  border:1px solid var(--border-light);
  background-color:var(--bg-light-panel);
  color:var(--text-on-light);
  padding-block:26px;
  padding-inline:28px;
}
.detail-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-light);
}
.detail-term{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  color:var(--text-on-light);
  overflow-wrap:anywhere;
}
.detail-gloss{font-size:13.5px;color:var(--text-on-light-muted);}
.detail-body{margin-top:16px;font-size:15px;line-height:1.85;color:var(--text-on-light-body);}
.detail-body p{margin:0 0 .8em;}
.detail-body p:last-child{margin-bottom:0;}

.rule-capsule{
  display:block;
  margin-top:18px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-block:10px;
  padding-inline:14px;
  border-radius:12px;
  background-color:var(--text-on-light);
  color:#eaf3fb;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.7;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   17. 正文排版(文章/长文档)
   -------------------------------------------------------------------------- */

.prose{max-width:820px;min-width:0;}
.prose > * + *{margin-top:1em;}
.prose h2{margin-top:2.2em;font-size:1.5rem;}
.prose h3{margin-top:1.7em;font-size:1.125rem;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{margin:0;font-size:15.5px;line-height:1.9;}
.prose ul,.prose ol{margin:0;padding-left:1.4em;font-size:15.5px;line-height:1.9;}
.prose li{margin-bottom:.45em;}
.prose code{
  padding-block:2px;
  padding-inline:6px;
  border-radius:6px;
  background-color:#eef4fa;
  color:var(--text-on-light);
}
.prose pre code{background:none;color:inherit;padding:0;}
.prose--dark{color:var(--text-muted);}
.prose--dark h2,.prose--dark h3,.prose--dark strong{color:var(--text);}
.prose--dark code{background-color:var(--bg-panel2);color:var(--accent-soft);}

/* --------------------------------------------------------------------------
   18. 设计预览专用(仅 design-preview.html 使用)
   -------------------------------------------------------------------------- */

.sw-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.sw-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding-block:10px;
  padding-inline:12px;
  border-radius:14px;
  border:1px solid var(--border-light);
  background-color:var(--bg-light);
  color:var(--text-on-light);
  min-width:0;
}
.sw{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(15,53,82,.14);
}
.sw-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sw-name{font-family:var(--font-mono);font-size:11.5px;color:var(--text-on-light);overflow-wrap:anywhere;}
.sw-val{font-family:var(--font-mono);font-size:10.5px;color:var(--text-on-light-muted);}

.sw--bg{background-color:var(--bg);}
.sw--bg-panel{background-color:var(--bg-panel);}
.sw--bg-panel-bright{background-color:var(--bg-panel-bright);}
.sw--bg-panel2{background-color:var(--bg-panel2);}
.sw--border{background-color:var(--border);}
.sw--accent{background-color:var(--accent);}
.sw--accent-soft{background-color:var(--accent-soft);}
.sw--accent-dark{background-color:var(--accent-dark);}
.sw--text{background-color:var(--text);}
.sw--text-muted{background-color:var(--text-muted);}
.sw--success{background-color:var(--success);}
.sw--warn{background-color:var(--warn);}
.sw--error{background-color:var(--error);}
.sw--bg-light{background-color:var(--bg-light);}
.sw--bg-light-panel{background-color:var(--bg-light-panel);}
.sw--text-on-light{background-color:var(--text-on-light);}
.sw--text-on-light-muted{background-color:var(--text-on-light-muted);}
.sw--border-light{background-color:var(--border-light);}

.shot-ph{
  display:block;
  width:100%;
  aspect-ratio:750 / 1334;
  border-radius:var(--radius-shot);
  border:1px solid var(--border-light);
  background-image:
    linear-gradient(160deg,#eef5fb,#d9e8f6 68%,#cfe2f3);
  background-color:#eef5fb;
}
.shot-ph-note{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-on-light-muted);
}

.preview-block{padding-top:64px;padding-bottom:64px;}
.preview-label{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-light-muted);
}
.section--deep .preview-label{color:var(--text-muted);}
.preview-stack{display:flex;flex-direction:column;gap:26px;}

/* --------------------------------------------------------------------------
   19. 组件响应式
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  .feature-tabs{grid-template-columns:minmax(0,1fr);gap:20px;}
  .feature-list{flex-direction:column;}
  .detail-panel{min-height:0;}
}

@media (max-width:720px){
  .device-cards{grid-template-columns:minmax(0,1fr);}
  .shot-row{gap:18px;}
  .official-shot{max-width:280px;margin-inline:auto;}
  .store-cta-card{padding-block:24px;padding-inline:22px;}
  .dl-fab{right:14px;bottom:14px;padding-inline:15px;font-size:13px;}
  .detail-panel{padding-block:22px;padding-inline:20px;}
  .steps > li{padding-left:48px;}
}

@media (max-width:640px){
  .tablist{width:100%;}
  .tab{width:100%;}
  .feature-tab{min-height:52px;}
  .store-btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .tabpanel.is-active{animation:none;}
  .faq-item > summary::after{transition:none;}
  .device-card,.post-card,.store-btn,.dl-fab{transition:none;}
}