/* ===== ZEC 蒸馏点公共样式 v1 ===== */
:root{
  --navy:#17394b; --navy2:#23566b; --cyan:#2fa9bb; --cyan-soft:#8fd3dd;
  --seal:#a8453a; --parch:#faf7ee; --ink:#2c3e46; --mut:#5a707e;
  --line:#dbe6e9; --card:#ffffff; --bg:#f2f7f8;
}
* {box-sizing:border-box; margin:0; padding:0;}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #f2f7f8 0%, #f6f5ef 60%, #eef4f5 100%);
  color: var(--ink); line-height: 1.7; font-size: 15px;
}
a {color: var(--cyan); text-decoration: none;}
a:hover {text-decoration: underline;}

/* 导航栏 */
.tip-nav {
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 0; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.tip-nav-inner {
  max-width: 900px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.tip-nav a.back {
  color: var(--navy); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.tip-nav .tip-no {
  background: var(--navy); color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}

/* 主容器 */
.tip-wrap {max-width: 900px; margin: 0 auto; padding: 30px 20px 60px;}

/* 头部 */
.tip-header {
  background: linear-gradient(155deg, #e8f3f5 0%, #f6f2e6 55%, #eef6f3 100%);
  border: 1px solid #dfe9ea; border-radius: 18px;
  padding: 32px; margin-bottom: 24px;
  box-shadow: 0 12px 32px -16px rgba(23,57,75,0.2);
}
.tip-header .cat-tag {
  display: inline-block; font-size: 12px; letter-spacing: 0.2em;
  color: var(--navy2); border: 1px solid #c8dcde;
  border-radius: 999px; padding: 4px 14px;
  background: rgba(255,255,255,0.65); margin-bottom: 14px;
}
.tip-header h1 {
  font-size: 26px; color: var(--navy); font-weight: 800;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.tip-header .sub {
  font-size: 14px; color: var(--mut); line-height: 1.8;
}
.tip-header .art-ref {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--mut);
}
.tip-header .art-ref b {color: var(--navy);}

/* 内容区块 */
.tip-section {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; margin-bottom: 16px;
  box-shadow: 0 4px 16px -8px rgba(23,57,75,0.12);
}
.tip-section h2 {
  font-size: 17px; color: var(--navy); font-weight: 700;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--cyan-soft);
  display: flex; align-items: center; gap: 8px;
}
.tip-section h2 .sec-icon {font-size: 20px;}

/* 法条原文 */
.tip-quote {
  background: #f7f5ee; border-left: 4px solid var(--seal);
  border-radius: 0 10px 10px 0; padding: 16px 20px;
  font-size: 14px; color: #544c3a; line-height: 2;
  margin-bottom: 16px; font-style: italic;
}

/* 风险点 */
.risk-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.risk-item:last-child {border-bottom: none;}
.risk-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--seal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.risk-text b {color: var(--seal); font-size: 14px;}
.risk-text p {font-size: 13px; color: var(--mut); margin-top: 2px;}

/* 解决方案 */
.sol-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.sol-card {
  background: linear-gradient(135deg, #f4f9fa, #f0f6f3);
  border: 1px solid #d5e6e8; border-radius: 12px;
  padding: 16px; transition: all 0.25s ease;
}
.sol-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(23,57,75,0.2);
}
.sol-card b {
  display: block; color: var(--navy); font-size: 14px; margin-bottom: 6px;
}
.sol-card p {font-size: 12.5px; color: var(--mut); line-height: 1.7;}

/* 关联映射 */
.map-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;}
.map-col h4 {
  font-size: 13px; color: var(--navy); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.map-col ul {list-style: none;}
.map-col li {margin-bottom: 6px;}
.map-col a {
  font-size: 13px; color: var(--mut);
  display: block; padding: 6px 10px;
  border-radius: 6px; transition: all 0.2s;
}
.map-col a:hover {
  background: rgba(47,169,187,0.08); color: var(--navy);
  text-decoration: none;
}

/* ROI数据 */
.roi-box {
  background: linear-gradient(135deg, #17394b, #23566b);
  border-radius: 14px; padding: 24px; color: #fff;
}
.roi-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center;}
.roi-item b {
  display: block; font-size: 28px; font-weight: 800;
  font-family: 'Noto Serif SC', serif; margin-bottom: 4px;
}
.roi-item span {font-size: 12px; opacity: 0.85;}
.roi-note {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 12.5px; opacity: 0.8; line-height: 1.8;
}

/* 相关法条 */
.law-list {display: flex; flex-wrap: wrap; gap: 8px;}
.law-tag {
  background: #f0f4f8; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12.5px; color: var(--mut);
}

/* CTA */
.tip-cta {
  text-align: center; margin-top: 30px; padding: 30px;
  background: linear-gradient(155deg, #e8f3f5, #f6f2e6);
  border-radius: 18px; border: 1px solid #dfe9ea;
}
.tip-cta h3 {font-size: 18px; color: var(--navy); margin-bottom: 16px;}
.cta-btn {
  display: inline-block; background: var(--navy); color: #fff;
  border-radius: 999px; padding: 12px 32px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(23,57,75,0.5);
  transition: all 0.25s;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(23,57,75,0.6);
  text-decoration: none; color: #fff;
}

/* 底部 */
.tip-footer {
  text-align: center; margin-top: 40px;
  font-size: 12px; color: #9fb4ba;
}

/* 响应式 */
@media(max-width: 768px){
  .sol-grid, .map-grid {grid-template-columns: 1fr;}
  .roi-grid {grid-template-columns: repeat(2, 1fr);}
  .tip-header h1 {font-size: 20px;}
  .tip-wrap {padding: 20px 16px 40px;}
}