/* =========================================================
   ledger.css — 家庭开支速记
   配合 base.css + tool.css 使用。
   ========================================================= */

.tool{--a1:var(--amber);--a2:var(--orange)}
.tool .grad{background:linear-gradient(96deg,var(--amber),var(--orange) 55%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 速记：类型与金额 ---------- */
.seg--kind{margin-bottom:16px}
.seg--kind button{white-space:nowrap}

.amt{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line-2);padding-bottom:10px;max-width:460px}
.amt__input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:var(--font-mono);font-size:clamp(2.4rem,13vw,3.4rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;
}
.amt__input::placeholder{color:rgba(255,255,255,.18)}
/* 上面那条 outline:0 把这个输入框的键盘焦点环压没了（和搜索框当年一样的坑，2026-10-31 实测）：补一条只给键盘看的环 */
.amt__input:focus-visible{outline:2px solid var(--a2);outline-offset:4px;border-radius:8px}
.amt__input::-webkit-outer-spin-button,.amt__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amt__input[type=number]{-moz-appearance:textfield;appearance:textfield}
.amt__unit{font-size:1rem;color:var(--muted)}
.amt.is-out .amt__input{color:var(--amber)}
.amt.is-in .amt__input{color:var(--mint)}

.quick{display:flex;flex-wrap:wrap;gap:8px}
#catLabel{margin:24px 0 8px}
.quick--cat{margin-top:6px}
.quick--cat .chip{font-family:var(--font-sans);font-size:.84rem;padding:.5em 1em}
.quick--cat .chip.is-on{color:#0a0704;background:linear-gradient(100deg,var(--a1),var(--a2));border-color:transparent;font-weight:620}
#amtQuick{margin-top:16px}
#amtQuick .chip{font-family:var(--font-mono);font-size:.8rem}

.field--btn{display:flex;flex-direction:column;justify-content:flex-end}
.field--btn .controls{margin-top:0}
.hint--top{margin:0 0 14px}

/* ---------- 月份切换 ---------- */
.mnav{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mnav__label{flex:1;margin:0;text-align:center;font-size:1.06rem;font-weight:640;letter-spacing:.02em}
.mnav__btn{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink-2);cursor:pointer;
  font-size:1.3rem;line-height:1;padding:0 0 3px;transition:color .25s,border-color .25s,background .25s;
}
.mnav__btn:hover{color:#fff;border-color:var(--line-2);background:rgba(255,255,255,.09)}
.mnav__btn[disabled]{opacity:.3;cursor:not-allowed}
.mnav__btn[disabled]:hover{color:var(--ink-2);border-color:var(--line);background:rgba(255,255,255,.05)}
.mnav__today{flex:0 0 auto}

/* ---------- 汇总指标 ---------- */
/* 金额位数多，字号要跟着屏宽收，否则窄屏会被撑出横向滚动 */
.stats .metric b{font-size:clamp(1.3rem,6.2vw,1.9rem)}
.metric--out b{color:var(--amber)}
.metric--in b{color:var(--mint)}
.metric--bad b{color:var(--pink)}

/* ---------- 预算 ---------- */
.budget{margin-top:14px}
.budget__num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.budget__num b{font-size:clamp(2rem,8vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.budget__num i{font-style:normal;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.budget__bar{height:14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);overflow:hidden}
.budget__bar span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(100deg,var(--a1),var(--a2));
  transition:width .5s var(--ease);
}
.budget__bar.is-over span{background:linear-gradient(100deg,var(--pink),var(--orange))}
.budget.is-over .budget__num b{color:var(--pink)}

/* ---------- 分类汇总 ---------- */
.catrows{list-style:none;margin:0;padding:0}
.catrow{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.catrows li:first-child{padding-top:2px}
.catrow__name{font-size:.95rem;font-weight:600}
.catrow__name em{font-style:normal;margin-left:7px;font-size:.72rem;color:var(--muted);font-weight:400;font-family:var(--font-mono)}
.catrow__amt{text-align:right;font-family:var(--font-mono);font-size:.92rem;font-variant-numeric:tabular-nums}
.catrow__amt i{font-style:normal;color:var(--muted);font-size:.74rem;margin-left:6px}
.catrow__amt.is-over{color:var(--pink)}
.catrow__bar{position:relative;grid-column:1/-1;height:8px;border-radius:999px;background:rgba(255,255,255,.055);margin-top:7px}
.catrow__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(100deg,var(--a1),var(--a2));min-width:2px}
.catrow__bar u{
  position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;
  background:var(--ink);opacity:.7;
}

/* ---------- 分类预算行 ---------- */
.budrows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.budrow{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center}
.budrow__name{font-size:.9rem;color:var(--ink-2)}
.budrow .input{width:100%}

/* ---------- 分类管理 ---------- */
.catmgr{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.catmgr li{
  display:flex;align-items:center;gap:2px;min-height:44px;padding:4px 6px 4px 14px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.045);
}
.catmgr__name{font-size:.86rem;color:var(--ink-2);border:0;background:none;padding:0;outline:0;min-height:32px}
.catmgr__name:focus{color:#fff;border-bottom:1px solid var(--a1)}
.catmgr__btn{
  width:32px;height:32px;border-radius:50%;border:1px solid transparent;background:none;
  color:var(--muted);cursor:pointer;font-size:.82rem;line-height:1;padding:0;
  transition:color .25s,border-color .25s;
}
.catmgr__btn:hover{color:var(--pink);border-color:rgba(255,92,168,.4)}
.addrow{display:flex;gap:10px;align-items:flex-end;margin-bottom:8px}
.addrow .input{flex:1;min-width:0}

/* ---------- 流水 ---------- */
.daygrp{margin-bottom:18px}
.daygrp__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-size:.82rem;color:var(--muted);letter-spacing:.02em;
}
.daygrp__h b{font-family:var(--font-mono);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}

.tx{list-style:none;margin:0;padding:0}
.tx--recent{margin-top:4px}
.tx__row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 10px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.tx--recent .tx__row{grid-template-columns:auto 1fr auto auto auto}
.tx__cat{
  font-size:.78rem;color:var(--ink-2);padding:.24em .7em;border-radius:7px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);white-space:nowrap;
}
.tx__note{font-size:.88rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx__date{display:none;font-size:.72rem;color:var(--muted);font-family:var(--font-mono)}
.tx--recent .tx__date{display:block}
.tx__amt{font-family:var(--font-mono);font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx__amt.is-out{color:var(--amber)}
.tx__amt.is-in{color:var(--mint)}
.tx__del{
  width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--muted);cursor:pointer;font-size:.88rem;line-height:1;padding:0;
  transition:color .25s,border-color .25s;
}
.tx__del:hover{color:var(--pink);border-color:rgba(255,92,168,.4)}

/* ---------- 窄屏 ---------- */
@media (max-width:400px){
  .budrow{grid-template-columns:1fr 104px}
  .mnav__today{display:none}
  .tx--recent .tx__row{gap:2px 8px}
}