/* =========================================================
   HENDAX 官网 · 实验台 lab.css（v6）
   与首页 v5 同一套设计语言：深色画布 #060913 + sky/indigo
   仅依赖 home.css（导航/页脚/按钮直接复用）
   ========================================================= */

/* 双语字段：本页与首页一致，只展示中文 */
[data-en]{display:none!important}

/* ---------- 页头 ---------- */
.labhead{
  position:relative;overflow:hidden;
  padding:150px 0 56px;
}
@media(min-width:768px){.labhead{padding:190px 0 64px}}
.labhead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 22% 0%,rgba(56,189,248,.16) 0%,transparent 58%);
}
.labhead__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(148,163,184,.06) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,rgba(0,0,0,.3) 52%,transparent 82%);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000,rgba(0,0,0,.3) 52%,transparent 82%);
}
.labhead__inner{position:relative;z-index:1}
.labhead h1{
  margin:0 0 20px;font-size:clamp(30px,5.2vw,54px);font-weight:800;
  letter-spacing:-.02em;line-height:1.2;color:#fff;
}
.labhead h1 .grad{
  background:linear-gradient(90deg,#38bdf8,#a5b4fc,#3b82f6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.labhead__lead{max-width:680px;font-size:15px;line-height:1.85;color:#94a3b8}
@media(min-width:768px){.labhead__lead{font-size:16px}}
.labhead__lead strong{color:#e2e8f0;font-weight:600}
.labhead__meta{
  margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;
}
.labhead__meta span{
  padding:5px 11px;border-radius:999px;border:1px solid #1e293b;background:rgba(15,23,42,.5);
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#64748b;
}

/* ---------- 计算器 ---------- */
.labsec{padding:44px 0 96px}
.calcs{display:flex;flex-direction:column;gap:28px}

.calc{
  background:#0c1222;border:1px solid #1e293b;border-radius:18px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.calc:hover{border-color:rgba(56,189,248,.35);box-shadow:0 0 40px -14px rgba(56,189,248,.25)}

.calc__head{
  display:flex;align-items:flex-start;gap:16px;
  padding:24px 28px;border-bottom:1px solid #1e293b;
  background:linear-gradient(180deg,rgba(2,6,23,.7),rgba(12,18,34,0));
}
@media(min-width:768px){.calc__head{padding:28px 32px}}
.calc__no{
  flex:0 0 auto;margin-top:3px;padding:3px 8px;border-radius:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;
  color:#38bdf8;border:1px solid rgba(56,189,248,.3);background:rgba(56,189,248,.08);
}
.calc__titles{flex:1 1 auto;min-width:0}
.calc__title{font-size:19px;font-weight:700;color:#fff;line-height:1.35}
@media(min-width:768px){.calc__title{font-size:21px}}
.calc__sub{margin-top:6px;font-size:12.5px;line-height:1.75;color:#94a3b8;max-width:64ch}

.calc__body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}

/* 输入侧 */
.calc__in{
  padding:24px 28px;border-right:1px solid #1e293b;
  display:grid;gap:16px 18px;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
}
.calc__in--spread{align-content:center}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--wide{grid-column:span 2}
.field > label{
  display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:#94a3b8;
}
.field > label em{
  font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#64748b;
}
.field__in{
  display:flex;align-items:center;border:1px solid #1e293b;border-radius:10px;background:#0a1020;
  transition:border-color .2s,box-shadow .2s;
}
.field__in:focus-within{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 3px rgba(56,189,248,.08)}
.field__in input{
  flex:1 1 auto;min-width:0;width:100%;border:0;outline:none;background:transparent;
  padding:10px 10px;font-family:ui-monospace,Menlo,monospace;font-size:13.5px;
  color:#e2e8f0;font-variant-numeric:tabular-nums;
}
.field__in input::-webkit-outer-spin-button,
.field__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field__in input[type=number]{-moz-appearance:textfield}
.field__unit{
  flex:0 0 auto;padding-right:10px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:#64748b;
}

.calc__hint{
  grid-column:span 2;padding-left:12px;border-left:2px solid #334155;
  font-size:12px;line-height:1.8;color:#64748b;
}
.formula{
  margin-top:2px;padding:10px 12px;border:1px solid #1e293b;border-radius:8px;background:#0a1020;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.95;color:#64748b;
  white-space:normal;overflow-wrap:break-word;
}

/* 输出侧 */
.calc__out{
  padding:24px 28px;background:rgba(2,6,23,.5);
  display:flex;flex-direction:column;gap:16px;
}
.outgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:#1e293b;border:1px solid #1e293b;border-radius:12px;overflow:hidden;
}
.out{background:#0b1120;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.out__k{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font-size:12px;color:#94a3b8;line-height:1.4;
}
.out__k em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#64748b}
.out__v{
  font-family:ui-monospace,Menlo,monospace;font-size:clamp(18px,1.9vw,23px);font-weight:500;
  letter-spacing:-.01em;color:#e2e8f0;line-height:1.15;word-break:break-all;
  font-variant-numeric:tabular-nums;
}
.out__v small{font-size:.56em;font-weight:400;color:#64748b;margin-left:3px;letter-spacing:0}
.out__v--txt{font-size:clamp(14px,1.45vw,17px);font-weight:600;letter-spacing:0}
.out__v--txt.is-warn{color:#f87171}

/* 关键结果：天蓝→靛蓝浅染，不用纯白块，保持深色一体 */
.out--key{background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(129,140,248,.16))}
.out--key .out__k{color:#7dd3fc}
.out--key .out__v{color:#fff}
.out--key .out__v small{color:rgba(125,211,252,.75)}

/* 判读条 */
.verdict{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.07);
  font-size:12.5px;line-height:1.75;color:#cbd5e1;
}
.verdict__bar{flex:0 0 auto;width:2px;align-self:stretch;border-radius:2px;background:#38bdf8;margin-top:2px}
.verdict strong{color:#fff;font-weight:600}
.verdict.is-warn{border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.08);color:#fecaca}
.verdict.is-warn .verdict__bar{background:#f87171}

/* 边界说明 */
.labnote{
  margin-top:36px;padding:22px 24px;border:1px dashed #334155;border-radius:14px;
  background:rgba(15,23,42,.4);
}
.labnote p{font-size:12.5px;line-height:1.9;color:#94a3b8}
.labnote p + p{margin-top:10px}
.labnote b{color:#e2e8f0;font-weight:600}

/* 页尾 CTA */
.labcta{
  padding:72px 0 88px;border-top:1px solid #1e293b;background:rgba(2,6,23,.6);
}
.labcta__inner{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
@media(min-width:768px){.labcta__inner{flex-direction:row;align-items:center;justify-content:space-between}}
.labcta h2{font-size:clamp(20px,2.6vw,28px);font-weight:700;color:#fff;line-height:1.4}
.labcta p{margin-top:12px;font-size:13px;line-height:1.8;color:#94a3b8;max-width:560px}
.labcta__mail{
  display:inline-block;margin-top:18px;font-family:ui-monospace,Menlo,monospace;
  font-size:14px;font-weight:600;color:#38bdf8;
}
.labcta__mail:hover{text-decoration:underline}

/* ---------- 响应式 ---------- */
@media(max-width:960px){
  .calc__body{grid-template-columns:1fr}
  .calc__in{border-right:0;border-bottom:1px solid #1e293b}
}
@media(max-width:560px){
  .calc__in{grid-template-columns:1fr;padding:20px}
  .calc__out{padding:20px}
  .calc__head{padding:20px;gap:12px}
  .field--wide{grid-column:span 1}
  .calc__hint{grid-column:span 1}
  .outgrid{grid-template-columns:1fr}
  .labhead{padding:130px 0 40px}
}