/* ==========================================================================
   VPNBL · streaming.css
   流媒体解锁页(netflix.html)专属样式:内页 Hero / 长文档容器 / 支持矩阵 /
   报错码卡片 / 相关页面卡。
   共享组件样式一律不在此重复定义,只引用 base.css 的设计令牌。
   ========================================================================== */

/* ---- 内页 Hero:沿用 .hero 基底,只调整标题层级与附加信息行 ---- */
.doc-hero__title{
  margin-top:16px;
  line-height:1.08;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.doc-hero__meta{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--text-muted);
}

/* ---- 长文档容器:章节目录的父元素,必须覆盖全部章节 ---- */
.doc{
  max-width:980px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.doc__sec{padding-block:34px}
.doc__sec+.doc__sec{border-top:1px solid var(--border-soft)}
.doc__sec h2{margin-bottom:14px}
.doc__sec h3{margin:22px 0 10px}
.doc__sec p{line-height:1.72}
.doc__sec p+p{margin-top:12px}
.doc__sec p a{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.doc__lead{
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  margin-bottom:18px;
}
.doc__list{display:grid;gap:11px;margin-top:14px}
.doc__list li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.75;
  color:var(--text-muted);
}
.doc__list li::before{
  content:"";
  position:absolute;left:2px;top:11px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.5;
}
.doc__list li strong{color:var(--text);font-weight:800}
.doc__note{
  margin-top:16px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.doc__cta{margin-top:28px}

/* ---- 图例 ---- */
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:0 0 18px;
  font-size:13.5px;
  color:var(--text-muted);
}
.legend li{display:inline-flex;align-items:center;gap:8px;min-width:0}

/* ---- 支持状态标记 ---- */
.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  flex:none;
}
.mark--ok{color:var(--success);background:var(--success-wash);border:1px solid var(--success-edge)}
.mark--part{color:var(--warn);background:var(--warn-wash);border:1px solid var(--warn-edge)}
.mark--no{color:var(--text-muted);background:var(--bg-panel-2);border:1px solid var(--border)}

/* ---- 表格最小宽度(窄屏由 .table-scroll 横滑,不撑破页面) ---- */
.table-scroll .matrix-table{min-width:820px}
.table-scroll .bw-table{min-width:660px}
.table-scroll .pick-table{min-width:720px}

/* ---- 报错码卡片 ---- */
.err-list{display:grid;gap:12px;margin-top:16px}
.err{
  display:grid;
  grid-template-columns:minmax(0,215px) minmax(0,1fr);
  gap:4px 20px;
  padding:16px 18px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  min-width:0;
}
.err__code{
  grid-row:span 2;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}
.err__what{
  font-size:14.5px;
  font-weight:700;
  line-height:1.6;
  color:var(--text);
}
.err__fix{
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---- 相关页面卡 ---- */
.link-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:6px;
}
.link-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px 20px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease;
  min-width:0;
}
.link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-panel)}
.link-card__title{font-size:17px;font-weight:800;line-height:1.4;letter-spacing:-.01em}
.link-card__note{font-size:14px;line-height:1.65;color:var(--text-muted)}
.link-card__more{
  margin-top:auto;
  padding-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:700;
  color:var(--accent);
}
.link-card__more svg{width:14px;height:14px;flex:none;color:currentColor}

/* ---- 响应式 ---- */
@media (max-width:760px){
  .err{grid-template-columns:minmax(0,1fr);gap:6px}
  .err__code{grid-row:auto}
}
@media (max-width:640px){
  .doc__sec{padding-block:26px}
  .legend{gap:8px 14px}
  .link-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- 动效偏好 ---- */
@media (prefers-reduced-motion:reduce){
  .link-card:hover{transform:none}
}