:root{
  --bg:#f6f4ef; --card:#fff; --ink:#23211d; --ink2:#5c574e; --ink3:#8b857a;
  --line:#e2ddd2; --brand:#1f5c3d; --brand2:#2f7d54; --amber:#b5731a; --red:#a8321f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  padding:0 0 96px;
}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin:16px 0;
      box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05)}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:18px;margin:22px 0 8px}
h3{font-size:15px;margin:18px 0 6px;color:var(--ink2)}
p{margin:8px 0}
.sub{color:var(--ink3);font-size:13px;margin:0 0 12px}
.muted{color:var(--ink3);font-size:13px}

.hd{position:sticky;top:0;z-index:20;background:rgba(246,244,239,.96);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:12px;padding:10px 16px}
.hd b{font-size:14px;font-weight:600}
.bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brand2);transition:width .25s}

.q{border-top:1px solid var(--line);padding:16px 0}
.q:first-child{border-top:0}
.qt{font-size:17px;margin:0 0 12px;font-weight:500}
.qn{color:var(--ink3);font-weight:400;margin-right:8px;font-variant-numeric:tabular-nums}

.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line);border-radius:10px;padding:10px 2px;cursor:pointer;background:#fff;
  font-size:11px;color:var(--ink2);text-align:center;line-height:1.3;min-height:66px}
.scale label span.n{font-size:17px;font-weight:600;color:var(--ink)}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale input:checked + label{background:var(--brand);border-color:var(--brand);color:#fff}
.scale input:checked + label span.n{color:#fff}

.opts label{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0;
  cursor:pointer;background:#fff;font-size:15px}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts input:checked + label{background:var(--brand);border-color:var(--brand);color:#fff}

button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:13px 20px;cursor:pointer;
  background:var(--brand);color:#fff}
button:disabled{background:#c9c4b9;cursor:not-allowed}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.sm{padding:8px 14px;font-size:14px;font-weight:500}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.foot{position:fixed;left:0;right:0;bottom:0;background:rgba(246,244,239,.97);
  border-top:1px solid var(--line);padding:12px 0;z-index:20}
.foot .wrap{display:flex;gap:10px;align-items:center;justify-content:space-between}

input[type=text],input[type=number],select,textarea{font:inherit;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;background:#fff;color:var(--ink);width:100%}
.field{margin:12px 0}
.field label{display:block;font-size:14px;color:var(--ink2);margin-bottom:6px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px;line-height:1.6}
.chk input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--brand)}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
th{background:#faf8f4;font-weight:600;color:var(--ink2)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid}
.tag.ok{color:var(--brand);border-color:#bcd7c6;background:#eef6f1}
.tag.warn{color:var(--amber);border-color:#e8d3ae;background:#fbf4e7}
.tag.bad{color:var(--red);border-color:#e6bdb4;background:#fbeeea}

.note{border-left:3px solid var(--amber);background:#fbf7ef;padding:10px 14px;border-radius:0 8px 8px 0;
  font-size:14px;margin:12px 0}
.note.danger{border-left-color:var(--red);background:#fbeeea}
.err{color:var(--red);font-size:14px;margin:8px 0}

.meter{height:8px;background:var(--line);border-radius:99px;position:relative;overflow:hidden}
.meter>i{display:block;height:100%;background:var(--brand2)}
.meter>u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--amber)}

.qr{display:block;margin:12px auto;max-width:260px;width:100%;image-rendering:pixelated}
.code{font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;
  background:#f3f0e9;border:1px solid var(--line);border-radius:9px;padding:12px}

@media (max-width:520px){ .scale label{font-size:10px;min-height:62px} }
@media print{ body{background:#fff;padding:0} .foot,.hd,.noprint{display:none!important}
  .card{box-shadow:none;border-color:#ccc;page-break-inside:avoid} }