/* 材料合成计算器 · 仅用 .sy- 前缀，避免与公共 / 其它工具样式冲突 */
.sy-wrap{
  max-width:1180px;margin:0 auto;padding:28px 22px 70px;
  font:14px/1.65 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink);
}
.sy-hero{
  background:linear-gradient(120deg,#eef4ff 0%,#f8faff 55%,#fff7e9 100%);
  border:1px solid #e4ecfb;border-radius:16px;padding:22px 26px;margin-bottom:20px;
}
.sy-hero h1{margin:0 0 8px;font-size:24px;font-weight:750;letter-spacing:.5px}
.sy-hero p{margin:0;color:var(--tb-sub);font-size:13.5px;max-width:820px}
.sy-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sy-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:600}
.sy-tag.blue{background:#e6efff;color:#2f6df6}
.sy-tag.gold{background:#fff1d8;color:#a97317}
.sy-tag.green{background:#e6f6ec;color:#1e8a4c}

/* ---------------- 材料切换 ---------------- */
.sy-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sy-tab{
  display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 15px;
  border:1px solid var(--tb-line);border-radius:10px;background:#fff;color:var(--tb-sub);
  font:13.5px/1 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;cursor:pointer;transition:.15s;
}
.sy-tab:hover{border-color:#a9c2f7;color:var(--tb-blue)}
.sy-tab.on{background:var(--tb-blue);border-color:var(--tb-blue);color:#fff;font-weight:650;
  box-shadow:0 4px 12px rgba(47,109,246,.22)}
.sy-tab .sy-ico-box{
  width:32px;height:32px;display:grid;place-items:center;flex:none;
  background:none;border:0;box-shadow:none;color:var(--tb-blue);font-size:15px;font-weight:700;
}
.sy-tab .sy-ico{width:32px;height:32px;display:block;object-fit:contain}
.sy-tab.on .sy-ico-box{background:none;box-shadow:none;border:0}
.sy-tab.on .sy-ico-box.is-text{color:#fff}
.sy-tab small{opacity:.75;font-size:11px}

/* ---------------- 输入区 ---------------- */
.sy-panel{
  background:#fff;border:1px solid var(--tb-line);border-radius:14px;
  box-shadow:0 3px 14px rgba(21,35,60,.05);padding:18px 20px;margin-bottom:18px;
}
.sy-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.sy-field{display:flex;flex-direction:column;gap:6px;min-width:190px;flex:1}
.sy-field label{font-size:12.5px;color:var(--tb-sub);font-weight:600}
.sy-field input{
  height:38px;padding:0 12px;border:1px solid #d8e0ec;border-radius:8px;
  font:14px/1 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink);
  background:#fbfcfe;outline:none;transition:.15s;width:100%;box-sizing:border-box;
}
.sy-field input:focus{border-color:var(--tb-blue);background:#fff;box-shadow:0 0 0 3px rgba(47,109,246,.12)}
.sy-btns{display:flex;gap:8px;flex:none}
.sy-hint{margin:12px 0 0;font-size:12px;color:var(--tb-sub)}
.sy-hint code{background:#f1f4f9;padding:1px 5px;border-radius:4px;font-size:11.5px}
.sy-err{margin:10px 0 0;color:#c0392b;font-size:12.5px;min-height:0}

/* ---------------- 概览 ---------------- */
.sy-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.sy-sum{
  background:#fff;border:1px solid var(--tb-line);border-radius:12px;padding:14px 16px;
}
.sy-sum span{display:block;font-size:12px;color:var(--tb-sub);margin-bottom:5px}
.sy-sum strong{display:block;font-size:20px;font-weight:750;color:var(--tb-ink);line-height:1.3}
.sy-sum em{font-style:normal;font-size:12px;color:var(--tb-sub);font-weight:400;margin-left:5px}

/* ---------------- 成本表 ---------------- */
.sy-table-box{
  background:#fff;border:1px solid var(--tb-line);border-radius:14px;overflow:hidden;
  box-shadow:0 3px 14px rgba(21,35,60,.05);margin-bottom:22px;
}
.sy-table-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--tb-line);flex-wrap:wrap;
}
.sy-table-head h2{margin:0;font-size:15px;font-weight:700}
.sy-table-head small{color:var(--tb-sub);font-size:12px}
.sy-scroll{overflow-x:auto}
.sy-table{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.sy-table th{
  background:#f7f9fc;color:var(--tb-sub);font-weight:650;font-size:12px;text-align:right;
  padding:11px 14px;border-bottom:1px solid var(--tb-line);white-space:nowrap;
}
.sy-table th:first-child,.sy-table td:first-child{text-align:left}
.sy-table th.sy-left,.sy-table td.sy-left{text-align:left}
.sy-table th.sy-center,.sy-table td.sy-center{text-align:center!important;min-width:220px}
.sy-table th.sy-center{padding-left:26px;padding-right:26px}
.sy-table td{
  padding:10px 14px;text-align:right;border-bottom:1px solid #f0f3f8;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sy-table tbody tr:nth-child(even){background:#fcfdff}
.sy-table tbody tr:hover{background:#f2f7ff}
.sy-table tr.sy-hl{background:#fffaf0}
.sy-table tr.sy-hl:hover{background:#fff4dc}
.sy-table tr.sy-hl td:first-child{box-shadow:inset 3px 0 0 #e0a22c}
.sy-lv{font-weight:700;color:var(--tb-ink)}
.sy-lv i{font-style:normal;font-size:10.5px;color:#a97317;background:#fff1d6;
  border-radius:4px;padding:1px 5px;margin-left:6px;font-weight:600}
.sy-money{font-weight:650;color:#1d2430}
.sy-rmb{color:#c0392b;font-weight:600}
.sy-cum{color:#657184}
.sy-mats{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:100%}
.sy-mat{
  display:inline-block;padding:2px 7px;border-radius:5px;font-size:11.5px;
  background:#eef3fc;color:#3f5f9e;white-space:nowrap;
}
.sy-mat.extra{background:#fff0d7;color:#9a6a12}
.sy-dim{color:#a9b2c0}
.sy-loading{padding:36px;text-align:center;color:var(--tb-sub)}

/* ---------------- 规则区 ---------------- */
.sy-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sy-card{
  background:#fff;border:1px solid var(--tb-line);border-radius:14px;padding:18px 20px;
  box-shadow:0 3px 14px rgba(21,35,60,.04);
}
.sy-card h3{margin:0 0 12px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.sy-card h3::before{content:'';width:3px;height:15px;border-radius:2px;background:var(--tb-blue)}
.sy-lead{margin:0 0 12px;font-size:13px;color:var(--tb-sub);background:#f7f9fd;
  border-radius:8px;padding:10px 12px}
.sy-kv{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:12px}
.sy-kv td{padding:7px 10px;border-bottom:1px solid #f0f3f8}
.sy-kv td:first-child{color:var(--tb-sub);width:45%}
.sy-kv td:last-child{font-weight:600;text-align:right}
.sy-kv tr:last-child td{border-bottom:none}
.sy-notes{margin:0;padding-left:18px;font-size:12.5px;color:var(--tb-sub)}
.sy-notes li{margin-bottom:6px}
.sy-badge-ok{display:inline-block;padding:2px 9px;border-radius:6px;
  background:#e7f6ed;color:#1e8a4c;font-size:11.5px;font-weight:600;margin-bottom:10px}
.sy-sources{margin-top:18px;padding:14px 18px;background:#f8fafd;border:1px solid #e9eef6;
  border-radius:12px;font-size:12px;color:var(--tb-sub)}
.sy-sources b{color:var(--tb-ink);display:block;margin-bottom:6px;font-size:12.5px}
.sy-sources a{color:var(--tb-blue);text-decoration:none;margin-right:16px;line-height:2}
.sy-sources a:hover{text-decoration:underline}

@media (max-width:900px){
  .sy-rules{grid-template-columns:1fr}
  .sy-summary{grid-template-columns:1fr 1fr}
  .sy-wrap{padding:20px 14px 50px}
  .sy-hero{padding:18px}
  .sy-hero h1{font-size:20px}
}
@media (max-width:560px){
  .sy-summary{grid-template-columns:1fr}
  .sy-field{min-width:100%}
  .sy-btns{width:100%}
  .sy-btns .tb-btn{flex:1}
  .sy-tab{padding:0 11px;height:36px;font-size:12.5px}
  .sy-tab small{display:none}
}