:root{
  --cream:#fcf6e4;
  --card:#fffdf6;
  --ink:#3d3016;
  --ink-soft:#7b6a4c;
  --amber:#eba80f;
  --bronze:#876527;
  --line:#eadfc0;
  --teal:#2e6f78;
  --rust:#c2561b;
  --olive:#7a8f3c;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
a{color:var(--teal)}

/* ── 顶栏 ───────────────────────────── */
.bar{background:var(--amber);color:#2b2008}
.bar .wrap{display:flex;align-items:center;gap:10px;padding:10px 18px;flex-wrap:wrap}
.logo{width:30px;height:30px;flex:0 0 auto}
.bar strong{font-size:16px;letter-spacing:.04em}
.bar nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.bar nav a{color:#2b2008;text-decoration:none;font-size:14px;font-weight:600;padding:2px 0;border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a:focus{border-bottom-color:#2b2008}

/* ── 首屏 ───────────────────────────── */
.hero{padding:40px 0 28px}
h1{margin:0}
.brand{display:block;font-size:clamp(30px,8vw,54px);font-weight:800;letter-spacing:.04em;line-height:1.2}
.tag{display:block;font-size:clamp(14px,3.2vw,19px);font-weight:500;color:var(--bronze);margin-top:10px;line-height:1.6}
.intro{max-width:60ch;margin:18px 0 0;font-size:16.5px}
.honest{
  margin-top:20px;background:var(--card);border:2px dashed var(--amber);
  border-radius:14px;padding:15px 17px;font-size:14.5px;line-height:1.8;
}
.honest b{color:var(--rust)}

/* ── 成分条 ─────────────────────────── */
.compbar{margin:26px 0 0}
.compbar h2{margin-bottom:10px}
.bars{display:grid;gap:12px}
.brow{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center}
@media (max-width:560px){.brow{grid-template-columns:1fr;gap:4px}}
.brow .lbl{font-size:14px;font-weight:700}
.stack{display:flex;height:26px;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:#fff}
.stack i{display:block;font-style:normal;font-size:11px;color:#fff;text-align:center;line-height:26px;white-space:nowrap}
.s-fat{background:var(--amber);color:#3d3016}
.s-water{background:var(--teal)}
.s-solid{background:var(--bronze)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink-soft)}
.legend span::before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .k1::before{background:var(--amber)}
.legend .k2::before{background:var(--teal)}
.legend .k3::before{background:var(--bronze)}

/* ── 区块 ───────────────────────────── */
section{padding:34px 0}
section + section{border-top:1px solid var(--line)}
h2{margin:0 0 8px;font-size:clamp(20px,4.4vw,27px);font-weight:800;letter-spacing:.02em}
h2 em{font-style:normal;color:var(--amber)}
h3{margin:18px 0 6px;font-size:16px;font-weight:700;color:var(--bronze)}
.sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 4px;max-width:66ch}

/* ── 换算工作台 ─────────────────────── */
.bench{
  margin-top:20px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:20px;display:grid;
  grid-template-columns:1fr 46px 1fr;gap:16px;align-items:start;
}
@media (max-width:820px){.bench{grid-template-columns:1fr;gap:10px}}
.col h3{margin-top:0}
.arrow{align-self:center;text-align:center;color:var(--amber);font-size:30px;font-weight:800;line-height:1;pointer-events:none}
/* 单列时整块旋转 90°：必须先把宽度收到字宽，否则旋转后的命中区会变成一条
   贯穿上下的竖条，盖住相邻的输入框。 */
@media (max-width:820px){.arrow{transform:rotate(90deg);font-size:24px;width:1.2em;margin:0 auto}}
label.f{display:block;margin:10px 0}
label.f > span{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:5px}
input[type=number],select{
  width:100%;padding:10px 11px;font-size:15px;font-family:var(--sans);
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input[type=text]{width:100%;padding:10px 11px;font-size:15px;font-family:var(--sans);
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px}
.readout{
  margin-top:20px;background:#fff;border:2px solid var(--amber);border-radius:16px;padding:18px;
}
.readout .headline{font-size:clamp(22px,5.6vw,32px);font-weight:800;color:var(--rust);line-height:1.3;display:block}
.readout .headline small{font-size:15px;color:var(--ink-soft);font-weight:600;display:block;margin-top:4px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:16px}
.rcell{background:var(--cream);border-radius:12px;padding:11px 13px}
.rcell b{display:block;font-family:var(--mono);font-size:19px;color:var(--teal)}
.rcell span{font-size:12.5px;color:var(--ink-soft)}
.advice{margin:14px 0 0;font-size:14.5px;line-height:1.8;border-left:4px solid var(--olive);padding-left:12px}
.warn{color:var(--rust);font-weight:700}

/* ── 种类卡 ─────────────────────────── */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:16px 0 0}
.tools label.f{margin:0;min-width:160px;flex:1 1 160px}
.counter{font-family:var(--mono);font-size:13px;color:var(--bronze);padding-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-top:5px solid var(--amber)}
.tcard.c-fer{border-top-color:var(--teal)}
.tcard.c-cla{border-top-color:var(--rust)}
.tcard.c-oth{border-top-color:var(--olive)}
.tcard h4{margin:0 0 2px;font-size:17px}
.tcard .en{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em}
.tcard p{margin:8px 0 0;font-size:14px;line-height:1.75}
.chip{display:inline-block;font-size:11.5px;padding:1px 9px;border-radius:9px;background:var(--cream);color:var(--bronze);margin-top:9px}
.none{grid-column:1/-1;text-align:center;padding:22px;color:var(--rust);background:var(--card);border-radius:14px;border:1px dashed var(--line)}

/* ── 温度尺 ─────────────────────────── */
.thermo{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.thermo svg{width:100%;height:auto;display:block}
.tnote{margin:12px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.8}

/* ── 事实清单 ───────────────────────── */
.facts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.facts li{background:var(--card);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.75;border-left:4px solid var(--bronze)}
.facts li b{color:var(--rust)}
.srclist{margin:12px 0 0;padding-left:20px;font-size:14px;color:var(--ink-soft)}
.srclist li{margin-bottom:5px}

footer{background:#2b2008;color:#e9dcbe;padding:24px 0 40px;font-size:13.5px;margin-top:30px}
footer p{margin:0 0 8px}

/* ── 404 ────────────────────────────── */
.lost{padding:56px 0 40px;text-align:center}
.lost .big{font-size:clamp(56px,18vw,120px);font-weight:800;color:var(--amber);line-height:1;margin:0}
.lost h1{margin:10px 0 0;font-size:clamp(20px,5vw,30px)}
.lost ul{display:inline-block;text-align:left;margin:20px 0 0;padding-left:20px}
.lost li{margin-bottom:7px;font-size:15px}

/* 防溢出兜底 */
.stack i{min-width:0;overflow:hidden}
.readout .headline,.tcard p,.facts li{overflow-wrap:anywhere}