/* ===== 日照与君共行 · 在线工具专属样式（费率/方案/政策） ===== */
/* 复用全站变量 --brand/--teal/--line/--ink/--muted/--radius/--shadow */

/* 工具页面通用区块 */
.tool-section{ padding:36px 0 }
.tool-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); margin-bottom:22px }
.tool-card h3{ margin:0 0 4px; font-size:18px; color:var(--ink) }
.tool-card .tc-sub{ color:var(--muted); font-size:14px; margin:0 0 18px }
.tool-row{ display:flex; flex-wrap:wrap; gap:16px }
.tool-field{ flex:1; min-width:200px; margin-bottom:14px }
.tool-label{ display:block; font-weight:600; margin-bottom:6px; font-size:14px; color:var(--ink) }
.tool-input,.tool-select{ width:100%; padding:11px 13px; border:1.5px solid var(--line);
  border-radius:10px; font:inherit; font-size:15px; background:#fff; color:var(--ink) }
.tool-input:focus,.tool-select:focus{ outline:none; border-color:var(--brand) }
.tool-hint{ color:var(--muted); font-size:12px; margin-top:6px; line-height:1.5 }
.tool-btn{ display:inline-block; background:var(--brand); color:#fff; font-weight:700;
  padding:13px 26px; border-radius:10px; border:none; cursor:pointer; font-size:15px; transition:.2s }
.tool-btn:hover{ background:var(--brand-dark); transform:translateY(-1px) }
.tool-btn-ghost{ background:#fff; color:var(--brand); border:1.5px solid var(--brand) }
.tool-btn-ghost:hover{ background:rgba(11,95,255,.06) }
.tool-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:6px }

/* 方案多选网格 */
.phead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.select-all{ color:var(--brand); font-weight:600; font-size:14px; cursor:pointer }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.product-item{ border:1.5px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center;
  cursor:pointer; font-size:14px; position:relative; transition:.15s; background:#fff; color:var(--ink) }
.product-item:hover{ border-color:#cfe0ff }
.product-item.on{ border-color:var(--brand); background:rgba(11,95,255,.07); font-weight:600; color:var(--brand-dark) }
.product-item .pi-check{ position:absolute; top:6px; right:8px; color:var(--brand); font-weight:800 }

/* 结果表 */
.calc-result-head{ margin:18px 0 8px; font-weight:700; color:var(--ink); font-size:15px }
.calc-table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; background:#fff;
  border-radius:10px; overflow:hidden; box-shadow:var(--shadow) }
.calc-table th,.calc-table td{ border:1px solid var(--line); padding:11px 12px; text-align:left; color:#33425a; vertical-align:middle }
.calc-table thead th{ background:#f0f5ff; color:var(--ink); font-weight:700 }
.calc-table tr.cheapest td{ background:rgba(0,184,169,.10) }
.calc-table .best-tag{ display:inline-block; background:var(--teal); color:#fff; font-size:11px;
  padding:1px 8px; border-radius:999px; margin-left:6px; vertical-align:middle }

/* 到账结果 */
.net-result{ margin-top:16px; background:#f6f8fb; border:1px solid var(--line); border-radius:10px; padding:16px; display:none }
.net-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:15px; color:var(--ink) }
.net-row .v{ font-weight:600 }
.net-row.final{ border-top:1px dashed var(--line); margin-top:6px; padding-top:12px; font-weight:800; font-size:18px }
.net-row .v.fee{ color:#e0483b }
.net-row .v.final{ color:var(--brand) }

/* 方案推荐：选项网格 */
.opt-grid{ display:grid; gap:10px; margin-bottom:6px }
.opt-grid.cols2{ grid-template-columns:repeat(2,1fr) }
.opt-grid.cols3{ grid-template-columns:repeat(3,1fr) }
.opt{ border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer;
  transition:.15s; background:#fff; position:relative; color:var(--ink) }
.opt:hover{ border-color:#cfe0ff }
.opt.on{ border-color:var(--brand); background:rgba(11,95,255,.07) }
.opt .o-txt{ font-weight:600; font-size:15px; color:var(--ink) }
.opt .o-sub{ display:block; color:var(--muted); font-size:12px; margin-top:2px }
.opt .o-check{ position:absolute; top:8px; right:10px; color:var(--brand); font-weight:800; font-size:16px }
.sublabel{ font-weight:600; margin:14px 0 8px; font-size:14px; color:var(--ink) }
.gstep{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:18px }
.gstep .gh{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; margin-bottom:6px; color:var(--ink) }
.gstep .gn{ flex:0 0 30px; height:30px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px }

/* 方案推荐：结果卡 */
.plan-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:18px }
.plan-head{ padding:22px; color:#fff }
.plan-head .lv{ font-size:13px; opacity:.9 }
.plan-head .nm{ font-size:24px; font-weight:800; margin:2px 0 }
.plan-head .tg{ font-size:14px; opacity:.92 }
.plan-sec{ padding:16px 22px; border-top:1px solid var(--line) }
.plan-sec h4{ margin:0 0 10px; font-size:15px; color:var(--ink) }
.plan-sec h4.base{ color:var(--teal) }
.plan-sec h4.adv{ color:var(--brand) }
.tags{ display:flex; flex-wrap:wrap; gap:8px }
.tag{ background:#f0f5ff; color:var(--brand-dark); border:1px solid #d6e4ff; border-radius:8px; padding:5px 10px; font-size:13px }
.tag.hw{ background:#fff7ed; color:#b45309; border-color:#fed7aa }
.tag.pay{ background:rgba(11,95,255,.08); color:var(--brand-dark); border-color:#cfe0ff }
.price{ font-size:16px; font-weight:700; color:var(--ink) }
.insight{ white-space:pre-line; background:#f6f8fb; border-left:4px solid var(--teal); border-radius:8px;
  padding:12px 14px; font-size:14px; color:#33425a; line-height:1.8 }
.why{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow) }
.why h4{ margin:0 0 12px; color:var(--ink) }
.why-li{ padding:8px 0; border-bottom:1px dashed var(--line); font-size:15px; color:#33425a; line-height:1.7 }
.why-li:last-child{ border-bottom:none }
.why-li .hl{ color:var(--brand); font-weight:700 }

/* 政策查询 & POS查询 Tab */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px }
.tab{ border:1.5px solid var(--line); border-radius:999px; padding:10px 22px; font-size:15px; cursor:pointer;
  background:#fff; color:var(--ink); transition:.18s; font-weight:500 }
.tab:hover{ border-color:#cfe0ff; background:#f8faff }
.tab.on{ border-color:var(--brand); background:var(--brand); color:#fff; font-weight:700 }
.policy-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px;
  box-shadow:var(--shadow); cursor:pointer; transition:.2s; display:flex; flex-direction:column }
.pcard:hover{ transform:translateY(-3px); border-color:#cfe0ff }
.pcard h4{ margin:0 0 6px; font-size:16px; color:var(--ink) }
.pcard .p-cat{ display:inline-block; font-size:12px; color:var(--teal); font-weight:600; margin-bottom:4px }
.pcard .p-sum{ font-size:13px; color:var(--muted); margin:0 0 10px; flex:1; line-height:1.6 }
.pcard .p-tags{ display:flex; flex-wrap:wrap; gap:6px }
.pcard .p-tag{ background:#f0f5ff; color:var(--brand-dark); border:1px solid #d6e4ff; border-radius:999px; padding:2px 9px; font-size:12px }
.empty{ text-align:center; color:var(--muted); padding:30px; background:#fff; border:1px dashed var(--line); border-radius:12px }
.detail-mask{ position:fixed; inset:0; background:rgba(15,27,45,.5); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:200 }
.detail-box{ background:#fff; border-radius:14px; max-width:700px; width:100%; max-height:86vh;
  overflow:auto; padding:26px 26px 30px; position:relative }
.detail-box .close{ position:absolute; top:12px; right:16px; font-size:26px; color:var(--muted);
  cursor:pointer; line-height:1; background:none; border:none }
.detail-box h3{ margin:0 0 8px; font-size:21px; color:var(--ink); padding-right:30px }
.detail-box .d-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px; font-size:13px; color:var(--muted) }
.detail-box .d-meta b{ color:var(--ink) }
.detail-box .d-content{ white-space:pre-line; font-size:15px; color:#33425a; line-height:1.85 }
.detail-box .d-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0 }

/* POS 信息查询系统 */
.phead{ display:flex; align-items:center; gap:6px; margin-bottom:18px; flex-wrap:wrap }
.q-search{ width:100%; padding:18px 22px; border:2px solid var(--line); border-radius:12px;
  font:inherit; font-size:17px; background:#fff; color:var(--ink); margin:0;
  transition:border-color .2s, box-shadow .2s }
.q-search:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,95,255,.1) }
.q-search::placeholder{ color:#a0aec0 }
.q-cat{ max-width:240px; margin-left:10px; flex:0 0 auto; width:auto }
.q-list{ display:flex; flex-direction:column; gap:12px }
.q-item{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--shadow); transition:.18s }
.q-item:hover{ border-color:#cfe0ff; transform:translateY(-1px) }
.q-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.q-name{ font-size:16px; font-weight:700; color:var(--ink) }
.q-code{ font-family:monospace; font-size:12px; background:#f0f5ff; color:var(--brand-dark);
  padding:2px 9px; border-radius:6px; white-space:nowrap }
.q-meta{ font-size:13px; color:var(--muted); line-height:1.8; margin-top:4px }
.q-meta b{ color:var(--ink); font-weight:600 }
.q-tag{ display:inline-block; font-size:12px; padding:1px 9px; border-radius:999px;
  background:rgba(0,184,169,.12); color:#0b7a6e; margin-left:6px }
.q-tag.warn{ background:rgba(224,72,59,.12); color:#c0392b }

/* 故障码卡片 */
.code-item{ display:flex; align-items:stretch; gap:18px }
.q-code-big{ flex:0 0 88px; display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:34px; font-weight:800; color:var(--brand-dark);
  background:#f0f5ff; border-radius:12px; letter-spacing:1px }
.code-body{ flex:1; min-width:0 }
.q-cat-badge{ display:inline-block; font-size:12px; padding:2px 10px; border-radius:999px; margin-left:8px; font-weight:600; vertical-align:middle }
.q-cat-badge.ok{ background:rgba(22,163,74,.12); color:#15803d }
.q-cat-badge.retry{ background:rgba(11,95,255,.12); color:var(--brand-dark) }
.q-cat-badge.card{ background:rgba(217,119,6,.14); color:#b45309 }
.q-cat-badge.seize{ background:rgba(224,72,59,.14); color:#c0392b }
.q-cat-badge.sys{ background:#eef1f6; color:#64748b }
.q-sol{ font-size:14px; color:#33425a; line-height:1.8; margin-top:6px }
.q-sol b{ color:var(--ink) }
@media(max-width:520px){
  .code-item{ flex-direction:column; gap:10px }
  .q-code-big{ flex:none; height:56px; font-size:28px }
}
.q-count{ color:var(--muted); font-size:13px; margin:12px 0 0 }
.decode-result{ margin-top:16px; background:#f6f8fb; border:1px solid var(--line); border-radius:10px;
  padding:16px; display:none }
.decode-result.show{ display:block }
.dr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.dr-cell{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px }
.dr-cell .dr-k{ font-size:12px; color:var(--muted) }
.dr-cell .dr-v{ font-size:17px; font-weight:700; color:var(--ink); margin-top:2px; font-family:monospace }
.dr-cell .dr-sub{ font-size:13px; color:var(--brand-dark); margin-top:3px; font-family:inherit }
.dr-note{ font-size:13px; color:#c0392b; margin-top:12px; line-height:1.7 }

/* 到账金额计算器（独立页） */
.mode-tabs{ display:flex; gap:10px; margin-bottom:18px }
.mode-tab{ border:1.5px solid var(--line); border-radius:999px; padding:10px 22px; font-size:15px; cursor:pointer;
  background:#fff; color:var(--ink); font-weight:500; transition:.18s }
.mode-tab:hover{ border-color:#cfe0ff; background:#f8faff }
.mode-tab.on{ border-color:var(--brand); background:var(--brand); color:#fff; font-weight:700 }
.arv-result{ margin-top:16px; background:#f6f8fb; border:1px solid var(--line); border-radius:10px; padding:16px 18px }
.arv-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:15px; color:var(--ink) }
.arv-row .v{ font-weight:600; font-family:inherit }
.arv-row.final{ border-top:1px dashed var(--line); margin-top:6px; padding-top:12px; font-weight:800; font-size:18px }
.arv-row .v.fee{ color:#e0483b }
.arv-row .v.final{ color:var(--brand) }
.arv-sub{ font-size:13px; color:#64748b; margin-top:10px; line-height:1.7 }
.arv-sub b{ color:var(--ink) }
.arv-ref{ font-size:13px; color:var(--muted); margin-top:14px; line-height:1.7;
  background:#f6f8fb; border:1px dashed var(--line); border-radius:10px; padding:12px 14px }
.rev-badge{ display:inline-block; font-size:13px; font-weight:700; padding:5px 14px; border-radius:999px; margin-bottom:12px }
.rev-badge.ok{ background:rgba(22,163,74,.12); color:#15803d }
.rev-badge.fee{ background:rgba(217,119,6,.14); color:#b45309 }
.rev-badge.high{ background:rgba(224,72,59,.14); color:#c0392b }
.rev-badge.low{ background:rgba(22,163,74,.12); color:#15803d }
.rev-badge.unk{ background:#eef1f6; color:#64748b }

/* 响应式 */
@media(max-width:900px){
  .product-grid{ grid-template-columns:repeat(2,1fr) }
  .opt-grid.cols3{ grid-template-columns:repeat(2,1fr) }
  .policy-grid{ grid-template-columns:1fr }
  .dr-grid{ grid-template-columns:1fr }
}
@media(max-width:520px){
  .opt-grid.cols2,.opt-grid.cols3{ grid-template-columns:1fr }
  .product-grid{ grid-template-columns:repeat(2,1fr) }
}