/* YL Life · 墨绿 × 鎏金，大气健康风 */
:root{
  --green:#0a5a40; --green-2:#0e7a5f; --green-dark:#073b2b;
  --green-light:#e7f2ec; --gold:#c19a3f; --gold-light:#f6eeda;
  --ink:#1f2d27; --bg:#f7f8f5; --card:#ffffff;
  --text:#232323; --muted:#6f7a74;
  --red:#c0392b; --amber:#a86e14; --line:#e6e9e4; --radius:14px;
  --shadow:0 4px 18px rgba(10,90,64,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:17px;}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.75; padding-bottom:78px;}
a{color:var(--green); text-decoration:none;}
.page{max-width:680px; margin:0 auto; padding:0 18px 26px;}
.topbar{background:linear-gradient(120deg,var(--green-dark),var(--green));
  color:#fff; padding:15px 18px; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 12px rgba(7,59,43,.25);}
.topbar .inner{max-width:680px; margin:0 auto; display:flex;
  align-items:center; justify-content:space-between;}
.topbar h1{font-size:1.2rem; margin:0; font-weight:700; letter-spacing:2px;}
.topbar h1 .gold{color:var(--gold);}
.topbar .sub{font-size:.75rem; opacity:.85; letter-spacing:1px;}
.hero{background:linear-gradient(135deg,#073b2b 0%,#0a5a40 60%,#0e7a5f 100%);
  color:#fff; border-radius:18px; padding:38px 22px 30px; margin:18px 0;
  position:relative; overflow:hidden; box-shadow:var(--shadow); text-align:center;}
.hero::before{content:""; position:absolute; left:50%; top:-110px; transform:translateX(-50%);
  width:280px; height:220px;
  background:radial-gradient(circle, rgba(193,154,63,.30), transparent 70%); pointer-events:none;}
.hero::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:4px; background:var(--gold); border-radius:2px;}
.hero .kicker{font-size:.72rem; letter-spacing:2px; margin-bottom:14px;}
.hero h2{margin:0 0 14px; font-size:1.62rem; letter-spacing:1px; line-height:1.5;}
.hero h2 .hl{color:#f0d488;}
.hero p{margin:0 auto; max-width:34em; opacity:.85; font-size:.92rem; line-height:1.9;}
.hero-foot{margin-top:20px; font-size:.76rem; letter-spacing:3px; color:#e9cf8f; opacity:.92;}
.cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:18px 0;}
.card{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 8px; text-align:center; color:var(--text);
  box-shadow:var(--shadow); transition:transform .15s;}
.card:active{transform:scale(.97);}
.card .icon{font-size:2rem;}
.card .t{font-size:.98rem; font-weight:700; margin-top:8px;}
.card .d{font-size:.75rem; color:var(--muted);}
.section{margin:26px 0;}
.section h3{font-size:1.18rem; margin:0 0 12px; padding-left:12px;
  border-left:5px solid var(--gold); letter-spacing:1px;}
.list-item{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 16px; margin-bottom:12px;
  display:block; color:var(--text); box-shadow:var(--shadow);}
.list-item .t{font-weight:700; font-size:1.02rem;}
.list-item .d{font-size:.86rem; color:var(--muted); margin-top:5px;}
.tag{display:inline-block; font-size:.72rem; background:var(--green-light);
  color:var(--green-dark); border-radius:20px; padding:3px 11px; margin-right:6px;}
.tag.gold{background:var(--gold-light); color:#8a6d1f;}
.tag.red{background:#fdecea; color:var(--red);}
.tag.amber{background:#fdf3e0; color:var(--amber);}
.btn{display:block; width:100%; background:linear-gradient(120deg,var(--green),var(--green-2));
  color:#fff; border:0; border-radius:var(--radius); padding:15px;
  font-size:1.08rem; font-weight:600; letter-spacing:2px; margin:14px 0; cursor:pointer;
  box-shadow:0 4px 14px rgba(10,90,64,.25);}
.btn:active{filter:brightness(.94);}
.btn.secondary{background:#fff; color:var(--green); border:1.5px solid var(--green); box-shadow:none;}
input[type=text],input[type=tel],input[type=number],textarea,select{
  width:100%; font-size:1rem; padding:13px; border:1.5px solid var(--line);
  border-radius:var(--radius); margin:8px 0; background:#fff;}
input:focus{outline:none; border-color:var(--green);}
.ai-badge{display:inline-block; font-size:.72rem; background:#fff8e1; color:#8a6d00;
  border:1px solid var(--gold); border-radius:6px; padding:3px 9px; margin:6px 0;}
.disclaimer{font-size:.8rem; color:var(--muted); background:#f1efe7;
  border-radius:var(--radius); padding:13px 15px; margin:16px 0; border-left:4px solid var(--gold);}
.result-card{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:var(--shadow);}
.result-card.abnormal{border-left:5px solid var(--red);}
.result-card.normal{border-left:5px solid var(--green);}
.kv{display:flex; justify-content:space-between; padding:7px 0; font-size:.94rem;}
.kv .k{color:var(--muted);}
.advice{background:var(--green-light); border-radius:10px; padding:12px 14px;
  margin-top:12px; font-size:.92rem;}
.advice li{margin:5px 0;}
table.items{width:100%; border-collapse:collapse; font-size:.9rem; background:#fff;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
table.items th,table.items td{padding:11px 8px; border-bottom:1px solid var(--line); text-align:left;}
table.items input{margin:0; padding:8px;}
.bottomnav{position:fixed; bottom:0; left:0; right:0; background:rgba(255,255,255,.97);
  border-top:1px solid var(--line); display:flex; z-index:10;
  box-shadow:0 -2px 12px rgba(0,0,0,.05);}
.bottomnav a{flex:1; text-align:center; padding:10px 0 13px; color:var(--muted); font-size:.75rem;}
.bottomnav a .icon{display:block; font-size:1.35rem;}
.bottomnav a.active{color:var(--green); font-weight:700;}
.footer{text-align:center; font-size:.78rem; color:var(--muted); padding:24px 12px 10px; line-height:2;}
.footer a{color:var(--muted); margin:0 8px;}
.footer a:hover{color:var(--green);}
.footer .icp{margin-top:6px;}
.chips{display:flex; gap:9px; overflow-x:auto; padding:4px 0 12px;}
.chip{white-space:nowrap; border:1.5px solid var(--line); background:#fff;
  border-radius:22px; padding:7px 16px; font-size:.87rem;}
.chip.active{background:var(--green); color:#fff; border-color:var(--green);}
.step{display:flex; gap:10px; margin:16px 0;}
.step .n{background:linear-gradient(135deg,var(--gold),#a8812f); color:#fff; width:28px; height:28px;
  border-radius:50%; text-align:center; line-height:28px; font-size:.88rem; flex-shrink:0; font-weight:700;}
.upload-box{display:block; border:2px dashed var(--green); border-radius:var(--radius);
  padding:34px 16px; text-align:center; background:#fff; margin:14px 0; cursor:pointer;
  font-size:1.05rem; box-shadow:var(--shadow);}
.toast{position:fixed; top:40%; left:50%; transform:translate(-50%,-50%);
  background:rgba(20,30,26,.85); color:#fff; padding:13px 22px; border-radius:10px;
  font-size:.92rem; display:none; z-index:99; max-width:82%;}
.loading-mask{position:fixed; inset:0; background:rgba(10,25,20,.55); z-index:999;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px;}
.loading-mask.show{display:flex;}
.loading-mask .spin{width:46px; height:46px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25); border-top-color:#dbb65e;
  animation:spin .9s linear infinite;}
.loading-mask .txt{color:#fff; font-size:.95rem; letter-spacing:2px;}
@keyframes spin{to{transform:rotate(360deg);}}
.article-body p{margin:0 0 15px;}
.article-body{font-size:1.03rem;}
.doc h2{font-size:1.25rem; margin:26px 0 10px; padding-left:12px; border-left:5px solid var(--gold);}
.doc p, .doc li{font-size:.95rem; color:#333;}
.doc ul{padding-left:20px;}
.doc li{margin:6px 0;}
.faq{margin:12px 0;}
.faq .q{font-weight:700; margin-top:14px;}
.faq .a{color:#444; font-size:.93rem;}

/* 借鉴珍爱网的营销元素：信任条 / 为什么选择 / 五步流程 / 安心承诺 / CTA */
.kicker{display:inline-block; font-size:.8rem; color:var(--gold);
  border:1px solid var(--gold); border-radius:20px;
  padding:4px 14px; margin-bottom:12px; letter-spacing:2px;}
.hero .btn{margin:22px auto 4px; max-width:320px;
  background:linear-gradient(120deg,#dbb65e,#c19a3f); color:#073b2b; font-weight:700;
  box-shadow:0 6px 18px rgba(193,154,63,.38);}
.hot-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0;}
.hot-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 10px; box-shadow:var(--shadow); display:block; color:var(--text);
  text-align:center; transition:transform .15s;}
.hot-card:active{transform:scale(.97);}
.hot-card .t{font-weight:700; font-size:.92rem; margin-top:8px; line-height:1.5; min-height:2.7em;}
.hot-card .t .code{color:var(--muted); font-weight:400; font-size:.78rem;}
.hot-card .d{font-size:.74rem; color:var(--muted); margin-top:6px; line-height:1.6;}
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 8px; box-shadow:var(--shadow); text-align:center;}
.trust .num{font-size:1.25rem; font-weight:800; color:var(--green-dark);}
.trust .num em{font-style:normal; color:var(--gold);}
.trust .lbl{font-size:.72rem; color:var(--muted); margin-top:4px;}
.why{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0;}
.why .card{padding:16px 10px;}
.steps5{margin:6px 0;}
.steps5 .step{align-items:flex-start; margin:13px 0;}
.steps5 .en{font-size:.68rem; color:var(--gold); letter-spacing:2px; font-weight:700;}
.steps-row{display:flex; margin:16px 0 8px; position:relative;}
.steps-row::before{content:""; position:absolute; top:13px; left:12%; right:12%; height:2px; background:var(--line);}
.steps-row .s{flex:1; text-align:center; position:relative;}
.steps-row .n{width:26px; height:26px; border-radius:50%; margin:0 auto; position:relative; z-index:1;
  background:linear-gradient(135deg,var(--gold),#a8812f); color:#fff;
  font-size:.78rem; font-weight:700; line-height:26px;}
.steps-row .t{font-size:.72rem; margin-top:8px; color:var(--text); line-height:1.4;}
.promise{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0;}
.promise .p{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);}
.promise .no{font-size:1.3rem; font-weight:800; color:var(--gold); letter-spacing:1px;}
.promise .t{font-weight:700; margin:4px 0; font-size:.95rem;}
.promise .d{font-size:.82rem; color:var(--muted);}
.cta-final{background:linear-gradient(135deg,#073b2b,#0e7a5f); border-radius:18px;
  padding:28px 22px; text-align:center; color:#fff; margin:26px 0; box-shadow:var(--shadow);}
.cta-final h3{margin:0 0 8px; font-size:1.25rem; letter-spacing:1px;}
.cta-final p{margin:0 0 6px; opacity:.9; font-size:.9rem;}
.cta-final .btn{max-width:300px; margin:14px auto 0; background:#fff;
  color:var(--green-dark); box-shadow:none;}