/* =========================================================
   V2Ray官方中文网 · components.css
   跨页面组件:tab / toc / FAQ / 术语卡 / 下载卡 / 博客卡 /
   callout / 徽章 / 表格 / dl-fab 常驻下载浮层
   ========================================================= */

/* ---------- Tab 切换 ---------- */
.tabs{position:relative}

.tablist{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 24px;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  width:fit-content;
  max-width:100%;
}
.tablist__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tablist__scroll::-webkit-scrollbar{display:none}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 20px;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--ink-muted);
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--bg);
  color:var(--accent-dark);
  box-shadow:0 8px 20px rgba(22,51,64,.1);
}
.tab svg{width:16px;height:16px;flex-shrink:0}

.tabpanel{
  display:none;
  padding:36px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-back);
}
.tabpanel.is-active{display:block}
.tabpanel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 长页分类跳转导航(toc) ---------- */
.toc{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  width:fit-content;
  max-width:100%;
  margin-bottom:40px;
}
.toc a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 16px;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:600;
  color:var(--ink-muted);
  transition:background-color .18s ease,color .18s ease;
}
.toc a:hover{background:var(--bg);color:var(--ink)}
.toc a.is-current{
  background:var(--accent-tint);
  color:var(--accent-dark);
}

/* ---------- FAQ 折叠项 ---------- */
.faqlist{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faqitem{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  box-shadow:var(--shadow-back);
  overflow:hidden;
}
.faqitem summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding:16px 24px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  list-style:none;
}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{
  content:"+";
  flex-shrink:0;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1.5px solid var(--line);
  font-size:16px;
  font-weight:600;
  color:var(--ink-muted);
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.faqitem[open] summary::after{
  transform:rotate(45deg);
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}
.faqitem__body{
  padding:0 24px 22px;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-muted);
  max-width:60em;
}
.faqitem__body p{margin:0 0 .8em}
.faqitem__body p:last-child{margin-bottom:0}

/* ---------- 术语卡 ---------- */
.termgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.termcard{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  padding:24px;
  box-shadow:var(--shadow-back);
  transition:transform .18s ease,box-shadow .18s ease;
}
.termcard:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-tag);
}
.termcard__head{
  display:flex;
  align-items:center;
  gap:10px;
}
.termcard__term{
  margin:0;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.termcard__en{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-muted);
}
.termcard__cat{
  margin-left:auto;
  flex-shrink:0;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  color:var(--ink-muted);
}
.termcard__desc{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}

/* ---------- 下载客户端卡片 ---------- */
.dlcard{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:32px;
  box-shadow:var(--shadow-back);
}
.dlcard--featured{
  border-color:var(--accent);
  box-shadow:var(--shadow-float);
}
.dlcard__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.dlcard__icon{
  width:56px;
  height:56px;
  flex-shrink:0;
}
.dlcard__title{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ink);
}
.dlcard__sub{
  margin:6px 0 0;
  font-size:14px;
  color:var(--ink-muted);
}

.dlcard__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
}

.dlcard__ver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-muted);
}
.dlcard__ver strong{color:var(--ink)}

.dlcard__entries{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dlentry{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
  transition:border-color .18s ease;
}
.dlentry:hover{border-color:var(--accent)}
.dlentry__name{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.dlentry__note{
  font-size:13px;
  color:var(--ink-muted);
}
.dlentry__file{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
  overflow-wrap:anywhere;
}
.dlentry__btn{
  margin-left:auto;
  flex-shrink:0;
}

/* 徽章 */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.badge--top{background:var(--accent);color:var(--bg)}
.badge--rec{background:var(--ok-tint);color:var(--ok)}
.badge--deprecated{background:var(--neutral-tint);color:var(--ink-muted)}

/* ---------- 博客文章卡 ---------- */
.blogcard{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  padding:28px;
  box-shadow:var(--shadow-back);
  transition:transform .18s ease,box-shadow .18s ease;
}
.blogcard:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-tag);
}
.blogcard__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.blogcard__tag{
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--accent-tint);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:700;
}
.blogcard__date{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
}
.blogcard__title{
  margin:0;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
}
.blogcard__excerpt{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}
.blogcard__more{
  margin-top:auto;
  padding-top:8px;
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
}

