/* ================================================================
 * property-calculator.css —— 「物质物性计算」工具样式
 * 风格：新拟态（Neumorphism，柔和内外阴影 + 圆角卡片），
 *       与 huyian.cn 工具箱主站 / photo-calculator 保持同一套设计语言。
 * 主题：html[data-theme] = auto / light / dark 三态；纯 CSS，无外部依赖。
 * ================================================================ */

/* ============ 1. 主题变量：浅色（默认，也是 auto + 系统浅色） ============ */
:root{
  --bg:#e6e9ef;
  --card:#ebeff5;
  --text:#3a4150;
  --muted:#8b93a5;
  --accent:#6c7cff;
  --accent-2:#0fa89a;
  --accent-soft:rgba(108,124,255,.14);
  --neu-dark:rgba(163,177,198,.55);
  --neu-light:rgba(255,255,255,.9);
  --line:rgba(120,132,158,.20);
  --danger:#c0392b;
  --warn-bg:#fff6e0;
  --warn-line:#e0a33a;
  --ok:#2e9e5b;
  --t-ap:#2e9e5b;   --t-ap-bg:rgba(46,158,91,.15);
  --t-a:#5a6bf0;    --t-a-bg:rgba(108,124,255,.15);
  --t-am:#b8730f;   --t-am-bg:rgba(230,150,40,.17);
  --t-u:#7a5cc4;    --t-u-bg:rgba(150,120,220,.17);
  --r-sm:10px; --r-md:12px; --r-lg:16px;
  --neu-out:6px 6px 12px var(--neu-dark),-6px -6px 12px var(--neu-light);
  --neu-out-sm:4px 4px 9px var(--neu-dark),-4px -4px 9px var(--neu-light);
  --neu-in:inset 3px 3px 6px var(--neu-dark),inset -3px -3px 6px var(--neu-light);
}

/* ============ 2. 主题变量：深色（auto + 系统深色 时生效） ============ */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#262a33;
    --card:#2b303a;
    --text:#dfe4ee;
    --muted:#8f97a8;
    --accent:#8b9aff;
    --accent-2:#4ad6c8;
    --accent-soft:rgba(139,154,255,.16);
    --neu-dark:rgba(10,12,16,.6);
    --neu-light:rgba(255,255,255,.06);
    --line:rgba(255,255,255,.10);
    --danger:#ff7a6b;
    --warn-bg:rgba(255,190,90,.13);
    --warn-line:#c9922f;
    --ok:#5ad28a;
    --t-ap:#5ad28a;   --t-ap-bg:rgba(90,210,138,.16);
    --t-a:#a3adff;    --t-a-bg:rgba(139,154,255,.18);
    --t-am:#f0b060;   --t-am-bg:rgba(230,150,40,.18);
    --t-u:#b79cf0;    --t-u-bg:rgba(150,120,220,.20);
  }
}

/* ============ 3. 主题变量：手动深色 ============ */
html[data-theme="dark"]{
  --bg:#262a33;
  --card:#2b303a;
  --text:#dfe4ee;
  --muted:#8f97a8;
  --accent:#8b9aff;
  --accent-2:#4ad6c8;
  --accent-soft:rgba(139,154,255,.16);
  --neu-dark:rgba(10,12,16,.6);
  --neu-light:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --danger:#ff7a6b;
  --warn-bg:rgba(255,190,90,.13);
  --warn-line:#c9922f;
  --ok:#5ad28a;
  --t-ap:#5ad28a;   --t-ap-bg:rgba(90,210,138,.16);
  --t-a:#a3adff;    --t-a-bg:rgba(139,154,255,.18);
  --t-am:#f0b060;   --t-am-bg:rgba(230,150,40,.18);
  --t-u:#b79cf0;    --t-u-bg:rgba(150,120,220,.20);
}

/* ============ 4. 主题变量：手动浅色（系统深色时强制浅色） ============ */
html[data-theme="light"]{
  --bg:#e6e9ef;
  --card:#ebeff5;
  --text:#3a4150;
  --muted:#8b93a5;
  --accent:#6c7cff;
  --accent-2:#0fa89a;
  --accent-soft:rgba(108,124,255,.14);
  --neu-dark:rgba(163,177,198,.55);
  --neu-light:rgba(255,255,255,.9);
  --line:rgba(120,132,158,.20);
  --danger:#c0392b;
  --warn-bg:#fff6e0;
  --warn-line:#e0a33a;
  --ok:#2e9e5b;
  --t-ap:#2e9e5b;   --t-ap-bg:rgba(46,158,91,.15);
  --t-a:#5a6bf0;    --t-a-bg:rgba(108,124,255,.15);
  --t-am:#b8730f;   --t-am-bg:rgba(230,150,40,.17);
  --t-u:#7a5cc4;    --t-u-bg:rgba(150,120,220,.17);
}

