/* ZEC 报价系统 · 视觉样式（沿用官网废水计算器语言） */
:root {
  --zec-blue: #1e6fff;
  --zec-blue2: #00b4d8;
  --zec-grad: linear-gradient(135deg, #1e6fff, #00b4d8);
  --ink: #1a2333;
  --ink2: #5a6b85;
  --bg: #f2f5fa;
  --card: #ffffff;
  --line: #e4eaf3;
  --ok: #0da678;
  --warn: #e8830c;
  --bad: #d64545;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 60px; }

/* 顶栏 */
.zec-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border-radius: var(--radius); padding: 12px 18px;
  box-shadow: 0 2px 12px rgba(30, 80, 180, .06); margin-bottom: 14px;
}
.zec-head .logo { height: 34px; width: auto; display: block; }
.zec-head .tel { color: var(--ink2); font-size: 13px; text-align: right; text-decoration: none; }
.zec-head .tel b { color: var(--zec-blue); font-size: 15px; display: block; }

.card {
  background: var(--card); border-radius: var(--radius); padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(30, 80, 180, .06); margin-bottom: 14px;
}
.card h2 { font-size: 18px; margin-bottom: 4px; }
.card h3 { font-size: 15.5px; margin: 18px 0 10px; padding-left: 10px; border-left: 4px solid var(--zec-blue); }
.sub { color: var(--ink2); font-size: 13px; margin-bottom: 14px; }

/* 表单 */
label.f { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
label.f .req { color: var(--bad); margin-left: 2px; }
label.f small { font-weight: 400; color: var(--ink2); }
input[type=text], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fbfcfe; outline: none; transition: border .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--zec-blue); background: #fff; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }

.btn {
  display: block; width: 100%; border: none; cursor: pointer; border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 700; color: #fff; background: var(--zec-grad);
  margin-top: 18px; letter-spacing: 1px; transition: opacity .15s, transform .1s;
}
.btn:hover { opacity: .92; } .btn:active { transform: scale(.99); }
.btn.ghost { background: #eef3fc; color: var(--zec-blue); }
.btn.sm { width: auto; display: inline-block; padding: 8px 18px; font-size: 14px; margin-top: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 选项卡组 */
.optgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer;
  font-size: 14px; background: #fbfcfe; user-select: none; transition: all .15s;
}
.opt:hover { border-color: var(--zec-blue2); }
.opt.on { border-color: var(--zec-blue); background: #eaf2ff; color: var(--zec-blue); font-weight: 600; }
.opt.off { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.opt .tag { font-size: 11px; color: var(--warn); display: block; }

/* 槽体编辑器 */
.tank-item { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fbfcfe; }
.tank-item .t-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tank-item .t-title { font-weight: 700; font-size: 14px; }
.tank-item .t-del { color: var(--bad); font-size: 13px; cursor: pointer; border: none; background: none; }
.checks { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--ink2); }
.checks label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* 结果区 */
.result { display: none; }
.result.show { display: block; }
.price-hero {
  background: linear-gradient(135deg, #eaf2ff, #e6f9fd); border-radius: 12px;
  padding: 18px; text-align: center; margin: 16px 0;
}
.price-hero .num { font-size: 32px; font-weight: 800; color: var(--zec-blue); }
.price-hero .lbl { color: var(--ink2); font-size: 13px; }
table.bill { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
table.bill th, table.bill td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.bill th { color: var(--ink2); font-weight: 600; background: #f7f9fd; }
table.bill td.r, table.bill th.r { text-align: right; white-space: nowrap; }
table.bill tr.total td { font-weight: 800; color: var(--zec-blue); border-top: 2px solid var(--zec-blue); font-size: 15px; }
.note-box { background: #fff8ee; border: 1px solid #ffe3b3; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #8a5a00; margin: 12px 0; }
.note-box.blue { background: #eef5ff; border-color: #c4dcff; color: #20508f; }
.note-box.gray { background: #f6f7f9; border-color: var(--line); color: var(--ink2); }

/* 步骤条 / 页签 */
.tabs { display: flex; gap: 6px; background: #eef1f7; border-radius: 12px; padding: 5px; margin-bottom: 16px; }
.tabs .tab { flex: 1; text-align: center; padding: 10px 4px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--ink2); font-weight: 600; }
.tabs .tab.on { background: #fff; color: var(--zec-blue); box-shadow: 0 1px 6px rgba(30, 80, 180, .12); }

.foot { text-align: center; color: var(--ink2); font-size: 12.5px; margin-top: 22px; line-height: 2; }
.foot a { color: var(--zec-blue); text-decoration: none; }

/* 验证码 */
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-q {
  background: var(--zec-grad); color: #fff; font-weight: 800; border-radius: 10px;
  padding: 11px 16px; font-size: 16px; white-space: nowrap; cursor: pointer; user-select: none;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* 徽标 */
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: #eaf2ff; color: var(--zec-blue); margin-left: 6px; }
.badge.warn { background: #fff3e0; color: var(--warn); }

/* ============ 打印（报价单 PDF） ============ */
#printArea { display: none; }
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { display: block !important; position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}
#printArea {
  font-size: 12px; color: #222; background: #fff; padding: 0;
}
#printArea .p-page { position: relative; padding: 18mm 14mm; min-height: 270mm; }
#printArea .p-watermark {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; overflow: hidden;
}
#printArea .p-watermark span {
  transform: rotate(-28deg); font-size: 34px; color: rgba(30, 111, 255, .055);
  font-weight: 800; white-space: nowrap; padding: 60px 30px; letter-spacing: 6px;
}
#printArea .p-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--zec-blue); padding-bottom: 10px; position: relative; z-index: 1; }
#printArea .p-head img { height: 46px; }
#printArea .p-head .p-title { text-align: right; }
#printArea .p-head .p-title h1 { font-size: 20px; color: var(--zec-blue); letter-spacing: 4px; }
#printArea .p-head .p-title div { color: #666; font-size: 11px; }
#printArea h4 { font-size: 13px; background: #eef4ff; border-left: 4px solid var(--zec-blue); padding: 5px 10px; margin: 14px 0 6px; position: relative; z-index: 1; }
#printArea table { width: 100%; border-collapse: collapse; position: relative; z-index: 1; }
#printArea th, #printArea td { border: 1px solid #cdd7e5; padding: 5px 7px; font-size: 11.5px; }
#printArea th { background: #f0f5fd; }
#printArea .r { text-align: right; }
#printArea .p-total { font-size: 15px; font-weight: 800; color: var(--zec-blue); }
#printArea .p-foot { margin-top: 16px; border-top: 1px dashed #aab; padding-top: 8px; font-size: 10.5px; color: #667; position: relative; z-index: 1; line-height: 1.9; }
#printArea .p-sign { display: flex; justify-content: space-between; margin-top: 22px; font-size: 12px; position: relative; z-index: 1; }