/* ============================================================
   庭院 · 人间行囊
   两本账并排。带 ¥ 的是真实钱，带"枚"的是微光币。
   还是那一条：没有卡片墙，分层靠发丝线与极淡的夜雾。
   ============================================================ */

/* ── 月份导航 ────────────────────────────────────────────── */
.monnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.monnav__btn {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--s-1);
  color: var(--moon-300);
  font-size: 13px;
  display: grid;
  place-items: center;
  transition: background var(--e2) var(--ease), color var(--e2) var(--ease);
}
.monnav__btn:hover { background: var(--s-2); color: var(--moon-100); }
.monnav__btn[disabled] { opacity: 0.26; pointer-events: none; }
.monnav__t {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  letter-spacing: 0.13em;
  color: var(--moon-100);
}

/* ── 概览 ────────────────────────────────────────────────── */
.money__head { display: flex; flex-direction: column; }
.money__big { display: flex; flex-direction: column; gap: 7px; }
.money__label {
  font-size: var(--t-xs);
  color: var(--moon-400);
  letter-spacing: 0.16em;
}
.money__fig {
  font-family: var(--font-serif);
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--moon-100);
  font-variant-numeric: tabular-nums;
}
.money__sub { font-size: var(--t-xs); color: var(--moon-400); letter-spacing: 0.03em; }
.money__head .meter { margin-top: 15px; }

/* ── 记一笔：首页与行囊共用同一张表单 ─────────────────────
   金额单独占一行，字最大 —— 它是最先要写下的东西。
   分类两级都是发丝线加极淡的夜雾，不用边框和底色堆。 */
.spendform { display: flex; flex-direction: column; }

.spend__amt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 15px;
}
.spend__cur { flex: none; font-size: 17px; color: var(--moon-400); }
.spend__in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--moon-100);
  font-family: inherit;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.spend__in::placeholder { color: var(--moon-400); opacity: 0.42; }

.spendform .fpick { margin-top: 11px; }
.spendform .fpick:first-of-type { margin-top: 0; }
.spendform .field--note { margin-top: 12px; }

/* 分类行放不下时，说明文字和按钮换到下一行 */
.fpick--stack { align-items: flex-start; }
.fpick--stack .fpick__k { padding-top: 5px; }
.fpick__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }

.hintline { font-size: var(--t-xs); color: var(--moon-400); line-height: 1.7; }

.picks--col { flex-direction: column; width: 100%; }
.pick--wide {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
}
.pick__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__m { flex: none; font-size: var(--t-xs); color: var(--moon-400); font-variant-numeric: tabular-nums; }
.pick--wide.is-on .pick__m { color: var(--c-orange); }

/* 两级分类的「＋」：不抢眼，点开就能当场新建 */
.pick--plus { padding: 4px 11px; font-size: 14px; line-height: 1.45; color: var(--moon-400); }
.pick--plus:hover { color: var(--c-glimmer); }

.picknew { display: inline-flex; align-items: center; gap: 6px; }
.picknew__in {
  width: 118px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.3);
  color: var(--moon-100);
  font-family: inherit;
  font-size: var(--t-xs);
  outline: none;
}
.picknew__in::placeholder { color: var(--moon-400); }
.picknew__in:focus { border-color: rgba(226,189,124,.4); }
.picknew__ok {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--moon-200);
  font-family: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}
.picknew__ok:hover { color: var(--moon-100); border-color: var(--c-glimmer); }

.field--num { flex: none; width: 92px; text-align: center; }

/* 奖励清单的录入行：名字独占一行，下面「多少币 + 放进清单」。
   不用 .inline —— 窄屏时输入框的固有最小宽度会把按钮挤成一个字一行。 */
