/* ==========================================================================
   VPNPX . streaming.css  (unblock.html 页面专属)
   1. 页头   2. 分区速览板   3. 正文块   4. 双卡   5. 报错卡
   6. 线路示例行   7. 后续链接卡   8. 响应式
   ========================================================================== */

/* ------------------------------------------------------------------ 1. 页头 */
.stream-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:40px;
  padding-bottom:52px;
}
.stream-hero::before{
  content:"";
  position:absolute;
  inset:-8% -6% auto -6%;
  height:72%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(58% 78% at 70% 18%, var(--violet-a18), transparent 72%);
  filter:blur(10px);
}
.stream-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:44px;
  align-items:center;
}
.stream-copy{min-width:0;}
.stream-title{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px,3.9vw,52px);
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--text);
}
.stream-lede{
  margin:0 0 22px;
  max-width:56ch;
  font-size:16px;
  line-height:1.78;
  color:var(--text-muted);
}

/* -------------------------------------------------------- 2. 分区速览板 */
.stream-board{
  position:relative;
  min-width:0;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--white-a90),
    0 26px 56px -30px var(--accent-a35),
    0 8px 18px -12px var(--ink-a10);
  overflow:hidden;
}
.board-chrome{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 15px;
  background:linear-gradient(180deg, var(--bg-panel) 0%, var(--surface) 100%);
  border-bottom:1px solid var(--border-soft);
}
.board-title{
  margin-left:8px;
  min-width:0;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.board-list{
  list-style:none;
  margin:0;
  padding:8px 12px 4px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.board-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "name status"
    "region region";
  align-items:center;
  gap:3px 8px;
  min-width:0;
  padding:8px;
  border-radius:9px;
}
.board-row:nth-child(odd){background:var(--accent-a06);}
.board-name{
  grid-area:name;
  min-width:0;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.board-row .status{
  grid-area:status;
  justify-self:end;
}
.board-region{
  grid-area:region;
  min-width:0;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  word-break:keep-all;
}
.board-note{
  margin:0;
  padding:10px 16px 14px;
  font-size:11px;
  line-height:1.62;
  color:var(--text-muted);
}

/* ------------------------------------------------------------- 3. 正文块 */
.stream-body{min-width:0;}
.stream-body > p,
.stream-body > ul,
.stream-body > ol,
.stream-body > .callout,
.stream-body > .feature-facts{max-width:760px;}
.stream-body p{
  font-size:15.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.stream-body p strong{color:var(--text);font-weight:700;}
.stream-body ul,
.stream-body ol{
  font-size:15.5px;
  line-height:1.85;
  color:var(--text-muted);
  padding-left:1.2em;
}
.stream-body ul strong,
.stream-body ol strong{color:var(--text);font-weight:700;}
.stream-body a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------------------------------------------------------------- 4. 双卡 */
.duo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:26px 0 24px;
}
.duo-card{
  min-width:0;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 18px 40px -32px var(--accent-a35);
}
.duo-card h3{
  margin:0 0 10px;
  font-size:17px;
  letter-spacing:-.015em;
}
.duo-card p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}
.duo-tag{
  display:inline-flex;
  align-items:center;
  margin-bottom:10px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--accent-a10);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ------------------------------------------------------------- 5. 报错卡 */
.err-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
.err-item{
  min-width:0;
  padding:18px 20px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--bg-panel);
}
.err-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 10px;
  margin-bottom:8px;
}
.err-platform{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text);
}
.err-code{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.err-fix{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* --------------------------------------------------------- 6. 线路示例行 */
.route-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:16px 0 0;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}
.route-line .flag{width:18px;height:12px;}

/* --------------------------------------------------------- 7. 后续链接卡 */
.next-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.next-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  box-shadow:0 18px 40px -32px var(--accent-a35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.next-card:hover{
  transform:translateY(-3px);
  border-color:var(--violet-a28);
  box-shadow:0 26px 50px -30px var(--accent-a35);
}
.next-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent);
}
.next-title{
  margin:0;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.015em;
  color:var(--text);
}
.next-more{
  margin-top:auto;
  padding-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
}

/* ------------------------------------------------------------- 8. 响应式 */
@media (max-width:1180px){
  .stream-hero-grid{gap:34px;}
}
@media (max-width:1024px){
  .stream-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;}
  .stream-board{max-width:560px;width:100%;}
}
@media (max-width:768px){
  .stream-hero{padding-top:28px;padding-bottom:38px;}
  .stream-title{font-size:clamp(28px,6.6vw,38px);}
  .stream-lede{font-size:15.5px;}
  .duo-grid,
  .err-grid,
  .next-grid{grid-template-columns:minmax(0,1fr);}
  .duo-card,
  .err-item,
  .next-card{padding:18px;}
}
@media (max-width:400px){
  .board-name{font-size:12.5px;}
  .board-region{font-size:10px;}
  .route-line{font-size:11.5px;}
}