/* =========================================================================
   SLai · Matrix / Pipeline 结构修正 v4.1
   -------------------------------------------------------------------------
   问题：v3/v4 给 .mrow 加了 border+radius+box-shadow，
        但 .mrow 本来是 display:grid 的三栏表格行，
        加边框后变成"每行一个孤立方框"，视觉断裂。
   修法：把 .mrow 改成真正的卡片行——
        · 圆角 + 玻璃底
        · 行间留白（不再用 border-bottom 贴在一起）
        · 悬停时整行发光
   ========================================================================= */

/* ---------- 能力矩阵：行 → 卡 ---------- */
.matrix{
  border-top:0;
  display:grid;
  gap:10px;
}
.mrow{
  display:grid;
  grid-template-columns:52px 210px minmax(0,1fr);
  gap:var(--s4);
  align-items:center;
  padding:20px 20px;
  border:1px solid rgba(168,85,247,.16);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(30,22,52,.68), rgba(14,9,25,.55));
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 52px -34px rgba(0,0,0,.9);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
  position:relative;
  overflow:hidden;
}
/* 左上角 1px 霓虹角标 */
.mrow::after{
  content:"";
  position:absolute;
  top:0;left:20px;
  width:46px;height:1px;
  background:linear-gradient(90deg, rgba(192,132,252,.95), transparent);
  opacity:.55;
  transition:opacity .22s ease, width .22s ease;
}
.mrow:hover{
  border-color:rgba(192,132,252,.55);
  background:linear-gradient(180deg, rgba(45,32,74,.82), rgba(20,14,36,.62));
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(192,132,252,.3),
    0 26px 66px -30px rgba(124,58,237,.65);
  transform:translateY(-2px);
}
.mrow:hover::after{opacity:1;width:88px}
.mrow:hover{padding-left:20px}  /* 覆盖 v2 的 padding-left 位移，避免抖动 */

.mrow .idx{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  color:#C084FC;
  text-shadow:0 0 16px rgba(192,132,252,.6);
  align-self:start;
  padding-top:2px;
}
.mrow h3{
  font-size:16px;
  font-weight:650;
  color:var(--paper);
  letter-spacing:.004em;
}
.mrow h3 .spec{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  color:var(--dim);
  text-transform:uppercase;
  margin-top:6px;
  font-weight:400;
}
.mrow p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}

/* ---------- 取景链路：四格 → 四卡 ---------- */
.pipe{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  border:0;
}
.pipe .step{
  padding:22px 20px 24px;
  border:1px solid rgba(168,85,247,.16);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(30,22,52,.68), rgba(14,9,25,.55));
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 52px -34px rgba(0,0,0,.9);
  position:relative;
  overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.pipe .step::before{
  content:"";
  position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg, rgba(124,58,237,.9), rgba(103,232,249,.55), transparent);
  opacity:.5;
  transition:opacity .22s ease;
}
.pipe .step:hover{
  border-color:rgba(192,132,252,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(192,132,252,.28),
    0 26px 66px -30px rgba(124,58,237,.6);
  transform:translateY(-3px);
}
.pipe .step:hover::before{opacity:1}
.pipe .step:last-child{border-right:1px solid rgba(168,85,247,.16)}

.pipe .step .n{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  color:#C084FC;
  text-shadow:0 0 14px rgba(192,132,252,.55);
  display:block;
  margin-bottom:14px;
}
.pipe .step h3{
  font-size:15.5px;
  font-weight:650;
  color:var(--paper);
  margin-bottom:7px;
}
.pipe .step p{
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}
.pipe .step .m{
  display:block;
  margin-top:13px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--dim);
  text-transform:uppercase;
}

/* ---------- 插件表 ---------- */
.plist{
  display:grid;
  gap:8px;
  border:0;
}
.prow{
  padding:16px 20px;
  border:1px solid rgba(168,85,247,.16);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(30,22,52,.66), rgba(14,9,25,.52));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.prow:hover{
  border-color:rgba(192,132,252,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 56px -30px rgba(124,58,237,.6);
  transform:translateY(-2px);
}

/* ---------- 文档格 ---------- */
.doc-grid{gap:10px}
.doc{
  border:1px solid rgba(168,85,247,.16);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(30,22,52,.66), rgba(14,9,25,.52));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.doc:hover{
  border-color:rgba(192,132,252,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 56px -30px rgba(124,58,237,.6);
  transform:translateY(-3px);
}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .mrow{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .mrow p{grid-column:1 / -1;margin-top:8px}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .pipe{grid-template-columns:1fr}
  .mrow{grid-template-columns:1fr;gap:8px;padding:18px}
  .mrow .idx{font-size:11px}
}