.rewardform { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.rewardform #rwName { flex: 1 1 100%; min-width: 0; }
.rewardform #rwCost { flex: 0 0 92px; }
.rewardform .btn { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }

/* ── 账目行：流水 / 待收回 / 奖励 共用 ─────────────────── */
.money__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.money__row:last-child { border-bottom: 0; }
.money__row--tall { flex-wrap: wrap; }

.money__k {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--moon-200);
  font-size: var(--t-base);
  line-height: 1.55;
  word-break: break-word;
}
.money__k i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--dot, var(--moon-400));
  box-shadow: 0 0 9px -1px var(--dot, transparent);
}
.money__k em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--moon-400);
  letter-spacing: 0.03em;
}

.money__v {
  flex: none;
  font-size: var(--t-base);
  color: var(--moon-200);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.money__v.is-in  { color: var(--c-garden); }
.money__v.is-out { color: var(--moon-200); }
.money__v.is-adv { color: var(--c-orange); }

.money__tag {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(203, 148, 99, 0.24);
  background: var(--c-orange-wash);
  color: var(--c-orange);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.money__x {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--moon-400);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color var(--e2) var(--ease), background var(--e2) var(--ease);
}
.money__x:hover { color: var(--c-rose); background: var(--s-1); }

/* ── 预算 ────────────────────────────────────────────────── */
.bgrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.bgrow:last-child { border-bottom: 0; }
.bgrow__k {
  flex: none;
  width: 84px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--moon-300);
  letter-spacing: 0.06em;
}
.bgrow__k i {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--dot, var(--moon-400));
}
.bgrow__in { flex: none; width: 92px; text-align: right; }
.bgrow__now {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--t-xs);
  color: var(--moon-400);
  font-variant-numeric: tabular-nums;
}

/* ── 类别分布 ────────────────────────────────────────────── */
.spread { display: flex; flex-direction: column; gap: 13px; }
.spread__row { display: flex; align-items: center; gap: var(--s3); }
.spread__k {
  flex: none;
  width: 54px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: var(--moon-300);
  letter-spacing: 0.05em;
}
.spread__k i {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--dot, var(--moon-400));
  box-shadow: 0 0 8px -1px var(--dot, transparent);
}
.spread__bar {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  border-radius: 99px;
  background: var(--line-2);
}
.spread__bar > i {
  position: absolute;
  left: 0; top: -0.5px;
  height: 2px;
  border-radius: 99px;
  max-width: 100%;
  background: var(--dot, var(--moon-200));
  box-shadow: 0 0 10px -1px var(--dot, transparent);
}
.spread__v {
  flex: none;
  width: 74px;
  text-align: right;
  font-size: var(--t-xs);
  color: var(--moon-200);
  font-variant-numeric: tabular-nums;
}
.spread__v em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--moon-400);
  margin-top: 2px;
}

/* ── 首页那一行"今日花销"：整行可点，走进人间行囊 ───────── */
.row--link {
  width: 100%;
  text-align: left;
  transition: background var(--e2) var(--ease);
}
.row--link:hover .row__k { color: var(--moon-100); }
.row--link .row__k i { box-shadow: 0 0 9px -1px var(--c-blue); }

/* 首页那一行当日小结：支出 / 收入 / 垫出 / 收回 */
.today__sum {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 12px;
  font-size: var(--t-xs);
  color: var(--moon-400);
  font-variant-numeric: tabular-nums;
}

/* ── 分类管理：一个大类一行，小类挂在它下面 ───────────────── */
.catrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.catrow:last-child { border-bottom: 0; }
.catrow__top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.catrow__k {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--moon-100);
}
.catrow__k i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 8px -1px var(--dot);
}
.catrow__k em {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--moon-400);
  font-variant-numeric: tabular-nums;
}
.catrow__acts { flex: none; display: flex; align-items: center; gap: 6px; }
.catrow__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0 15px; }

.subchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--moon-300);
}
.subchip__x {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--moon-400);
}
.subchip__x:hover { color: var(--c-rose); }

/* 分布图：大类下面把花过的小类也排出来，不占额外的行 */
.spread__subs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -2px 0 9px 18px; }
.spread__sub { font-size: 10.5px; color: var(--moon-400); font-variant-numeric: tabular-nums; }

@media (max-width: 400px) {
  .bgrow__k { width: 70px; }
  .bgrow__in { width: 80px; }
}