/* ============ 5. 全局基础 ============ */
*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-tap-highlight-color:transparent}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.55;
  min-height:100vh;
  padding:26px 16px 56px;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* 关键：JS 大量用 el.hidden 控制显隐，[hidden] 必须压过组件的 display */
[hidden]{display:none !important}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* 表单控件统一继承字体、去掉浏览器默认外观 */
input,select,textarea,button{font-family:inherit;color:inherit}
input,select,textarea{font-size:14px}
button{font-size:13.5px;line-height:1.5}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.hit:focus-visible,
.linklike:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 页面主体容器：最大 1080px、居中，与 photo-calculator 同一尺度感 */
.wrap{max-width:1080px;width:100%;margin:0 auto}

/* ============ 6. 顶部标题区 ============ */
.head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.head > div:first-child{flex:1 1 auto;min-width:0}
.head h1{font-size:23px;font-weight:700;letter-spacing:.4px;line-height:1.3}
.head .sub{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.head-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}

.icon-btn{
  min-width:42px;min-height:38px;padding:8px 13px;
  border:none;border-radius:var(--r-md);cursor:pointer;
  background:var(--bg);color:var(--text);font-size:12.5px;font-weight:500;
  box-shadow:var(--neu-out-sm);
  transition:box-shadow .15s,transform .15s,color .15s;
}
.icon-btn:hover{transform:translateY(-1px);color:var(--accent)}
.icon-btn:active{transform:translateY(0);box-shadow:var(--neu-in)}

/* ============ 7. 顶部提示条（数据包版本） ============ */
.notice{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 14px;margin-bottom:18px;
  background:var(--accent-soft);
  border-left:4px solid var(--accent);
  border-radius:var(--r-sm);
  font-size:12.5px;color:var(--text);line-height:1.65;
}

/* ============ 8. 标签栏 ============ */
.tabs{
  display:flex;gap:8px;
  overflow-x:auto;white-space:nowrap;
  padding:4px 2px 10px;margin-bottom:14px;
  -webkit-overflow-scrolling:touch;
}
.tab-btn{
  flex:0 0 auto;padding:9px 17px;
  border:none;border-radius:var(--r-md);cursor:pointer;
  background:var(--bg);color:var(--muted);font-size:13px;
  box-shadow:var(--neu-out-sm);
  transition:box-shadow .15s,color .15s;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{
  color:var(--accent);font-weight:600;
  box-shadow:inset 3px 3px 6px var(--neu-dark),inset -3px -3px 6px var(--neu-light),inset 0 -2px 0 var(--accent);
}
.tab-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ============ 9. 面板与卡片 ============ */
.panel{display:none}
.panel.active{display:block}

.card{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--neu-out);
}
.card h2{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:4px;
  font-size:17px;font-weight:700;line-height:1.4;margin-bottom:14px;
}
.card h2 .tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.55;
  overflow-wrap:break-word;
}
.card h2 .tag::before{
  content:"";flex:none;width:3px;height:12px;border-radius:2px;
  background:var(--accent-2);
}
.card h2 .tag:empty{display:none}
.card h3{font-size:14.5px;font-weight:700;margin:18px 0 10px;line-height:1.4}

.hint{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 12px}

/* ============ 10. 布局：row / grid / field / inline ============ */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.row + .row{margin-top:12px}
.row > input[type="text"],
.row > input[type="number"],
.row > input[type="search"],
.row > select{flex:1 1 180px;min-width:0}
.row > .inline{flex:1 1 200px;min-width:150px}
.row > .btn,
.row > .icon-btn,
.row > .lbl{flex:0 0 auto}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}

.field{min-width:0}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field > input,
.field > select{width:100%}

.inline{display:flex;align-items:center;gap:8px;min-width:0}
.inline > input{flex:1 1 auto;min-width:0}
.inline > select{flex:0 0 auto;width:auto;min-width:84px;max-width:122px}
/* 单位下拉（温度 / 压力 / 比焓伴随的自适应小下拉） */
select.mini{flex:0 0 auto;width:auto;min-width:84px;max-width:122px}

