/* ══════════════════════════════════════════════════════════
   小荷包页 · 奶油蜡笔风组件（scoped 在 .wallet-v2，不影响其他页）
   颜色全用 style.css 的主题变量，cream/lavender 切换自动生效；
   light/dark 下也可用，退化为素色卡片。
   ══════════════════════════════════════════════════════════ */
.wallet-v2 { position: relative; z-index: 1; }
.wallet-v2 .page-header { min-width: 0; }
.wallet-v2 .page-header > div:last-child { min-width: 0; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   全站奶油氛围：纸纹 + 光团 + 蜡笔角色（仅 cream/lavender 主题点亮，作用于所有页面）
   ══════════════════════════════════════════════════════════ */
/* 纸纹噪点：整页极淡颗粒，提升手绘纸面质感 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="cream"] body::before,
[data-theme="lavender"] body::before { opacity: .5; }

/* 柔光色团 + 蜡笔角色（固定视口的全局背景层，pointer-events:none 不挡操作） */
.app-scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.app-scenery .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; transition: opacity .6s ease; }
[data-theme="cream"] .app-scenery .blob.a { background: #BFE3ED; }
[data-theme="cream"] .app-scenery .blob.b { background: #F4E3C6; }
[data-theme="lavender"] .app-scenery .blob.a { background: #D8CDF3; }
[data-theme="lavender"] .app-scenery .blob.b { background: #F6D9E6; }
[data-theme="cream"] .app-scenery .blob,
[data-theme="lavender"] .app-scenery .blob { opacity: .5; }
.app-scenery .blob.a { width: 40vw; height: 40vw; top: -12vw; right: -8vw; animation: np-drift 18s ease-in-out infinite; }
.app-scenery .blob.b { width: 32vw; height: 32vw; bottom: -10vw; left: -6vw; animation: np-drift 22s ease-in-out infinite reverse; }
@keyframes np-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2vw,1.2vw) scale(1.06); } }
/* 两只角色固定在视口右侧（上/下），避开左侧边栏，桌面浮动点缀 */
.app-scenery .mascot { position: fixed; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 6px 10px rgba(110,74,44,.14)); }
[data-theme="cream"] .app-scenery .mascot,
[data-theme="lavender"] .app-scenery .mascot { opacity: .95; }
.app-scenery .mascot.bear { width: min(120px,11vw); right: 16px; top: 82px; animation: np-bob 6s ease-in-out infinite; }
.app-scenery .mascot.rabbit { width: min(112px,10vw); right: 20px; bottom: 24px; animation: np-bob 7s ease-in-out infinite 1.2s; }
@keyframes np-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
@media (max-width: 820px) { .app-scenery .mascot { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-scenery .blob, .app-scenery .mascot, .wallet-v2 .np-card, .wallet-v2 .np-hero { animation: none !important; } }

.wallet-v2 .np-content { position: relative; z-index: 1; }

/* Hero：本月结余大卡 */
.wallet-v2 .np-hero {
  position: relative; border-radius: 28px; padding: 28px 30px 26px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg,#63B7C6 0%,#8FCBE0 60%,#BCDFEA 100%);
  box-shadow: 0 16px 40px rgba(90,110,130,.2); margin-bottom: 16px;
  text-shadow: 0 1px 2px rgba(60,80,100,.15); animation: np-rise .6s ease both;
}
[data-theme="lavender"] .wallet-v2 .np-hero { background: linear-gradient(135deg,#9C88E0 0%,#C193D6 55%,#E8B7CD 100%); }
.wallet-v2 .np-hero::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.16); top: -130px; right: -60px; }
.wallet-v2 .np-hero .label { font-size: 13.5px; opacity: .95; letter-spacing: .06em; }
.wallet-v2 .np-hero .num { font-size: clamp(34px,6vw,50px); font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.wallet-v2 .np-hero .num small { font-size: .5em; font-weight: 600; opacity: .9; margin-right: 4px; }
.wallet-v2 .np-hero .sub { font-size: 13px; opacity: .92; }
.wallet-v2 .np-hero .chips { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.wallet-v2 .np-hero .chip { background: rgba(255,255,255,.2); border-radius: 99px; padding: 7px 14px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.wallet-v2 .np-hero .chip b { font-variant-numeric: tabular-nums; }
.wallet-v2 .np-hero .duo { position: absolute; right: 20px; bottom: -4px; width: 170px; }
@media (max-width: 640px) { .wallet-v2 .np-hero::after { right: 0; } .wallet-v2 .np-hero .duo { width: 110px; right: 4px; opacity: .85; } }

/* 通用磨砂卡（半透明玻璃拟态：透出背景柔光/纸纹，若隐若现，背景色随主题） */
.wallet-v2 .np-card, .wallet-v2 .card {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.62);
}
[data-theme="dark"] .wallet-v2 .np-card, [data-theme="dark"] .wallet-v2 .card { background: rgba(37,29,36,.56); }
[data-theme="cream"] .wallet-v2 .np-card, [data-theme="cream"] .wallet-v2 .card { background: rgba(255,253,248,.58); }
[data-theme="lavender"] .wallet-v2 .np-card, [data-theme="lavender"] .wallet-v2 .card { background: rgba(255,253,252,.56); }
.wallet-v2 .np-card {
  border: 1.5px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow); padding: 20px 22px; animation: np-rise .6s ease both;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wallet-v2 .np-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wallet-v2 .np-card h3 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.wallet-v2 .np-chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.wallet-v2 .np-chart-header h3 { margin: 0; }
.wallet-v2 .np-chart-scope { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.wallet-v2 .np-chart-scope button { border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; padding: 5px 10px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.wallet-v2 .np-chart-scope button[aria-pressed="true"] { color: var(--primary); background: var(--bg-card); box-shadow: var(--shadow); font-weight: 600; }
.wallet-v2 .np-chart-scope button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wallet-v2 .np-chart-summary { min-height: 20px; margin-bottom: 8px; color: var(--text-secondary); font-size: 12px; }
.wallet-v2 .np-chart-body { position: relative; height: 240px; }
.wallet-v2 .np-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-secondary); font-size: 13px; pointer-events: none; }
.wallet-v2 .np-annual-category-card { margin: 0 0 16px; }
.wallet-v2 .np-annual-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wallet-v2 .np-annual-range { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.wallet-v2 .np-annual-endpoint { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: 12px; }
.wallet-v2 .np-annual-endpoint select { min-width: 0; width: 88px; min-height: 36px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font: inherit; cursor: pointer; }
.wallet-v2 .np-annual-endpoint select:last-child { width: 68px; }
.wallet-v2 .np-annual-endpoint select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wallet-v2 .np-annual-range-error { margin-bottom: 8px; color: var(--danger); font-size: 12px; }
.wallet-v2 .np-annual-range-error:empty { display: none; }
@media (max-width: 820px) { .wallet-v2 .np-annual-controls { width: 100%; align-items: flex-start; justify-content: flex-start; } }
@media (max-width: 390px) { .wallet-v2 .np-annual-range { width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; } }
@keyframes np-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* 三张统计卡 */
.wallet-v2 .np-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 16px; }
.wallet-v2 .np-stat { padding: 16px 18px; }
.wallet-v2 .np-stat .k { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.wallet-v2 .np-stat .v { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; }
.wallet-v2 .np-stat .v.in { color: var(--success); } .wallet-v2 .np-stat .v.out { color: var(--danger); }
.wallet-v2 .np-stat .d { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.wallet-v2 .np-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 820px) { .wallet-v2 .np-stats { grid-template-columns: 1fr 1fr; } .wallet-v2 .np-stats .np-stat:last-child { grid-column: 1/-1; } }

/* 两列网格 */
.wallet-v2 .np-grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 16px; }
.wallet-v2 .np-grid2 > .np-card { min-width: 0; }
@media (max-width: 820px) { .wallet-v2 .np-grid2 { grid-template-columns: 1fr; } }

/* 双人对比条 */
.wallet-v2 .np-duobar { height: 16px; border-radius: 99px; overflow: hidden; display: flex; margin: 14px 0 10px; box-shadow: inset 0 1px 2px rgba(110,74,44,.15); }
.wallet-v2 .np-duobar i { transition: width .6s ease; }
.wallet-v2 .np-duobar .b { background: linear-gradient(90deg,#B98A63,#A9764F); }
.wallet-v2 .np-duobar .r { background: linear-gradient(90deg,#F8BCCE,#F49BB8); }
.wallet-v2 .np-duometa { display: flex; justify-content: space-between; font-size: 13px; }
.wallet-v2 .np-duometa b { font-variant-numeric: tabular-nums; }
.wallet-v2 .np-face { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 16px; vertical-align: middle; }
.wallet-v2 .np-face.b { background: #F3E3D2; } .wallet-v2 .np-face.r { background: #FBE7EE; }

/* 最近交易 */
.wallet-v2 .np-txns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.wallet-v2 .np-txn { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 8px; border-radius: 14px; transition: background .2s ease; }
.wallet-v2 .np-txn:hover { background: var(--primary-bg); }
.wallet-v2 .np-txn > .np-face { flex: 0 0 30px; }
/* Keep notes readable; a wide amount moves intact to the next line. */
.wallet-v2 .np-txn .t { flex: 1 1 120px; min-width: 0; }
.wallet-v2 .np-txn .t b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-v2 .np-txn .t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--text-secondary); }
.wallet-v2 .np-txn .amt { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.wallet-v2 .np-txn .amt.out { color: var(--text); } .wallet-v2 .np-txn .amt.in { color: var(--success); } .wallet-v2 .np-txn .amt.refund { color: var(--primary); }