@charset "UTF-8";
/* ============================================================
   适用：eyyy.hl.cn 的 news/*.html
   柔和有机风 · 文章页增强样式（导语 / 提示框 / 标签 / 相关文章）
   依赖：../assets/style.css
   ============================================================ */

.article-lead{
  position:relative;margin:0 0 26px;padding:24px 26px;
  background:linear-gradient(150deg,#FBF7FF 0%,#FFFAF7 100%);
  border:1px solid #F0E9E1;border-radius:26px;
  font-size:17px;line-height:1.95;color:#4A4460
}
.article-lead::before{
  content:"";position:absolute;left:26px;top:-1px;width:64px;height:4px;
  border-radius:0 0 6px 6px;background:linear-gradient(90deg,#7C5CFF,#FF8A65)
}

.callout{
  margin:26px 0;padding:22px 24px;border-radius:26px;
  background:#FFFAF6;border:1px solid #FFE6DA;box-shadow:0 10px 26px rgba(46,42,59,.06)
}
.callout p{margin:0;font-size:15.8px;color:#6B4A3C}
.callout strong{color:#C2573A}
.callout.tip{background:#FBF8FF;border-color:#E7DEFF;box-shadow:0 10px 26px rgba(46,42,59,.06)}
.callout.tip p{color:#4A4460}
.callout.tip strong{color:#6A46F2}

.reader blockquote{
  margin:24px 0;padding:18px 24px;border-radius:24px;
  background:#F7F3FF;border-left:5px solid #7C5CFF;color:#4A4460;font-size:15.8px
}
.reader blockquote p{margin:0}

.mini-table{
  width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;
  border-radius:22px;overflow:hidden
}
.mini-table caption{caption-side:top;text-align:left;padding:0 4px 10px;font-size:14px;color:#8B8598}
.mini-table th,.mini-table td{padding:13px 16px;border-bottom:1px solid #F0E9E1;text-align:left}
.mini-table thead th{background:#FBF7FF;color:#6A46F2;font-weight:700}
.mini-table tbody th{font-weight:600;color:#2E2A3B;white-space:nowrap}

.article-tags{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 24px;padding-top:22px;border-top:1px dashed #E7DDD2}
.article-tags a{
  padding:7px 16px;border-radius:999px;background:#FBF7FF;border:1px solid #F0E9E1;
  font-size:14px;color:#6A46F2
}
.article-tags a:hover{background:#FFEDE6;border-color:#FFD9C9;color:#C2573A}

.related{margin-top:8px;padding:26px;border-radius:28px;background:#FDFAF6;border:1px solid #F0E9E1}
.related h2{font-size:18px;margin:0 0 .7em;padding:0;border:0;color:#2E2A3B}
.related-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.related-list a{
  display:block;padding:16px 20px;border-radius:22px;background:#fff;
  border:1px solid #F0E9E1;box-shadow:0 10px 24px rgba(46,42,59,.06);
  font-size:15.4px;color:#2E2A3B;line-height:1.7;transition:transform .18s ease
}
.related-list a:hover{transform:translateY(-2px);color:#6A46F2}
.related-list span{display:block;font-size:13px;color:#8B8598;margin-top:4px}

.article-meta-line{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.article-meta-line span{
  padding:6px 16px;border-radius:999px;background:#fff;border:1px solid #F0E9E1;
  box-shadow:0 8px 20px rgba(46,42,59,.06);font-size:14px;color:#5F5A72
}

@media (max-width:860px){
  .article-lead{padding:20px 20px;font-size:16.2px}
  .related{padding:20px 18px}
  .related-list a{padding:14px 16px;font-size:15px}
}
@media (max-width:600px){
  .mini-table{font-size:14px}
  .mini-table th,.mini-table td{padding:11px 12px}
  .mini-table tbody th{white-space:normal}
}