.lbl{font-size:12px;color:var(--muted);white-space:nowrap}

/* ============ 11. 表单控件（新拟态内凹） ============ */
input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea{
  width:100%;
  padding:9px 12px;
  border:none;
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  box-shadow:inset 3px 3px 6px var(--neu-dark),inset -3px -3px 6px var(--neu-light);
  outline:none;
  transition:box-shadow .15s;
  min-width:0;
}
select{cursor:pointer}
textarea{min-height:76px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}

input:focus,
select:focus,
textarea:focus{
  box-shadow:inset 2px 2px 5px var(--neu-dark),inset -2px -2px 5px var(--neu-light),
             0 0 0 1px var(--accent),0 0 0 3px var(--accent-soft);
}

/* 与单位下拉并排的温度/压力数字输入：右对齐 + 等宽数字，便于纵向比对 */
.inline > input[type="number"]{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

input[type="checkbox"]{
  width:15px;height:15px;flex:none;
  accent-color:var(--accent);cursor:pointer;
}
input[type="file"]{display:none}

/* ============ 12. 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border:none;border-radius:var(--r-md);cursor:pointer;
  background:var(--bg);color:var(--text);
  font-size:13.5px;font-weight:600;white-space:nowrap;
  box-shadow:var(--neu-out-sm);
  transition:box-shadow .15s,transform .15s,color .15s,background .15s,filter .15s;
}
.btn:hover{transform:translateY(-1px);color:var(--accent)}
.btn:active{transform:translateY(0);box-shadow:var(--neu-in)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--neu-out-sm)}

.btn.primary{
  background:var(--accent);color:#fff;
  box-shadow:0 6px 16px rgba(90,107,240,.28);
}
.btn.primary:hover{color:#fff;filter:brightness(1.08)}
.btn.primary:active{filter:brightness(.97);box-shadow:0 3px 9px rgba(90,107,240,.28)}
.btn.primary:disabled{filter:none;box-shadow:var(--neu-out-sm)}

.btn.ghost{
  background:transparent;color:var(--accent);
  border:1px solid var(--line);box-shadow:none;
}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn.ghost:active{box-shadow:var(--neu-in)}

.btn.small{padding:6px 12px;font-size:12px;font-weight:500;border-radius:var(--r-sm)}

.btn.on{color:var(--accent);box-shadow:var(--neu-in)}

/* ============ 13. 胶囊（收藏 / 最近 / 预设） ============ */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.chips:empty,.quick:empty{display:none}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 13px;border:none;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--text);font-size:12.5px;line-height:1.6;
  box-shadow:2px 2px 5px var(--neu-dark),-2px -2px 5px var(--neu-light);
  transition:box-shadow .15s,transform .15s,color .15s,background .15s;
}
.chip:hover{transform:translateY(-1px);color:var(--accent)}
.chip:active{transform:translateY(0);box-shadow:inset 2px 2px 4px var(--neu-dark),inset -2px -2px 4px var(--neu-light)}
.chip.on{background:var(--accent);color:#fff;box-shadow:0 3px 9px rgba(90,107,240,.26)}
.chip.on:hover{color:#fff}
.chip.danger{
  background:transparent;color:var(--danger);
  border:1px dashed var(--line);box-shadow:none;
}
.chip.danger:hover{background:rgba(192,57,43,.10);border-style:solid;color:var(--danger)}

.chip-label{
  display:inline-flex;align-items:center;
  padding:0 2px;background:none;box-shadow:none;border:none;
  font-size:11.5px;color:var(--muted);
  cursor:default;user-select:none;
}

.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.quick .chip{font-size:11.5px;padding:4px 10px}

/* ============ 14. 搜索结果下拉面板 ============ */
.search-results{
  margin-top:10px;
  max-height:320px;overflow-y:auto;
  padding:5px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:0 10px 24px rgba(30,36,50,.16);
  -webkit-overflow-scrolling:touch;
}
.search-results:empty{display:none}

.hit{
  display:flex;flex-direction:column;gap:2px;
  width:100%;padding:8px 11px;
  border:none;border-radius:8px;
  background:transparent;color:var(--text);
  text-align:left;cursor:pointer;
  transition:background .12s;
}
.hit:hover{background:var(--accent-soft)}
.hit-name{font-size:13.5px;font-weight:600;line-height:1.4;overflow-wrap:break-word}
.hit-meta{font-size:11.5px;color:var(--muted);line-height:1.45;overflow-wrap:break-word}

.empty{padding:16px 10px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7}

/* ============ 15. 当前物质信息条 ============ */
.subinfo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top:14px;padding:12px 15px;
  border-radius:var(--r-md);
  background:var(--bg);
  box-shadow:inset 3px 3px 6px var(--neu-dark),inset -3px -3px 6px var(--neu-light);
}
.subinfo-main{flex:1 1 220px;min-width:0}
.subinfo-name{font-size:17px;font-weight:700;line-height:1.35;overflow-wrap:break-word}
.subinfo-meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;overflow-wrap:break-word}
.subinfo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}

