/* ============================================================
   Clash for iOS — components.css
   跨页面组件:锁屏 Hero 装置 / 通知条特性列表 / tab / toc /
   FAQ / 术语卡 / 客户端卡 / 文章卡 / callout / 步骤 / dl-fab
   ============================================================ */

/* ============ 1. 锁屏画布(首页首屏) ============ */
.lockscreen{
  position:relative;
  min-height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
}

.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2.2rem 2rem 9.5rem;
}

/* —— 灵动岛胶囊装置 —— */
.hero-device{
  display:flex;
  justify-content:center;
}

.island{
  display:flex;
  align-items:center;
  gap:1.15rem;
  width:322px;
  height:88px;
  padding:0 1.9rem 0 1.55rem;
  background:var(--ink);
  border-radius:var(--radius-capsule);
  box-shadow:var(--shadow-float);
}

.island-cat{
  width:38px;
  height:38px;
  flex-shrink:0;
  display:block;
  color:var(--on-ink);
}

.island-mode{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-left:auto;
}

.mode-stack{
  position:relative;
  width:6ch;
  height:1.5em;
  font-family:var(--font-mono);
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--on-ink);
  text-align:left;
}

.mode-stack span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:0;
  animation:mode-cycle 9s infinite;
}

.mode-stack span:nth-child(2){animation-delay:3s;}
.mode-stack span:nth-child(3){animation-delay:6s;}

@keyframes mode-cycle{
  0%   {opacity:0;transform:translateY(9px);}
  6%   {opacity:1;transform:translateY(0);}
  29%  {opacity:1;transform:translateY(0);}
  35%  {opacity:0;transform:translateY(-9px);}
  100% {opacity:0;transform:translateY(-9px);}
}

.mode-lamp{
  width:11px;
  height:11px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
  animation:lamp-breath 2.8s ease-in-out infinite;
}

@keyframes lamp-breath{
  0%,100%{opacity:.45;transform:scale(.8);}
  50%    {opacity:1;transform:scale(1);}
}

/* —— 锁屏时钟式 H1 —— */
.hero-title{
  margin-top:2.4rem;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(56px,6.8vw,96px);
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--text);
}

.hero-title .title-sub{
  display:block;
  margin-top:1.05rem;
  font-size:clamp(18px,1.6vw,23px);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text);
}

.hero-desc{
  margin-top:1.35rem;
  max-width:44rem;
  font-size:1.07rem;
  line-height:1.85;
  color:var(--text-muted);
}

.hero-desc strong{
  color:var(--text);
  font-weight:700;
  border-bottom:3px solid var(--accent);
  padding-bottom:1px;
}

/* —— 小标签胶囊行(毛玻璃) —— */
.hero-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin-top:1.6rem;
}

.hero-tags li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  padding:.5rem 1.05rem;
  border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
}

.hero-tags li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* —— 锁屏快捷按钮式圆形入口 —— */
.quick{
  position:absolute;
  bottom:3.4rem;
  display:inline-flex;
  align-items:center;
  gap:1rem;
}

.quick-download{left:4.5rem;}
.quick-tutorial{right:4.5rem;flex-direction:row-reverse;}

.quick-circle{
  width:70px;
  height:70px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:var(--shadow-float);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}

.quick:hover .quick-circle{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.quick-download .quick-circle{
  background:var(--accent);
  color:var(--on-ink);
}

.quick-download:hover .quick-circle{background:var(--accent-dark);}

.quick-tutorial .quick-circle{
  background:var(--glass-strong);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-float);
  color:var(--text);
}

.quick-icon{
  width:28px;
  height:28px;
  display:block;
}

.quick-label{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  text-align:left;
}

.quick-tutorial .quick-label{text-align:right;}

.quick-label b{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}

.quick-label small{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--text-muted);
}

/* —— 下一区块边缘(毛玻璃抽屉) —— */
.peek{
  background:var(--glass-strong);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-panel) var(--radius-panel) 0 0;
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-peek);
  padding:1.1rem var(--gutter-wide) 2.5rem;
}

.peek-handle{
  width:52px;
  height:5px;
  border-radius:var(--radius-pill);
  background:var(--border);
  margin:0 auto .95rem;
}

.peek-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--text-muted);
}

.peek-row i{
  font-style:normal;
  color:var(--accent-dark);
}

/* ============ 2. 锁屏通知条特性列表(首页核心特性区) ============ */
.notif-stack{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.notif{
  position:relative;
  background:var(--glass-strong);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
  overflow:hidden;
}

/* 展开条左缘薄荷绿细竖线标记当前项 */
.notif.open::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--accent);
}

.notif-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.05rem 1.4rem;
  cursor:pointer;
}

.notif-row:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:-3px;
  border-radius:28px;
}

