/* ======================================================================
   帽子尺码换算 · 复古裁缝卷尺 米色 + 藏青主题
   浅色 = 裁缝台米色纸 + 藏青标尺；深色 = 深夜工坊 + 暖米尺
   ====================================================================== */
.hsc{
  --ink:#26221a; --sub:#7d7361; --faint:#a89d87;
  --bg:#f3ecdd; --card:#fbf7ee; --card2:#ece3cf; --line:#d8ccb2; --line2:#e6ddc9;
  --pri:#1e3a5f; --pri-2:#2c5183; --pri-soft:#dfe8f2; --pri-ink:#16304f;
  --navy:#1e3a5f; --brass:#a8791f; --brass-soft:#f6ead0;
  --ok:#3d6b3a; --ok-soft:#e6f1e2;
  --warn:#a16207; --warn-soft:#f8efd6;
  --bad:#a63b2a; --bad-soft:#f8e7e1;
  --r:14px;
  --shadow:0 1px 2px rgba(38,34,26,.07),0 12px 28px rgba(38,34,26,.10);
  color:var(--ink);
  font-family:Georgia,"Songti SC","STSong",-apple-system,"PingFang SC","Microsoft YaHei",serif;
  font-size:15px; line-height:1.8;
  background:
    radial-gradient(900px 400px at 90% -140px, rgba(30,58,95,.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(125,115,97,.05) 34px 35px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .hsc{
  --ink:#ece4d2; --sub:#a89c82; --faint:#736a55;
  --bg:#14110a; --card:#1e1a11; --card2:#282215; --line:#3d3524; --line2:#322b1c;
  --pri:#8ab4e8; --pri-2:#aacdf5; --pri-soft:rgba(138,180,232,.12); --pri-ink:#c7ddf7;
  --navy:#8ab4e8; --brass:#d9a84a; --brass-soft:rgba(217,168,74,.12);
  --ok:#8fce8a; --ok-soft:rgba(143,206,138,.12);
  --warn:#e6c068; --warn-soft:rgba(230,192,104,.12);
  --bad:#e08a72; --bad-soft:rgba(224,138,114,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.45);
}
.hsc *{box-sizing:border-box;}
.hsc b{font-weight:700;}
.hsc-wrap{max-width:1120px;margin:0 auto;}
.hsc input,.hsc-mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

/* ---------- Hero：卷尺盘 ---------- */
.hsc-hero{margin-top:22px;display:flex;gap:0;align-items:stretch;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.hsc-reel{
  flex:none;width:210px;background:var(--navy);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;
}
.hsc-reel .hsc-circle{width:96px;height:96px;border-radius:50%;border:10px solid #efe6d2;border-right-color:transparent;position:relative;animation:hscSpin 9s linear infinite;}
@keyframes hscSpin{to{transform:rotate(360deg);}}
.hsc-reel b{color:#efe6d2;font-size:13px;letter-spacing:.22em;font-family:ui-monospace,monospace;}
.hsc-reel span{color:rgba(239,230,210,.65);font-size:11px;letter-spacing:.12em;font-family:ui-monospace,monospace;}
.hsc-hero-body{flex:1;background:var(--card);padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
.hsc-hero h1{margin:0 0 8px;font-size:clamp(23px,3.4vw,31px);font-weight:900;}
.hsc-hero h1 em{font-style:normal;color:var(--brass);}
.hsc-hero p{margin:0;color:var(--sub);font-size:15px;max-width:680px;}
.hsc-hero p b{color:var(--ink);}
@media (max-width:700px){.hsc-hero{flex-direction:column;}.hsc-reel{width:100%;}}

/* ---------- 工作台 ---------- */
.hsc-desk{display:grid;grid-template-columns:400px 1fr;gap:18px;margin-top:20px;}
@media (max-width:920px){.hsc-desk{grid-template-columns:1fr;}}
.hsc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;}
.hsc-card h2{margin:0 0 12px;font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;}
.hsc-card h2 s{text-decoration:none;color:var(--brass);font-family:ui-monospace,monospace;font-size:14px;}
.hsc-field{margin-bottom:12px;}
.hsc-field label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:4px;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
.hsc-in{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:16px;outline:none;transition:border-color .15s;}
.hsc-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.hsc-slider{width:100%;margin-top:10px;accent-color:var(--navy);}
.hsc-quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.hsc-quick button{border:1px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:8px;padding:4px 12px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:ui-monospace,monospace;}
.hsc-quick button:hover{border-color:var(--brass);background:var(--brass-soft);}
.hsc-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.hsc-btn{border:none;border-radius:9px;padding:9px 17px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
.hsc-btn-go{background:var(--navy);color:#efe6d2;}
:root[data-theme="dark"] .hsc-btn-go{color:#14110a;}
.hsc-btn-go:hover{background:var(--pri-2);}
.hsc-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.hsc-btn-ghost:hover{border-color:var(--brass);}
.hsc-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:700;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
.hsc-msg.err{color:var(--bad);}
.hsc-msg.ok{color:var(--ok);}

/* ---------- 结果 ---------- */
.hsc-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media (max-width:620px){.hsc-grades{grid-template-columns:1fr 1fr;}}
.hsc-grade{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;}
.hsc-grade span{display:block;font-size:11.5px;color:var(--sub);letter-spacing:.08em;font-weight:800;font-family:-apple-system,"PingFang SC",sans-serif;}
.hsc-grade b{display:block;font-size:21px;color:var(--pri-ink);font-family:ui-monospace,monospace;margin-top:3px;}
.hsc-grade small{font-size:11px;color:var(--faint);font-family:-apple-system,"PingFang SC",sans-serif;}
.hsc-sizebar{display:flex;gap:6px;margin:12px 0 4px;}
.hsc-sizebar i{flex:1;text-align:center;border-radius:8px;padding:7px 0;font-size:13px;font-weight:900;background:var(--card2);border:1px solid var(--line);color:var(--faint);font-family:-apple-system,"PingFang SC",sans-serif;transition:all .2s;}
.hsc-sizebar i.on{background:var(--navy);border-color:var(--navy);color:#efe6d2;}
:root[data-theme="dark"] .hsc-sizebar i.on{color:#14110a;}
.hsc-tape{margin:14px 0 6px;}
.hsc-tape svg{width:100%;height:auto;display:block;}
.hsc-advice{border-radius:11px;padding:11px 14px;font-size:13.5px;border:1px solid;margin-bottom:9px;}
.hsc-advice.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);}
.hsc-advice.warnn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}
.hsc-advice.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);}
.hsc-advice b{color:inherit;}

/* ---------- 量法与表 ---------- */
.hsc-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
@media (max-width:920px){.hsc-duo{grid-template-columns:1fr;}}
.hsc-mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;}
.hsc-mcard h3{margin:0 0 10px;font-size:15.5px;font-weight:900;display:flex;gap:8px;align-items:center;}
.hsc-mcard h3 i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--brass-soft);color:var(--brass);display:inline-flex;align-items:center;justify-content:center;font-size:15px;}
.hsc-mcard li{font-size:13.5px;color:var(--sub);margin:7px 0;}
.hsc-mcard li b{color:var(--ink);}
.hsc-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.hsc-tbl th,.hsc-tbl td{border:1px solid var(--line);padding:6px 9px;text-align:center;}
.hsc-tbl th{background:var(--card2);font-weight:800;}
.hsc-tbl td b{color:var(--pri-ink);font-family:ui-monospace,monospace;}
.hsc-tbl tr{cursor:pointer;}
.hsc-tbl tr:hover td{background:var(--brass-soft);}

/* ---------- FAQ ---------- */
.hsc-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.hsc-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.hsc-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.hsc-faq p{margin:0;color:var(--sub);font-size:14px;}
.hsc-faq p b{color:var(--ink);}
.hsc-note{margin-top:12px;font-size:12.5px;color:var(--faint);}