/* ============ 16. 数据分级徽标 ============ */
.tier-badge{
  display:inline-block;
  padding:3px 11px;
  border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap;
  background:var(--t-u-bg);color:var(--t-u);
  border:1px solid transparent;
}
.tier-badge.t-Ap{background:var(--t-ap-bg);color:var(--t-ap);border-color:var(--t-ap-bg)}
.tier-badge.t-A{background:var(--t-a-bg);color:var(--t-a);border-color:var(--t-a-bg)}
.tier-badge.t-Am{background:var(--t-am-bg);color:var(--t-am);border-color:var(--t-am-bg)}
.tier-badge.t-U{background:var(--t-u-bg);color:var(--t-u);border-color:var(--t-u-bg)}

/* ============ 17. 数据来源说明块 ============ */
.src-note{
  margin-top:12px;padding:10px 13px;
  border-radius:var(--r-sm);
  background:var(--accent-soft);
  color:var(--muted);
  font-size:12px;line-height:1.7;
  overflow-wrap:break-word;
}
.src-note > div + div{margin-top:3px}
.src-note:empty{display:none}

/* ============ 18. 分段控件 ============ */
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.seg button{
  padding:7px 15px;border:none;border-radius:var(--r-sm);cursor:pointer;
  background:var(--bg);color:var(--muted);font-size:12.5px;
  box-shadow:3px 3px 6px var(--neu-dark),-3px -3px 6px var(--neu-light);
  transition:box-shadow .15s,color .15s;
}
.seg button:hover{color:var(--text)}
.seg button.on{color:var(--accent);font-weight:600;box-shadow:var(--neu-in)}

/* ============ 19. 警示框 ============ */
.warn-box{
  margin-top:12px;padding:10px 13px;
  background:var(--warn-bg);
  border-left:4px solid var(--warn-line);
  border-radius:8px;
  color:var(--text);
  font-size:12.5px;line-height:1.7;
  overflow-wrap:break-word;
}

/* ============ 20. 两栏布局 ============ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col > div{min-width:0}
.col-title{
  font-size:12.5px;font-weight:700;color:var(--muted);
  margin-bottom:8px;letter-spacing:.2px;
}

/* ============ 21. 结果表 ============ */
.table-wrap{
  overflow-x:auto;
  margin-top:12px;
  -webkit-overflow-scrolling:touch;
}
.table-wrap > .res-table{min-width:520px}

.res-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.res-table th{
  font-size:11.5px;font-weight:500;color:var(--muted);
  text-align:left;
  padding:6px 9px;
  border-bottom:1px solid var(--line);
  white-space:normal;
}
.res-table td{
  padding:7px 9px;
  border-top:1px solid var(--line);
  vertical-align:top;
  overflow-wrap:break-word;
}
.res-table thead + tbody tr:first-child td{border-top:none}

.res-table th.num,
.res-table td.num{text-align:right;font-variant-numeric:tabular-nums}

.res-table .row-miss td,
.res-table tr.row-miss td{color:var(--muted);opacity:.8}

.res-table tr.row-note td{
  padding:5px 9px;
  border-top:none;
  color:var(--muted);
  font-style:italic;
  font-size:12px;
  line-height:1.65;
}

/* 与云端精确值偏差过大的行（>5%）：橙色底提示以云端值为准 */
.res-table tr.row-warn td{
  background:var(--warn-bg);
  color:var(--text);
}
.res-table tr.row-warn td:nth-child(4){font-weight:700;color:var(--danger)}

