/* ==========================================================================
   RiskWeb · 预算管家（budget.html）—— 前缀 bt-
   ========================================================================== */

/* ---- hidden 兜底 ---- */
[hidden] { display: none !important; }

/* ---- 月份切换条 ---- */
.bt-monthbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.bt-mbtn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--color-border-tertiary, rgba(0,0,0,.15));
  background: transparent; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.bt-mbtn:hover { border-color: var(--color-border-primary, rgba(0,0,0,.4)); }
.bt-ym { font-size: 1.1rem; font-weight: 500; min-width: 110px; text-align: center; }
.bt-privacy { margin-left: auto; font-size: .8rem; color: var(--color-text-tertiary, #888); }

/* ---- 板块卡片 ---- */
.bt-section { padding: 28px 28px 24px; margin-bottom: 20px; }
.bt-h2 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; font-size: 1.25rem; font-weight: 500;
}
.bt-num-chip {
  display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 6px;
  background: var(--color-background-tertiary, #f1efe8);
  color: var(--color-text-secondary, #555); font-weight: 500;
}
.bt-h2-tip { font-size: .82rem; font-weight: 400; color: var(--color-text-tertiary, #888); }
.bt-sub { font-size: .95rem; font-weight: 500; margin: 18px 0 10px; }
.bt-sub:first-child { margin-top: 0; }
.bt-tip-inline { font-size: .8rem; font-weight: 400; color: var(--color-text-tertiary, #888); margin-left: 8px; }
.bt-empty { font-size: .88rem; color: var(--color-text-tertiary, #888); padding: 10px 0; }

/* ---- 快速记一笔 ---- */
.bt-add-row { display: grid; grid-template-columns: 120px 150px 160px 1fr auto auto; gap: 10px; align-items: end; }
.bt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-field label { font-size: .78rem; color: var(--color-text-secondary, #555); }
.bt-field input, .bt-field select {
  padding: 8px 10px; border: 1px solid var(--color-border-tertiary, rgba(0,0,0,.15));
  border-radius: 8px; font-size: .9rem; min-width: 0; background: var(--color-background-primary, #fff);
  color: var(--color-text-primary, #111);
}
.bt-field input:focus, .bt-field select:focus { outline: none; border-color: var(--color-border-primary, rgba(0,0,0,.4)); }

/* ---- 固定周期模板 ---- */
.bt-tpl { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--color-border-tertiary, rgba(0,0,0,.15)); }
.bt-tpl-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }

/* ---- 流水 ---- */
.bt-records { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--color-border-tertiary, rgba(0,0,0,.15)); }
.bt-day { margin-bottom: 12px; }
.bt-day-head {
  display: flex; justify-content: space-between; font-size: .82rem;
  color: var(--color-text-secondary, #555); padding: 4px 0; font-weight: 500;
}
.bt-rec {
  display: grid; grid-template-columns: 110px 1fr 100px auto; gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: 8px; font-size: .88rem;
}
.bt-rec:nth-child(even) { background: var(--color-background-secondary, #f7f6f2); }
.bt-rec-auto { opacity: .85; }
.bt-rec-cat { font-weight: 500; }
.bt-rec-note { color: var(--color-text-secondary, #555); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-rec-amt { text-align: right; font-variant-numeric: tabular-nums; }
.bt-rec-ops { display: flex; gap: 6px; }
.bt-rec-ops button {
  border: 1px solid var(--color-border-tertiary, rgba(0,0,0,.15)); background: transparent;
  border-radius: 6px; padding: 2px 9px; font-size: .78rem; cursor: pointer;
  color: var(--color-text-secondary, #555);
}
.bt-rec-ops button:hover { border-color: var(--color-border-primary, rgba(0,0,0,.4)); }
.bt-auto-tag {
  font-style: normal; font-size: .7rem; padding: 1px 6px; border-radius: 4px;
  background: var(--color-background-tertiary, #f1efe8); color: var(--color-text-secondary, #555);
  margin-left: 4px;
}

/* ---- 预算设定（年度） ---- */
.bt-setup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bt-setup-grid .bt-field label { display: flex; align-items: center; gap: 4px; }

/* ---- 预算执行 ---- */
.bt-bimp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bt-btable { display: flex; flex-direction: column; gap: 4px; }
.bt-brow {
  display: grid; grid-template-columns: 150px 150px 110px 1fr 130px;
  gap: 12px; align-items: center; font-size: .88rem; padding: 4px 6px;
}
.bt-bhead { font-size: .78rem; color: var(--color-text-tertiary, #888); font-weight: 500; }
.bt-btotal { border-top: 1px solid var(--color-border-tertiary, rgba(0,0,0,.15)); padding-top: 10px; font-weight: 500; }
.bt-bcat { font-weight: 500; }
.bt-brow input {
  width: 100%; padding: 6px 8px; border: 1px solid var(--color-border-tertiary, rgba(0,0,0,.15));
  border-radius: 6px; font-size: .85rem; background: var(--color-background-primary, #fff);
  color: var(--color-text-primary, #111);
}
.bt-num { font-variant-numeric: tabular-nums; }
.bt-pace { font-size: .8rem; color: var(--color-text-tertiary, #888); margin: 10px 0 0; }
.bt-conc-list { margin-top: 12px; }
.bt-over-txt { color: var(--color-text-danger, #A32D2D); font-weight: 500; }
.bt-bar {
  height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--color-background-tertiary, #f1efe8); display: block;
}
.bt-bar i { display: block; height: 100%; border-radius: 5px; transition: width .25s; }
.bt-bar i.ok { background: #1D9E75; }
.bt-bar i.near { background: #EF9F27; }
.bt-bar i.over { background: #E24B4A; }
.bt-bar i.none { background: transparent; }
.bt-bar-lg { height: 14px; margin-top: 5px; }
.bt-bar-lg i { background: #185FA5; }

/* ---- 消费分析 ---- */
.bt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.bt-metric {
  background: var(--color-background-secondary, #f7f6f2); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.bt-metric-label { font-size: .78rem; color: var(--color-text-secondary, #555); }
.bt-metric-val { font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 18px; }
.bt-share { margin-bottom: 10px; }
.bt-share-head { display: flex; justify-content: space-between; font-size: .85rem; }
.bt-mom { display: flex; justify-content: space-between; font-size: .85rem; padding: 5px 0; border-bottom: 1px dashed var(--color-border-tertiary, rgba(0,0,0,.1)); }
.bt-mom-val { font-variant-numeric: tabular-nums; }
.bt-mom-val.up { color: var(--color-text-danger, #A32D2D); }
.bt-mom-val.down { color: #1D9E75; }
.bt-mom-val.flat { color: var(--color-text-tertiary, #888); }
.bt-latte { margin-bottom: 18px; }
.bt-latte-row {
  display: flex; justify-content: space-between; font-size: .85rem;
  padding: 6px 10px; border-radius: 8px; background: var(--color-background-secondary, #f7f6f2);
  margin-bottom: 6px;
}
.bt-conclusions { margin-bottom: 18px; }
.bt-conc { font-size: .88rem; padding: 8px 12px; border-radius: 8px; margin: 0 0 8px; }
.bt-conc-ok { background: #EAF3DE; color: #27500A; }
.bt-conc-warn { background: #FAEEDA; color: #633806; }
.bt-conc-info { background: var(--color-background-secondary, #f7f6f2); color: var(--color-text-secondary, #444); }
.bt-backfill { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--color-border-tertiary, rgba(0,0,0,.15)); }

/* ---- 底部操作 ---- */
.bt-actions { display: flex; gap: 12px; justify-content: center; margin: 26px 0 10px; }

/* ---- 窄屏 ---- */
@media (max-width: 860px) {
  .bt-add-row { grid-template-columns: 1fr 1fr; }
  .bt-tpl-row { grid-template-columns: repeat(2, 1fr); }
  .bt-setup-grid { grid-template-columns: repeat(2, 1fr); }
  .bt-brow { grid-template-columns: 90px 90px 80px 1fr 100px; gap: 8px; font-size: .8rem; }
  .bt-metrics { grid-template-columns: repeat(2, 1fr); }
  .bt-two-col { grid-template-columns: 1fr; }
  .bt-rec { grid-template-columns: 84px 1fr 80px auto; }
  .bt-privacy { margin-left: 0; width: 100%; }
}

/* 极窄屏：预算总览表整体横向滚动，避免列压缩溢出视口（2026-09-22 视觉打磨） */
@media (max-width: 620px) {
  .bt-btable { overflow-x: auto; padding-bottom: 6px; }
  .bt-brow { min-width: 560px; }
}

/* ==========================================================================
   本月额度 · 消费审计建议（03 预算执行内的月度对照）
   ========================================================================== */
.bt-aplan {
  margin-top: 26px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line-strong);
  background: #fff;
}
@media (max-width: 640px) { .bt-aplan { padding: 16px 14px; } }
.bt-aplan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bt-aplan-head h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
}
.bt-aplan-head span { font-size: 0.72rem; color: var(--ink-soft); }

.bt-aplan-table { margin-top: 10px; }
.bt-aplan-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.7fr 1.2fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.82rem;
}
.bt-aplan-th {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.bt-aplan-th span:not(:first-child) { text-align: right; }
.bt-aplan-name { color: var(--ink); }
.bt-aplan-rate { color: var(--ink-soft); }
.bt-aplan-rate.is-near { color: #9A6B23; }
.bt-aplan-rate.is-over { color: #A33A2B; }
.bt-aplan-total {
  border-bottom: 0;
  border-top: 1px solid var(--line-strong);
  font-weight: 600;
  padding-top: 10px;
}
.bt-aplan-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.bt-aplan-link {
  color: var(--life);
  border-bottom: 1px solid transparent;
  margin-left: 6px;
}
.bt-aplan-link:hover { border-bottom-color: var(--life); }
.bt-aplan-clear {
  margin-left: 10px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.bt-aplan-clear:hover { color: #A33A2B; border-bottom-color: #A33A2B; }
@media (max-width: 640px) {
  .bt-aplan-row { grid-template-columns: 1.2fr 1fr 1fr; }
  .bt-aplan-row span:nth-child(4) { display: none; }
  .bt-aplan-th span:nth-child(4) { display: none; }
}
.bt-aplan-tip {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-left: 3px solid var(--life);
  font-size: 0.8rem;
  color: var(--ink-mid);
  line-height: 1.7;
}
.bt-aplan-jump {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--life);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.bt-aplan-jump:hover { border-bottom-color: var(--life); }

/* ==========================================================================
   预算周期切换（按年 / 按月）· 固定/可变分组
   ========================================================================== */
.bt-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.bt-mode-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bt-mode-tabs {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.bt-mode-tabs button {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-mid);
  background: #fff;
  border: 0;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bt-mode-tabs button + button { border-left: 1px solid var(--line-strong); }
.bt-mode-tabs button:hover { background: var(--life-soft); color: var(--life); }
.bt-mode-tabs button.on {
  background: var(--life);
  color: #fff;
}
@media (max-width: 640px) {
  .bt-mode { gap: 10px; }
  .bt-mode-tabs button { padding: 6px 14px; font-size: 0.78rem; }
}

.bt-setup-group {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  margin: 18px 0 10px;
}
.bt-setup-group span {
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-left: 10px;
}
.bt-setup-group:first-of-type { margin-top: 4px; }

.bt-setup-sum {
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--bg-soft);
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.bt-setup-sum b {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bt-tpl-intro {
  font-size: 0.86rem;
  color: var(--ink-mid);
  line-height: 1.8;
  max-width: 62em;
  margin-bottom: 16px;
}
.bt-tpl-intro b { color: var(--ink); font-weight: 600; }
.bt-tpl-note {
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.7;
}