/* ══ 算一算 · 样式 ══════════════════════════════════════════════
 * ★ 视觉定位：**信息工具质感**（蓝灰），不是赌博 App。
 *   不用红黄高饱和、不用闪烁动效、不用"恭喜中奖"这类话术。
 *   金额用深蓝灰而不是正红 —— 红会强化"博一把"的心理暗示。
 */

#calcBody { padding-bottom: 20px; }

.cd-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 12px;
}

.cd-lab {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #667085);
  margin: 10px 0 6px;
}
.cd-lab:first-child { margin-top: 0; }

.cd-card select,
.cd-card input[type="number"],
.cd-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  /* ★ 16px 是 iOS 不自动放大的下限，小于 16px 一聚焦页面就跳 */
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--line, #d0d5dd);
  border-radius: 9px;
  background: #fff;
  color: var(--fg, #1d2939);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.cd-card input:focus,
.cd-card select:focus {
  outline: none;
  border-color: var(--accent, #1f6feb);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

/* ── 方式切换（单式/复式/胆拖）── */
.cd-seg {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.cd-segb {
  flex: 1;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--line, #d0d5dd);
  border-radius: 9px;
  background: #f8fafc;
  color: var(--muted, #667085);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cd-segb.on {
  background: rgba(31, 111, 235, 0.08);
  border-color: var(--accent, #1f6feb);
  color: var(--accent, #1f6feb);
}

.cd-tip {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted, #667085);
  margin-top: 7px;
}

.cd-go {
  width: 100%;
  margin-top: 16px;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  background: var(--accent, #1f6feb);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.cd-go:active { opacity: 0.86; }

/* ── 主结果：金额 ── */
.cd-main {
  background: linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
  border-color: #d8e2f0;
  text-align: center;
  padding: 18px 16px;
}
.cd-lbl {
  font-size: 13.5px;
  font-weight: 600;
  color: #5a6b85;
  margin-bottom: 6px;
}
.cd-amount {
  /* ★ 金额是这一页的主角 —— 老板要的就是"快速知道该交多少钱" */
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  /* ★ 深蓝灰，不用正红：红会强化"博一把"的暗示 */
  color: #1e3a5f;
  letter-spacing: -1px;
}
.cd-yen {
  font-size: 22px;
  font-weight: 700;
  margin-right: 3px;
  vertical-align: 6px;
}
.cd-sub {
  font-size: 13px;
  color: #667085;
  margin-top: 7px;
}

/* ── 期望值（合规必须显示）── */
.cd-fact {
  background: #fffbf0;
  border-color: #f0e0bd;
}
.cd-factrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  color: #6b5a35;
}
.cd-factrow b {
  font-size: 15.5px;
  font-weight: 700;
  color: #7a4c00;
}

/* ── 奖级表 ── */
.cd-pt { margin-top: 2px; }
.cd-ptrow {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line, #e6eaf0);
  font-size: 14px;
}
.cd-ptrow:last-child { border-bottom: none; }
.cd-pth {
  flex: 1;
  color: var(--fg, #1d2939);
  font-weight: 500;
}
.cd-ptp {
  font-weight: 700;
  color: #1e3a5f;
  min-width: 90px;
  text-align: right;
}
.cd-pto {
  font-size: 12px;
  color: #98a2b3;
  min-width: 88px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 提示类 ── */
.cd-warn {
  background: #fff4e6;
  border-color: #ffd8a8;
  color: #8a4b00;
  font-size: 14px;
  line-height: 1.6;
}
.cd-err {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
  font-size: 14px;
}
.cd-note {
  background: #f8fafc;
  border-color: #e6eaf0;
  color: #667085;
  font-size: 12.5px;
  line-height: 1.65;
}
.cd-load {
  text-align: center;
  color: #98a2b3;
  font-size: 14px;
  padding: 20px 0;
}

/* 窄屏微调 */
@media (max-width: 360px) {
  .cd-amount { font-size: 34px; }
  .cd-ptp { min-width: 76px; }
  .cd-pto { min-width: 74px; font-size: 11.5px; }
}