.alt-table{font-size:12.5px}
.alt-table th,
.alt-table td{padding:5px 8px}

.two-col .res-table{font-size:13px}

/* ============ 22. 复选行 ============ */
.check{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;
  font-size:12.5px;color:var(--muted);
  cursor:pointer;line-height:1.6;
}

/* ============ 23. 大号结果 ============ */
.result-big{
  margin:14px 0;
  padding:16px 18px;
  border-radius:var(--r-md);
  background:var(--bg);
  box-shadow:inset 4px 4px 8px var(--neu-dark),inset -4px -4px 8px var(--neu-light);
  color:var(--accent);
  font-size:22px;font-weight:700;line-height:1.4;
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;word-break:break-word;
}

/* ============ 24. 类链接按钮 / 英文名 ============ */
.linklike{
  display:inline;
  padding:0;border:none;background:none;
  color:var(--accent);font:inherit;font-size:13.5px;
  text-align:left;cursor:pointer;
}
.linklike:hover{text-decoration:underline}

.mat-en{font-size:11.5px;color:var(--muted);overflow-wrap:break-word}

/* ============ 25. 页脚 ============ */
.foot{
  margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.8;
}
.foot > div + div{margin-top:4px}
.foot b{color:var(--text);font-weight:600}
.foot a{color:var(--accent)}

/* ============ 26. 响应式：平板 / 小笔电（≤820px） ============ */
@media (max-width:820px){
  body{padding:20px 14px 48px}
  .wrap{max-width:100%}

  .head{gap:10px}
  .head h1{font-size:20px}
  .head .sub{font-size:12px}

  .icon-btn{padding:7px 11px;min-height:36px}
  .icon-btn:active{box-shadow:var(--neu-in)}

  .card{padding:15px;border-radius:14px;margin-bottom:14px}
  .card h2{font-size:16px;margin-bottom:12px}

  .row{gap:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}

  .two-col{grid-template-columns:1fr;gap:14px}

  .res-table{font-size:13px}
  .res-table th,
  .res-table td{padding:6px 7px}
  .table-wrap > .res-table{min-width:460px}
}

/* ============ 27. 响应式：手机（≤560px，含 375px） ============ */
@media (max-width:560px){
  body{padding:16px 12px 44px}

  .head{flex-direction:column;align-items:stretch}
  .head h1{font-size:19px}
  .head-btns{justify-content:flex-start;gap:6px}
  .icon-btn{flex:1 1 auto;min-width:0;padding:8px 10px;font-size:12px}

  .notice{padding:9px 12px;font-size:11.5px}

  .tabs{gap:6px;padding-bottom:8px}
  .tab-btn{padding:8px 13px;font-size:12.5px}

  .card{padding:13px;border-radius:var(--r-md);margin-bottom:12px}
  .card h2{font-size:15.5px}
  .card h2 .tag{flex-basis:100%;font-size:10.5px}
  .card h3{font-size:13.5px}

  /* 窄屏一律单列 */
  .row{flex-direction:column;align-items:stretch;gap:9px}
  .row > input[type="text"],
  .row > input[type="number"],
  .row > input[type="search"],
  .row > select{flex:0 0 auto;width:100%}
  .row > .inline{flex:0 0 auto;width:100%;min-width:0}
  .row > .btn,
  .row > .icon-btn{width:100%}
  .row > .lbl{width:100%}

  .grid{grid-template-columns:1fr;gap:10px}
  .two-col{grid-template-columns:1fr;gap:12px}

  .btn{padding:9px 14px;font-size:13px}
  .chip{font-size:12px;padding:5px 11px}
  .quick .chip{font-size:11px;padding:4px 9px}

  .subinfo{flex-direction:column;align-items:stretch;padding:11px 13px}
  .subinfo-name{font-size:16px}
  .subinfo-actions{justify-content:flex-start}

  .search-results{max-height:260px}

  .result-big{font-size:18px;padding:13px 14px}

  .res-table{font-size:12.5px}
  .res-table th{font-size:11px}
  .res-table th,
  .res-table td{padding:6px 6px}
  .alt-table{font-size:12px}
  .table-wrap > .res-table{min-width:420px}

  .foot{font-size:11.5px}
}