.notif-ic{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--ink);
  color:var(--on-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.notif-ic svg{width:22px;height:22px;}

.notif-txt{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
  text-align:left;
}

.notif-txt b{font-size:1.02rem;font-weight:800;}

.notif-txt small{
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.55;
}

.notif-caret{
  margin-left:auto;
  flex-shrink:0;
  color:var(--text-muted);
  transition:transform .2s ease;
}

.notif-caret svg{width:18px;height:18px;display:block;}

.notif.open .notif-caret{transform:rotate(180deg);}

.notif-more{
  padding:0 1.4rem 1.35rem calc(1.4rem + 44px + 1rem);
  color:var(--text-muted);
  line-height:1.95;
  font-size:.95rem;
  text-align:left;
}

/* ============ 3. Tab 切换(role=tablist 配套) ============ */
.tab-rail{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  padding:.45rem;
  background:var(--glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-radius:26px;
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
}

.tab-key{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  color:var(--text);
  background:transparent;
  border:none;
  border-radius:var(--radius-pill);
  padding:.6rem 1.25rem;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.tab-key:hover{background:var(--bg-panel);}

.tab-key.on{
  background:var(--ink);
  color:var(--on-ink);
}

.tab-pane{display:none;padding-top:1.5rem;}
.tab-pane.on{display:block;}

/* ============ 4. 长页分类跳转导航(toc) ============ */
.toc-tabs{
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding:.45rem;
  background:var(--glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
  scrollbar-width:thin;
}

.toc-tabs a{
  flex-shrink:0;
  white-space:nowrap;
  padding:.55rem 1.15rem;
  border-radius:var(--radius-pill);
  font-size:.9rem;
  font-weight:600;
  transition:background-color .18s ease;
}

.toc-tabs a:hover{background:var(--bg-panel);}

.toc-tabs .toc-num{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--accent-dark);
  margin-right:.4rem;
}

/* ============ 5. FAQ 折叠项 ============ */
.faq-item{
  background:var(--bg-panel);
  border-radius:22px;
  box-shadow:var(--shadow-lift);
}

.faq-item + .faq-item{margin-top:.85rem;}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.45rem;
  font-weight:700;
  font-size:1rem;
  line-height:1.55;
}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.15rem;
  font-weight:700;
  color:var(--accent-dark);
  flex-shrink:0;
}

.faq-item[open] summary::after{content:"−";}

.faq-body{
  padding:0 1.45rem 1.3rem;
  color:var(--text-muted);
  line-height:1.9;
  font-size:.95rem;
}

/* ============ 6. 术语卡 ============ */
.term-card{
  background:var(--bg-panel);
  border-radius:22px;
  box-shadow:var(--shadow-lift);
  padding:1.35rem 1.5rem;
  min-width:0;
}

.term-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
}

.term-name{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
}

.term-cat{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--accent-dark);
  background:var(--accent-tint);
  border-radius:var(--radius-pill);
  padding:.22rem .65rem;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.term-desc{
  margin-top:.6rem;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.9;
}

/* ============ 7. 徽章与胶囊 ============ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.3rem .78rem;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.badge--top{background:var(--accent);color:var(--on-ink);}
.badge--rec{background:var(--accent-tint);color:var(--accent-dark);}
.badge--eol{background:var(--ink-tint);color:var(--text-muted);}
.badge--warn{background:var(--warn-tint);color:var(--warn);}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  padding:.5rem 1.05rem;
  border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.chip::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* ============ 8. 下载客户端卡片 ============ */
.app-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--bg-panel);
  border-radius:26px;
  box-shadow:var(--shadow-lift);
  padding:1.6rem;
  min-width:0;
}

.app-head{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
}

.app-head img{
  width:52px;
  height:52px;
  flex-shrink:0;
}

.app-name{font-size:1.12rem;font-weight:800;line-height:1.3;}

.app-ver{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--text-muted);
}

.app-desc{
  color:var(--text-muted);
  font-size:.93rem;
  line-height:1.85;
}

.app-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:auto;
}

/* ============ 9. 博客文章卡 ============ */
.post-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:var(--bg-panel);
  border-radius:26px;
  box-shadow:var(--shadow-lift);
  padding:1.5rem 1.6rem;
  min-width:0;
  transition:transform .2s ease,box-shadow .2s ease;
}

.post-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.post-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--text-muted);
}

.tag-chip{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  background:var(--accent-tint);
  color:var(--accent-dark);
  padding:.24rem .62rem;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.post-title{
  font-size:1.08rem;
  font-weight:800;
  line-height:1.55;
}

.post-sum{
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.85;
}

.post-more{
  margin-top:auto;
  font-weight:700;
  font-size:.88rem;
  color:var(--accent-dark);
}

/* ============ 10. callout 引用块 ============ */
.callout{
  position:relative;
  background:var(--bg-panel);
  border-radius:18px;
  box-shadow:var(--shadow-lift);
  padding:1.1rem 1.4rem 1.1rem 1.75rem;
  overflow:hidden;
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.9;
}

.callout::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:var(--accent);
}