/* ---------- callout 引用块 ---------- */
.callout{
  display:flex;
  gap:14px;
  padding:20px 22px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
}
.callout__icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:2px;
  color:var(--accent);
}
.callout__body p{margin:0}
.callout--ok{background:var(--ok-tint);border-color:rgba(23,166,110,.25)}
.callout--ok .callout__icon{color:var(--ok)}
.callout--warn{background:var(--warn-tint);border-color:rgba(232,163,23,.25)}
.callout--warn .callout__icon{color:var(--warn)}
.callout--bad{background:var(--bad-tint);border-color:rgba(216,50,42,.25)}
.callout--bad .callout__icon{color:var(--bad)}

/* ---------- 表格 ---------- */
.data-table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  font-size:14px;
}
.data-table th{
  text-align:left;
  padding:12px 16px;
  background:var(--panel);
  color:var(--ink);
  font-weight:700;
  border-bottom:1px solid var(--line);
}
.data-table td{
  padding:12px 16px;
  color:var(--ink-muted);
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.data-table tr:last-child td{border-bottom:0}
.data-table td strong{color:var(--ink)}

/* 正文容器里的裸表格防御 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ---------- 正文排版 ---------- */
.prose{max-width:72em}
.prose > h2{
  margin-top:2.2em;
  padding-top:1.2em;
  border-top:1px solid var(--line);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose > h3{margin-top:1.6em}
.prose p,.prose li{max-width:68em}
.prose pre{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 20px;
  color:var(--ink);
}
.prose pre code{background:none;padding:0;font-size:13px;color:inherit;overflow-wrap:normal}
.prose :not(pre) > code{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 7px;
  color:var(--accent-dark);
}
.prose a:not(.cta):not(.minibtn){
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(196,55,18,.35);
  text-underline-offset:3px;
}
.prose a:not(.cta):not(.minibtn):hover{text-decoration-color:var(--accent-dark)}

/* ---------- 下载引导横幅(文末) ---------- */
.dlcta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  margin-top:40px;
  padding:28px 32px;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-back);
}
.dlcta__body{flex:1 1 320px;min-width:0}
.dlcta__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.dlcta__desc{
  margin:0;
  font-size:14px;
  color:var(--ink-muted);
}
.dlcta .cta{flex-shrink:0}

/* ---------- 常驻下载浮层(dl-fab) ---------- */
.dl-fab{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:48px;
  padding:0 20px 0 16px;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--bg);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  box-shadow:var(--shadow-fab);
  transition:background-color .18s ease,transform .18s ease;
}
.dl-fab:hover{
  background:var(--accent-dark);
  color:var(--bg);
  transform:translateY(-1px);
}
.dl-fab svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .tabpanel{padding:24px 18px}
  .tab{min-height:42px;padding:0 14px;font-size:14px}
  .toc{width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .toc::-webkit-scrollbar{display:none}
  .toc a{flex-shrink:0}
  .faqitem summary{min-height:56px;padding:14px 18px;font-size:15px}
  .faqitem__body{padding:0 18px 18px;font-size:14px}
  .dlcard{padding:24px 18px}
  .dlcard__title{font-size:19px}
  .dlentry{padding:14px}
  .dlentry__btn{margin-left:0;width:100%;justify-content:center}
  .blogcard{padding:22px 18px}
  .callout{padding:16px 18px}
  .dlcta{padding:22px 18px}
  .dlcta .cta{width:100%;justify-content:center}
  .dl-fab{
    right:16px;
    bottom:16px;
    height:44px;
    padding:0 16px 0 12px;
    font-size:13px;
  }
}