/* ============ 28. 5D 换热器定性温度物性包 ============ */
.hx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.hx-side{
  min-width:0;padding:13px;
  border-radius:var(--r-md);background:var(--bg);
  box-shadow:inset 3px 3px 6px var(--neu-dark),inset -3px -3px 6px var(--neu-light);
}
.hx-side-title{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px;letter-spacing:.2px}
.hx-side .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.hx-side .search-results{max-height:250px;margin-top:8px}

/* 已选物质回显：未选时灰、选中后正常字重 */
.hx-picked{
  margin-top:9px;padding:7px 11px;
  border-radius:var(--r-sm);
  background:var(--card);
  font-size:12.5px;color:var(--muted);line-height:1.6;
  overflow-wrap:break-word;
}
.hx-picked.on{color:var(--text);font-weight:600}

/* 跨相变：定性温度法被拦住时的醒目提示（用危险色描边，肉眼一眼能看到） */
.warn-box.critical{
  border-left-color:var(--danger);
  box-shadow:inset 0 0 0 1px var(--danger);
  font-weight:600;
}

/* 结果行里的来源 / 方法与项目名 */
.row-name{font-size:13.5px;line-height:1.45}
.row-src{font-size:11px;color:var(--muted);line-height:1.5;overflow-wrap:break-word}

/* ============ 29. 6C 基团贡献估算 ============ */
.table-wrap > .grp-table{min-width:660px}
.grp-table th.grp-n,
.grp-table td.grp-n{width:74px}
.grp-table td{vertical-align:middle}

/* 41 行基团表的数量输入框：窄、居中、等宽数字，纵向扫一眼就能对齐 */
.grp-qty{
  width:100%;padding:6px 7px;
  text-align:center;font-size:13px;
  font-variant-numeric:tabular-nums;
}

.grp-name{font-weight:600;font-size:13.5px}
.grp-id{margin-left:6px;font-size:11px;color:var(--muted)}
/* 基团单元格里的就地缺增量标记（窄屏不必横向滚动也能看到） */
.grp-flag{
  display:inline-block;margin-left:6px;padding:1px 6px;
  border-radius:999px;
  background:var(--warn-bg);border:1px solid var(--warn-line);
  font-size:10.5px;line-height:1.6;color:var(--text);white-space:nowrap;
}
.grp-smarts,
.grp-atoms{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:11.5px;color:var(--muted);
  overflow-wrap:break-word;
}

/* 上游缺增量：硬提示（会影响本页估算项）与软提示（只缺粘度增量）两种 */
.grp-miss{
  display:inline-block;padding:2px 8px;
  border-radius:999px;
  background:var(--warn-bg);border:1px solid var(--warn-line);
  font-size:11px;line-height:1.6;color:var(--text);
}
.grp-miss.soft{background:transparent;border-style:dashed;border-color:var(--line);color:var(--muted)}
.grp-ok{font-size:11px;color:var(--muted)}

.est-corr{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.est-tag{
  display:inline-block;margin-left:6px;padding:1px 7px;
  border-radius:999px;
  background:var(--t-u-bg);color:var(--t-u);
  font-size:10.5px;line-height:1.6;vertical-align:middle;
}
.est-src{font-size:11.5px;color:var(--muted);line-height:1.55}
.est-miss{font-size:11.5px;color:var(--danger);line-height:1.55}

/* 估算物质写入字段预览表 */
.est-write{font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:break-word}

/* ============ 30. 响应式：新模块（换热器 / 基团估算） ============ */
@media (max-width:820px){
  .hx-grid{grid-template-columns:1fr;gap:12px}
  .table-wrap > .grp-table{min-width:600px}
}

@media (max-width:560px){
  .hx-side{padding:11px}
  .hx-side .grid{grid-template-columns:1fr}
  .hx-picked{font-size:12px}

  .table-wrap > .grp-table{min-width:540px}
  .grp-table th,
  .grp-table td{padding:6px 6px}
  .grp-name{font-size:12.5px}
  .grp-table th.grp-n,
  .grp-table td.grp-n{width:64px}
  .grp-qty{padding:6px 5px;font-size:12.5px}
}

/* ============ 31. 打印（可选，尽量省墨、不截断卡片） ============ */
@media print{
  body{background:#fff;color:#000;padding:0}
  .head-btns,
  .tabs,
  .notice,
  .chips,
  .quick,
  .search-results{display:none !important}
  .card{
    box-shadow:none;
    border:1px solid #ccc;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .btn,.icon-btn,.chip,.result-big,.subinfo{box-shadow:none;border:1px solid #ccc}
}