@charset "utf-8";
/* ==========================================================================
   v2rayNG安卓版 · tutorial.css
   setup.html(快速上手)专属样式:
   页首文案 / 步骤块 / 界面路径清单 / 桌面版对照 / 卡点速查网格 / 延伸阅读卡
   ========================================================================== */

/* ---------------------------------------------------------------
   1. 页首
   --------------------------------------------------------------- */
.tut-head{max-width:840px}
.tut-lede{
  margin-top:18px;
  max-width:66ch;
  font-size:17px;
  line-height:1.8;
  color:var(--text-muted);
}
.tut-lede a{
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.tut-hero .fact-bar{margin-top:28px}
.tut-hero .callout{margin-top:28px}
.tut-hero .toc{margin-top:22px}

/* 浅底引用块里的链接统一着色(深底区块不适用) */
.callout a{
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------------------------------------------------------
   2. 步骤块
   --------------------------------------------------------------- */
.step-block{scroll-margin-top:24px}
.step-head{
  display:flex;
  align-items:flex-start;
  gap:18px;
  max-width:820px;
}
.step-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:var(--radius-md);
  background:var(--accent);
  color:var(--bg-panel-2);
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
  line-height:1;
}
.step-sub{
  margin-top:8px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.step-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 336px;
  gap:36px;
  margin-top:30px;
  align-items:start;
}
.step-grid > *{min-width:0}

/* ---------------------------------------------------------------
   3. 右栏:界面路径清单
   --------------------------------------------------------------- */
.step-aside{position:static}
.section.is-panel .step-aside{background:var(--bg)}
.aside-title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--text-muted);
}
.path-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
}
.path-list li{
  min-width:0;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.path-list li:last-child{padding-bottom:0;border-bottom:0}
.p-k{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
}
.p-v{
  display:block;
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

/* ---------------------------------------------------------------
   4. 桌面版对照
   --------------------------------------------------------------- */
.desk-note{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:26px;
  padding:16px 18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
}
.desk-label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--accent-dark);
}
.desk-note p{
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.desk-note code{
  padding:1px 5px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-panel);
  font-size:.9em;
  color:var(--text);
}

/* ---------------------------------------------------------------
   5. 卡点速查(深底区块)
   --------------------------------------------------------------- */
.pit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
  margin-top:32px;
}
.pit-grid > *{min-width:0}
.pit-more{
  margin-top:24px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--hero-text-dim);
}
.pit-more a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------------------------------------------------------
   6. 延伸阅读卡
   --------------------------------------------------------------- */
.next-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:32px;
}
.next-grid > *{min-width:0}
.next-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.next-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-pop);
  border-color:var(--text-muted);
}
.next-k{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.next-card h3{font-size:17px}
.next-card p{
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.next-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:6px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--accent-dark);
}

/* ---------------------------------------------------------------
   7. 响应式
   --------------------------------------------------------------- */
@media (max-width:1024px){
  .step-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .pit-grid,.next-grid{grid-template-columns:minmax(0,1fr)}
  .step-head{gap:14px}
  .step-no{width:38px;height:38px;font-size:17px}
  .tut-lede{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .next-card:hover{transform:none}
}