/* =========================================================
   V2Ray官方中文网 · home.css
   首页专属样式:连接流程面板 / 平台入口网格 /
   信任背书区 / 常见问题速答 / 博客预览
   ========================================================= */

/* ---------- 连接流程面板 ---------- */
.flowband__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.flowband__hint{
  margin:0;
  max-width:34em;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}

.flowsteps{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin:0 0 32px;
  padding:0;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.flowsteps::-webkit-scrollbar{display:none}

.flowsteps .tab{
  position:relative;
  min-height:48px;
  padding:0 18px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink-muted);
  flex-shrink:0;
}
.flowsteps .tab:hover{border-color:var(--ink-muted);color:var(--ink)}
.flowsteps .tab[aria-selected="true"]{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent-dark);
  box-shadow:none;
}

.flowstep-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
}

.flowsteps .tab::after{
  content:"";
  position:absolute;
  top:50%;
  right:-14px;
  width:14px;
  height:2px;
  background:var(--line);
  transform:translateY(-50%);
}
.flowsteps .tab:last-child::after{display:none}
.flowsteps .tab[aria-selected="true"]::after{
  background:var(--accent-mist);
}

.flowpanels{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:28px;
  align-items:stretch;
}

.flowpanel{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  grid-column:1 / -1;
  gap:28px;
  align-items:stretch;
}
.flowpanel.is-active{display:grid}

.flowpanel__text{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  padding:28px;
  box-shadow:var(--shadow-back);
}
.flowpanel__text h3{
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.flowpanel__text p{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-muted);
}
.flowpanel__points{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.flowpanel__points li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  color:var(--ink);
}
.flowpanel__points li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.flowpanel__ui{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

/* 界面示意卡(纯 CSS) */
.uicard{
  width:100%;
  max-width:420px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  box-shadow:var(--shadow-float);
  overflow:hidden;
}
.uicard__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.uicard__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.uicard__dot--r{background:#F26D5B}
.uicard__dot--y{background:#F5C26B}
.uicard__dot--g{background:#6BCB9B}
.uicard__title{
  margin-left:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
}
.uicard__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.uirow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
}
.uirow__label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.uirow__value{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-muted);
}

.uiinput{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.uiinput__label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-muted);
}
.uiinput code{
  display:block;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  font-size:12px;
  color:var(--ink);
}

.uiactions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.uibtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 16px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:var(--ink-muted);
}
.uibtn--solid{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}

.uinodes{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.uinode{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
}
.uinode.is-on{
  border-color:var(--accent);
  background:var(--accent-tint);
}
.uinode__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--line);
  flex-shrink:0;
}
.uinode.is-on .uinode__dot{background:var(--ok)}
.uinode__name{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.uinode__proto{
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-muted);
}
.uinode__group{
  margin-left:auto;
  font-size:12px;
  color:var(--ink-muted);
}

.uirules{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.uirule{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.uirule__action{
  flex-shrink:0;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
}
.uirule__action--direct{
  background:var(--ok-tint);
  color:var(--ok);
}
.uirule__action--proxy{
  background:var(--accent-tint);
  color:var(--accent-dark);
}

.uitoggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.uitoggle__track{
  position:relative;
  width:34px;
  height:19px;
  border-radius:var(--r-pill);
  background:var(--line);
  flex-shrink:0;
}
.uitoggle.is-on .uitoggle__track{background:var(--ok)}
.uitoggle__track::after{
  content:"";
  position:absolute;
  top:2.5px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--bg);
  transition:none;
}
.uitoggle.is-on .uitoggle__track::after{
  left:auto;
  right:3px;
}

.uicheck{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid rgba(23,166,110,.3);
  background:var(--ok-tint);
  border-radius:16px;
}
.uicheck svg{
  width:28px;
  height:28px;
  color:var(--ok);
  flex-shrink:0;
}
.uicheck__title{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}
.uicheck__sub{
  display:block;
  font-size:13px;
  color:var(--ink-muted);
}

/* ---------- 通用小节头 ---------- */
.section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:36px;
}
.section__eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:10px;
}
.section__head h2{
  margin:0;
}
.section__head p{
  margin:0;
  max-width:32em;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}

/* ---------- 平台入口网格 ---------- */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.platform-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:28px 24px;
  box-shadow:var(--shadow-back);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.platform-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-tag);
  border-color:var(--accent);
}
.platform-card__icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  flex-shrink:0;
}
.platform-card__icon svg{
  width:26px;
  height:26px;
}
.platform-card h3{
  margin:2px 0 0;
  font-size:20px;
  font-weight:800;
  color:var(--ink);
}
.platform-card p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}
.platform-card__more{
  margin-top:auto;
  padding-top:8px;
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
}

.platform-foot{
  margin-top:24px;
}
.textlink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:700;
  color:var(--accent-dark);
}
.textlink:hover{color:var(--accent)}
.textlink span{transition:transform .18s ease}
.textlink:hover span{transform:translateX(3px)}

/* ---------- 信任背书区 ---------- */
.section--tint{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.trust-card h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
}
.trust-card p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-muted);
}

.trust-note{
  margin-top:20px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-sheet);
  background:var(--bg);
}
.trust-note p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-muted);
}

/* ---------- 常见问题速答 ---------- */
.faqgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.faqcard{
  display:flex;
  flex-direction:column;
  gap:8px;
  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,border-color .18s ease;
}
.faqcard:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-tag);
  border-color:var(--accent);
}
.faqcard h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--ink);
}
.faqcard p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-muted);
}

/* ---------- 博客预览 ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-card:last-child{grid-column:1 / -1}
}

@media (max-width:900px){
  .flowpanels{grid-template-columns:1fr}
  .flowpanel{grid-template-columns:1fr}
  .flowpanel__ui{order:-1}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-grid .blogcard:last-child{grid-column:1 / -1}
}

@media (max-width:768px){
  .flowband__head{margin-bottom:20px}
  .flowband__hint{font-size:13px}
  .flowsteps{margin-bottom:20px}
  .flowsteps .tab{padding:0 14px}
  .flowpanel__text{padding:20px 18px}
  .flowpanel__text h3{font-size:18px}
  .flowpanel__text p{font-size:14px}
  .uicard__body{padding:16px}
  .section__head{margin-bottom:24px}
  .section__head p{font-size:13px}
  .platform-grid{grid-template-columns:1fr 1fr;gap:12px}
  .platform-card{padding:20px 16px}
  .platform-card__icon{width:44px;height:44px}
  .platform-card__icon svg{width:22px;height:22px}
  .platform-card h3{font-size:17px}
  .trust-grid{grid-template-columns:1fr}
  .trust-card:last-child{grid-column:auto}
  .trust-note{padding:16px 18px}
  .faqgrid{grid-template-columns:1fr}
  .faqcard{padding:20px 18px}
  .blog-grid{grid-template-columns:1fr}
  .blog-grid .blogcard:last-child{grid-column:auto}
}

@media (max-width:480px){
  .platform-grid{grid-template-columns:1fr}
}