/* ============================================================
   VPNTea · streaming.css
   流媒体内容区、出口线路与播放链路专题
   ============================================================ */

.stream-hero{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  overflow-x:clip;
}

.stream-hero-grid{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:clamp(34px,6vw,88px);
  padding-top:clamp(58px,8vw,104px);
  padding-bottom:clamp(58px,8vw,104px);
}

.stream-hero-copy{min-width:0}

.stream-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 13px;
  color:var(--muted);
  font-size:13px;
}

.stream-label .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.stream-hero h1{
  margin-top:20px;
  font-size:clamp(46px,5.2vw,68px);
  line-height:1.08;
  letter-spacing:-.018em;
}

.stream-hero h1 span,
.stream-hero h1 em{display:block}

.stream-hero h1 em{
  color:var(--accent);
  font-style:normal;
}

.stream-lead{
  max-width:660px;
  margin-top:20px;
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
}

.stream-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:28px;
}

.stream-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:26px;
}

.stream-diagram{
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
  padding:24px;
}

.diagram-cap{
  font-family:var(--font-mono);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
}

.stream-diagram svg{
  display:block;
  width:100%;
  margin-top:10px;
}

.diagram-line{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:7 8;
}

.diagram-line-soft{stroke:var(--muted)}

.diagram-node{
  fill:var(--bg);
  stroke:var(--accent);
  stroke-width:2;
}

.diagram-screen{
  fill:var(--bg);
  stroke:var(--ink);
  stroke-width:1.5;
}

.diagram-play{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linejoin:round;
}

.diagram-base{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
}

.diagram-text{
  fill:var(--muted);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-anchor:middle;
}

.diagram-note{
  border-top:1px solid var(--border);
  padding-top:16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

.stream-doc{
  position:relative;
  padding-top:24px;
}

.stream-doc .toc-tabs{margin-bottom:0}

.stream-section{
  overflow:visible;
  scroll-margin-top:calc(var(--header-h) + 68px);
}

.stream-copy{
  max-width:880px;
  margin-inline:auto;
}

.stream-copy-wide{
  max-width:1160px;
  margin-inline:auto;
}

.stream-copy>p{
  margin-top:16px;
  font-size:15.5px;
  line-height:1.95;
  color:var(--ink);
}

.stream-copy>.kicker{margin-top:0}

.stream-copy .sec-title,
.stream-copy-wide .sec-title{margin-bottom:20px}

.stream-copy .sec-title+p{
  margin-top:0;
}

.stream-table{min-width:940px}

.stream-platform{
  font-family:var(--font-display);
  font-weight:800;
}

.stream-status{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:3px 10px;
  color:var(--accent-dark);
  font-size:12px;
  font-weight:700;
}

.stream-table-note{
  margin-top:16px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.8;
}

.stream-compare{
  margin-top:28px;
  margin-bottom:28px;
}

.quality-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:30px;
  margin-bottom:28px;
}

.quality-item{
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--bg);
  padding:22px 20px;
}

.quality-item .mono{
  color:var(--accent-dark);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
}

.quality-item h3{margin-top:10px}

.quality-item p{
  margin-top:9px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.error-list{
  border-top:1px solid var(--border);
  margin-top:28px;
}

.error-row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:24px;
  padding-top:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
}

.error-row>*{min-width:0}

.error-mark{
  align-self:start;
  border:1px solid var(--accent);
  border-radius:var(--r-s);
  padding:8px 10px;
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-align:center;
}

.error-row h3{margin-bottom:9px}

.error-row p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.stream-steps{margin-top:30px}

.stream-plan-note{
  margin-top:42px;
  background:var(--bg);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  padding:24px 26px;
}

.stream-plan-note h3{margin-bottom:10px}

.stream-plan-note p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.stream-plan-note p+p{margin-top:10px}

.stream-next{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:32px;
}

.stream-next-link{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
  transition:border-color .15s;
}

.stream-next-link:hover{border-color:var(--accent)}

.stream-next-link .mono{
  color:var(--accent-dark);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
}

.stream-next-link strong{
  font-family:var(--font-display);
  font-size:18px;
}

.stream-next-link span:last-child{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}

@media (max-width:1020px){
  .stream-hero-grid{
    grid-template-columns:1fr;
    min-height:0;
  }

  .stream-diagram{
    width:100%;
    max-width:720px;
    margin-inline:auto;
  }

  .quality-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  .stream-hero-grid{
    padding-top:48px;
    padding-bottom:52px;
  }

  .stream-hero h1{
    font-size:clamp(34px,9vw,40px);
    line-height:1.12;
  }

  .stream-lead{
    font-size:15.5px;
    line-height:1.8;
  }

  .stream-diagram{padding:18px}

  .error-row{
    grid-template-columns:1fr;
    gap:12px;
  }

  .error-mark{
    justify-self:start;
    text-align:left;
  }

  .stream-next{grid-template-columns:1fr}
}

@media (max-width:520px){
  .stream-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .stream-actions .btn-main,
  .stream-actions .btn-plans{
    justify-content:center;
    width:100%;
  }

  .stream-facts{align-items:flex-start}

  .stream-diagram{padding:14px}

  .diagram-cap{
    line-height:1.6;
    overflow-wrap:anywhere;
  }

  .stream-plan-note{padding:20px 18px}
}