
/* 深蓝主色 + 青绿点缀｜轻量工业软件风（保留你原风格） */
.jl-detail{
  --navy:#0b2a4a;
  --navy2:#123a66;
  --cyan:#19c2ff;
  --mint:#2ee6a6;
  --text:#0f172a;
  --muted:#516070;
  --line:#e6edf7;
  --shadow:0 18px 45px rgba(11,42,74,.12);
  font-family:Arial,"Microsoft YaHei",sans-serif;
  line-height:1.7;
  color:var(--text);
}

.jl-section{margin:42px 0;}
.jl-title{
  font-size:20px;margin:0 0 14px;font-weight:900;color:var(--navy);
  position:relative;padding-left:12px;
}
.jl-title:before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}

.jl-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:900;color:var(--navy);
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(25,194,255,.35);
  background:#fff;
}
.jl-kicker:before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}

.jl-hero{
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  display:flex;gap:22px;flex-wrap:wrap;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(11,42,74,.1), rgba(25,194,255,.1), rgba(46,230,166,.08));
}
.jl-hero__text{flex:1;min-width:280px;}
.jl-hero__text h1{font-size:28px;margin:10px 0;font-weight:900;color:var(--navy);}
.jl-hero__text p{color:var(--muted);}
.jl-hero__media{flex:1;min-width:280px;}

.jl-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.jl-badge{
  font-size:12px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(46,230,166,.28);
  background:#fff;font-weight:900;color:var(--navy);
}

/* 流程 */
.jl-flow{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  font-weight:900;color:var(--navy);
}
.jl-flow__item{
  padding:10px 14px;border-radius:14px;
  border:1px solid rgba(25,194,255,.22);
  background:#fff;
}
.jl-flow__arrow{color:var(--cyan);font-size:18px;}

/* 卡片 */
.jl-grid{display:grid;gap:14px;}
.jl-grid--3{grid-template-columns:repeat(3,1fr);}
.jl-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;background:#fff;
  box-shadow:0 14px 35px rgba(11,42,74,.08);
}
.jl-card__top{display:flex;gap:8px;margin-bottom:10px;}
.jl-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(180deg,var(--cyan),var(--mint));
}
.jl-tag{
  font-size:12px;font-weight:900;color:var(--navy2);
  padding:5px 10px;border-radius:999px;border:1px solid rgba(25,194,255,.2);
}

/* ✅ 两列：底部对齐（关键） */
.jl-split{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  align-items:stretch;
}
.jl-panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;background:#fff;

  display:flex;
  flex-direction:column;
}
.jl-muted{color:var(--muted);}

/* 图片媒体区：推到底部，实现两列图片底部对齐 */
.jl-media{margin-top:auto;}
.jl-media--1{display:grid;grid-template-columns:1fr;gap:10px;}

/* ✅ 统一图片显示比例（16:10）+ cover 裁切 */
.jl-ratio{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(11,42,74,.10);
}
.jl-ratio--16x10{aspect-ratio:16/10;}
.jl-ratio > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* tags */
.jl-tags{display:flex;flex-wrap:wrap;gap:10px;}
.jl-tag-pill{
  border:1px solid rgba(46,230,166,.22);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;font-weight:900;
  color:var(--navy);background:#fff;
}

.jl-cta{border-top:1px dashed #e6edf7;padding-top:26px;}

@media(max-width:980px){
  .jl-grid--3{grid-template-columns:1fr;}
  .jl-split{grid-template-columns:1fr;}
  .jl-media{margin-top:12px;} /* 移动端不强推底部，阅读更自然 */
}
