/* 不记账试算 (结构见 daily_allowance_whatif_ui.js)：比本期设置深一档的底色 + 细边框，独立成块；结果卡用 .das-choice-card + 对账表 .das-ot-table (见 daily_allowance_summary.css)
   展开：标题行 → 今天再花 ¥X · 今日合计 / 再花上限 → 滑块 (低于 ¥20 的位置有红刻度) → 之后 K 天 · 仅试算 → 上下两张对账表卡；收起或没有额度时只剩一行 */
.das-whatif { display: flex; flex-direction: column; gap: 2.5px; background: #EEF2F6; border: 1px solid #D5DCE6; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); border-radius: 10px; padding: 3px 8px; font-size: 11.5px; color: #1E293B; }
.das-whatif-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 4px; min-width: 0; min-height: 20px; }
.das-whatif-title { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #1E293B; white-space: nowrap; }
.das-whatif:not(.is-collapsed) .das-whatif-title { margin-right: auto; }
/* 收起态的一行读数 (每段不断行，放不下在段间换行) / 没有额度时的中性提示 */
.das-whatif-summary { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 3px; flex: 1 1 0; min-width: 0; margin-right: auto; font-size: 11.5px; line-height: 1.22; color: #475569; font-variant-numeric: tabular-nums; }
.das-whatif-sum-chunk { white-space: nowrap; }
.das-whatif-summary b { font-weight: 700; color: #166534; }
.das-whatif-hint { margin-right: auto; font-size: 11.5px; color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 复位 / 收起：可点高度 28px，上下用负外边距抵掉；两个按钮拉开间距，免得想收起时误点复位 */
.das-whatif-reset, .das-whatif-toggle { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 28px; margin: -4px 0; padding: 0 5px; border: none; background: transparent; font-family: inherit; font-size: 11.5px; color: #475569; white-space: nowrap; cursor: pointer; }
.das-whatif-reset { margin-right: 4px; font-weight: 500; }
.das-whatif-toggle { color: #BE123C; font-weight: 700; }
.das-whatif-body { display: flex; flex-direction: column; gap: 2.5px; }

/* 读数行：今天再花 ¥X (大字) · 右侧今日合计 / 再花上限 */
.das-whatif-readout { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1px 6px; min-width: 0; }
.das-whatif-readout-left { display: inline-flex; align-items: baseline; gap: 3px; font-size: 11px; color: #475569; white-space: nowrap; }
.das-whatif-readout-left b { font-size: 14px; line-height: 1.1; font-weight: 800; color: #166534; font-variant-numeric: tabular-nums; }
.das-whatif-sum { margin-left: auto; font-size: 11px; line-height: 1.2; color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 滑块：轨道颜色由脚本按位置画在 input 背景上 (绿 → 越过 ¥20 线变红)；红刻度对齐圆钮中心 */
.das-whatif-slider-wrap { position: relative; display: flex; align-items: center; width: 100%; height: 16px; }
.das-whatif input[type=range] { display: block; -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 14px; margin: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.das-whatif input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: transparent; }
.das-whatif input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 3; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid #15803D; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22); }
.das-whatif input[type=range]::-moz-range-track { height: 5px; border-radius: 999px; background: transparent; }
.das-whatif input[type=range]::-moz-range-progress { height: 5px; border-radius: 999px; background: transparent; }
.das-whatif input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #15803D; }
.das-whatif input[type=range].is-low::-webkit-slider-thumb { border-color: #E11D48; }
.das-whatif input[type=range].is-low::-moz-range-thumb { border-color: #E11D48; }
.das-whatif-slider-tick { position: absolute; top: 1px; z-index: 2; width: 2px; height: 14px; border-radius: 1px; background: #E11D48; pointer-events: none; transform: translateX(-50%); }

/* 结果卡上方一行小字；最后一天只有剩余出一张卡，占满整行 */
.das-whatif-cards-note { font-size: 11px; line-height: 1.2; color: #475569; padding-top: 1px; }

/* 约 320px 宽的手机：字号降到 11px，内边距收紧 */
@media (max-width: 359px) {
  .das-whatif { padding: 2px 5px; gap: 1.5px; }
  .das-whatif-title, .das-whatif-summary, .das-whatif-hint { font-size: 11px; }
  .das-whatif-readout-left b { font-size: 13px; }
  .das-whatif-toggle, .das-whatif-reset { padding: 0 3px; font-size: 11px; }
}