.callout b,.callout strong{color:var(--text);}

.callout--warn::before{background:var(--warn);}
.callout--warn strong{color:var(--warn);}

.callout--error::before{background:var(--error);}
.callout--error strong{color:var(--error);}

/* ============ 11. 步骤列表(等宽编号圆标) ============ */
.steps{
  list-style:none;
  counter-reset:step;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.steps>li{
  position:relative;
  counter-increment:step;
  padding-left:3.5rem;
  min-width:0;
}

.steps>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05rem;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.84rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.steps>li>b{
  display:block;
  font-size:1.05rem;
  font-weight:800;
  margin-bottom:.35rem;
}

.steps>li>p{
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.9;
}

/* ============ 12. 文末下载引导卡 ============ */
.dl-guide{
  background:var(--bg-panel);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-lift);
  padding:clamp(1.6rem,4vw,2.6rem);
  text-align:center;
}

.dl-guide h2,.dl-guide .dl-guide-title{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
}

.dl-guide p{
  color:var(--text-muted);
  max-width:36rem;
  margin:.7rem auto 1.4rem;
  line-height:1.9;
}

.dl-guide-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.9rem;
}

/* ============ 13. 右下角常驻下载浮层 ============ */
.dl-fab{
  position:fixed;
  right:clamp(.9rem,3vw,1.6rem);
  bottom:clamp(.9rem,3vw,1.6rem);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--ink);
  color:var(--on-ink);
  font-weight:700;
  font-size:.92rem;
  padding:.85rem 1.35rem;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-float);
  white-space:nowrap;
  max-width:calc(100vw - 2rem);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}

.dl-fab:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.dl-fab svg{width:18px;height:18px;flex-shrink:0;}

.dl-fab-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* ============ 14. design-preview 专用:色板样例 ============ */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1rem;
}

.swatch{
  background:var(--bg-panel);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  min-width:0;
}

.swatch i{display:block;height:72px;font-style:normal;}

.swatch b{
  display:block;
  padding:.6rem .8rem .1rem;
  font-family:var(--font-mono);
  font-size:.78rem;
}

.swatch small{
  display:block;
  padding:0 .8rem .7rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-muted);
}

.sw-wall-a{background:var(--wall-a);}
.sw-wall-b{background:var(--wall-b);}
.sw-glass{background:var(--glass);}
.sw-panel{background:var(--bg-panel);box-shadow:inset 0 0 0 1px var(--border);}
.sw-border{background:var(--border);}
.sw-accent{background:var(--accent);}
.sw-accent-dark{background:var(--accent-dark);}
.sw-text{background:var(--text);}
.sw-text-muted{background:var(--text-muted);}
.sw-ink{background:var(--ink);}
.sw-success{background:var(--success);}
.sw-warn{background:var(--warn);}
.sw-error{background:var(--error);}

/* ============ 15. 响应式 ============ */
@media (max-width:960px){
  .quick-download{left:var(--gutter-wide);}
  .quick-tutorial{right:var(--gutter-wide);}
}

@media (max-width:640px){
  .hero{padding:1.8rem 1.2rem 12.5rem;}

  .island{
    width:272px;
    height:74px;
    padding:0 1.4rem 0 1.2rem;
  }

  .island-cat{width:32px;height:32px;}
  .mode-stack{font-size:1.05rem;}

  .quick{
    position:absolute;
    left:var(--gutter);
    right:var(--gutter);
    justify-content:flex-start;
  }

  .quick-download{bottom:8.6rem;}
  .quick-tutorial{bottom:2.2rem;flex-direction:row;}
  .quick-tutorial .quick-label{text-align:left;}

  .quick-circle{width:58px;height:58px;}
  .quick-icon{width:24px;height:24px;}

  .notif-more{padding-left:1.4rem;}

  .app-card{padding:1.3rem;}
  .post-card{padding:1.25rem 1.3rem;}

  .dl-fab{
    font-size:.86rem;
    padding:.75rem 1.1rem;
  }
}

/* ============ 16. 动画降级 ============ */
@media (prefers-reduced-motion:reduce){
  .mode-stack span{animation:none;}
  .mode-stack span:first-child{opacity:1;transform:none;}
  .mode-lamp{animation:none;opacity:1;transform:none;}
  .quick-circle,.notif-caret,.post-card,.dl-fab,.tab-key{transition:none;}
  .post-card:hover,.dl-fab:hover{transform:none;}
}