/* ===== Biến màu: xanh lá = thu, đỏ/cam = chi, vàng = cảnh báo ===== */
:root {
  --bg:#F3F5F2; --card:#FFFFFF; --ink:#14201A; --muted:#566860; --line:#E0E6E1;
  --brand:#0E7C66; --brand-ink:#FFFFFF; --thu:#16794A; --chi:#C8381C;
  --warn:#8A5A00; --warn-bg:#FFF1C2; --do-bg:#FFE1D9; --thu-bg:#DDF3E5;
  --shadow:0 8px 28px rgba(20,32,26,.09); --glass:rgba(255,255,255,.74); --r:22px; --nav-h:68px;
}
html[data-theme=dark] {
  --bg:#0D1411; --card:#16201B; --ink:#EEF4EF; --muted:#9DB0A5; --line:#26352D;
  --brand:#3DD6A8; --brand-ink:#06251C; --thu:#4ADE80; --chi:#FF8566;
  --warn:#FFC933; --warn-bg:#3A2F0B; --do-bg:#3F1B14; --thu-bg:#12301E;
  --shadow:0 8px 28px rgba(0,0,0,.5); --glass:rgba(22,32,27,.74);
}
* { box-sizing:border-box; }
html, body, #app { height:100%; }
html.khoa .app-scroll { overflow:hidden; }
body {
  margin:0; overflow:hidden; overscroll-behavior:none; background:var(--bg); color:var(--ink);
  font:17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.muted { color:var(--muted); } .small { font-size:15px; } .center { text-align:center; } .grow { flex:1; }
.thu { color:var(--thu); } .chi { color:var(--chi); } .warn-text { color:var(--warn); font-weight:600; }
.err-text { color:var(--chi); font-weight:600; }
.row { display:flex; align-items:center; } .between { justify-content:space-between; } .gap { gap:12px; } .wrap { flex-wrap:wrap; }

/* ===== Khung ứng dụng ===== */
.app-shell { position:fixed; inset:0; }
.glass { background:var(--glass); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); }
.topbar {
  position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 8px) 16px 8px; border-bottom:1px solid var(--line);
}
.topbar-title { font-size:22px; font-weight:800; letter-spacing:-.3px; }
.app-scroll {
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:calc(env(safe-area-inset-top) + 68px) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 36px);
}
.page { max-width:560px; margin:0 auto; animation:pageIn .34s cubic-bezier(.2,.7,.2,1) both; }
.page > * + * { margin-top:14px; }

.nav {
  position:absolute; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(6,1fr);
  height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line);
}
.nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-decoration:none; color:var(--muted); font-size:12.5px; font-weight:700; background:none; min-height:var(--nav-h); }
.nav-ico { font-size:24px; line-height:1; transition:transform .2s; }
.nav-item.active { color:var(--brand); } .nav-item.active .nav-ico { transform:translateY(-2px) scale(1.12); }
.fab {
  position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:66px; height:66px; border-radius:50%; padding:0;
  background:var(--brand); color:var(--brand-ink); font-size:36px; line-height:1; box-shadow:0 12px 26px rgba(14,124,102,.45);
}
.fab:active { transform:translateX(-50%) scale(.93); }

/* ===== Nút, ô nhập ===== */
.btn {
  position:relative; overflow:hidden; -webkit-appearance:none; appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700;
  min-height:48px; padding:0 20px; border-radius:16px; color:inherit; background:transparent; touch-action:manipulation;
  transition:transform .12s ease, filter .15s ease;
}
.btn:active { transform:scale(.96); }
.btn:disabled { opacity:.5; }
.btn.rip::after { content:""; position:absolute; left:var(--rx); top:var(--ry); width:12px; height:12px; margin:-6px; border-radius:50%; background:currentColor; opacity:.25; animation:ripple .55s ease-out; pointer-events:none; }
.btn-primary { background:var(--brand); color:var(--brand-ink); font-size:18px; min-height:54px; }
.btn-ghost { background:var(--line); color:var(--ink); }
.btn-danger { background:var(--do-bg); color:var(--chi); }
.btn-block { display:flex; align-items:center; justify-content:center; width:100%; margin-top:12px; }
.icon-btn { min-width:48px; min-height:48px; padding:0; border-radius:50%; font-size:22px; background:var(--line); display:inline-flex; align-items:center; justify-content:center; }
.input, .mud-input > input, .mud-input-slot { font:inherit !important; font-size:17px !important; }
.input {
  width:100%; min-height:52px; padding:10px 14px; border:2px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); outline:none; margin-top:6px;
}
.input:focus { border-color:var(--brand); }
.input.money { font-size:26px !important; font-weight:800; }
.input.quick { font-size:20px !important; }
.label { display:block; margin-top:14px; font-weight:700; color:var(--muted); }
.form > .btn-block:first-of-type { margin-top:18px; }

.seg { display:flex; gap:6px; padding:5px; background:var(--line); border-radius:18px; }
.seg .btn { flex:1; padding:0 8px; border-radius:14px; }
.seg .btn.on { background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.seg .btn.on.chi { color:var(--chi); } .seg .btn.on.thu { color:var(--thu); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--line); font-weight:700; }
.chip.on { background:var(--brand); color:var(--brand-ink); }
.cats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.cat { display:flex; align-items:center; gap:8px; min-height:50px; padding:0 12px; border-radius:16px; background:var(--line); text-align:left; font-size:16px; }
.cat.on { background:var(--brand); color:var(--brand-ink); }

/* ===== Thẻ ===== */
.card { background:var(--card); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
.card-title { font-size:19px; font-weight:800; margin-bottom:10px; }
.hero { background:linear-gradient(145deg, var(--brand), #0A5A4B); color:#fff; }
html[data-theme=dark] .hero { background:linear-gradient(145deg,#12493C,#0D2F27); }
.hero-label { opacity:.9; font-weight:600; }
.big { display:block; font-size:44px; line-height:1.15; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums; margin:4px 0 12px; }
.mid { display:block; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; }
.big-sm { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; }
.hero-row { display:flex; gap:12px; } .hero-row > div { flex:1; background:rgba(255,255,255,.16); border-radius:16px; padding:10px 12px; }
.hero .muted { color:rgba(255,255,255,.85); } .hero .thu, .hero .chi { color:#fff; }
.delta { margin-top:12px; font-weight:700; background:rgba(255,255,255,.18); border-radius:12px; padding:8px 12px; color:#fff !important; }
.monthnav { display:flex; align-items:center; justify-content:space-between; }
.month-label { font-size:20px; font-weight:800; }
.preview { margin-top:14px; padding:14px; border-radius:18px; background:var(--bg); animation:pageIn .25s both; }
.preview > * + * { margin-top:10px; }

.alert { display:flex; gap:12px; align-items:center; text-align:left; width:100%; font-weight:600; border-radius:var(--r); line-height:1.35; font-size:16px; }
.alert.vang { background:var(--warn-bg); color:var(--warn); border:2px solid var(--warn); }
.alert.do { background:var(--do-bg); color:var(--chi); border:2px solid var(--chi); }
.alert-ico { font-size:26px; }
.pulse { animation:pulse 1.8s ease-in-out 3; }
.hint ol { padding-left:20px; margin:8px 0; } .hint li + li { margin-top:6px; }

/* ===== Danh sách giao dịch, vuốt để xóa ===== */
.group-title { display:flex; justify-content:space-between; margin:18px 4px 8px; font-weight:800; font-size:17px; }
.list { padding:6px 0; overflow:hidden; }
.swipe { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; transition:max-height .26s ease, opacity .26s ease, transform .26s ease; max-height:96px; }
.swipe::-webkit-scrollbar { display:none; }
.swipe + .swipe { border-top:1px solid var(--line); }
.swipe-main { flex:0 0 100%; scroll-snap-align:start; display:flex; align-items:center; gap:12px; text-align:left; min-height:72px; border-radius:0; padding:8px 16px; }
.swipe-del { flex:0 0 92px; scroll-snap-align:end; border-radius:0; background:var(--chi); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:15px; }
.swipe.leaving { max-height:0; opacity:0; transform:translateX(-40px); }
.ico { width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:23px; flex:none; }
.tx-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.tx-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.tx-main small { color:var(--muted); font-size:15px; }
.tx-amt { font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stagger > *, .stagger .swipe { animation:slideIn .38s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
.filters > * + * { margin-top:10px; } .filters .input { margin-top:0; } .filters .row .input { flex:1; min-width:0; }

/* ===== Biểu đồ ===== */
.donut-wrap { position:relative; width:230px; max-width:100%; margin:6px auto 12px; }
.donut { display:block; width:100%; transform:rotate(0); }
.donut-seg { animation:donutIn 1s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 90ms); }
@keyframes donutIn { from { stroke-dasharray:0 100; } }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-center strong { font-size:19px; }
.legend { list-style:none; margin:0; padding:0; } .legend li { display:flex; align-items:center; gap:10px; min-height:44px; }
.legend .lg-name { flex:1; } .dot { width:14px; height:14px; border-radius:50%; flex:none; }
.bars { display:flex; align-items:flex-end; gap:3px; height:130px; padding-top:6px; }
.bar-col { flex:1; height:100%; display:flex; align-items:flex-end; }
.bar-col span { display:block; width:100%; min-height:3px; height:var(--h); border-radius:6px 6px 2px 2px; background:var(--chi); transform-origin:bottom; animation:grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 18ms); }
.bars-x { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; margin:4px 0 8px; }
.ring-wrap { position:relative; flex:none; } .ring { width:100%; height:100%; }
.ring-fill { animation:ringIn 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ringIn { from { stroke-dasharray:0 100; } }
.ring-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; }

/* ===== Ngân sách / mục tiêu ===== */
.bar-track { height:16px; border-radius:999px; background:var(--line); overflow:hidden; margin:8px 0; }
.bar-fill { height:100%; border-radius:999px; animation:barIn .9s cubic-bezier(.2,.7,.2,1) both; transition:background .3s; }
.bar-fill.ok { background:var(--thu); } .bar-fill.vang { background:#F2B705; } .bar-fill.do { background:var(--chi); }
.budget-row { display:block; width:100%; text-align:left; padding:12px 16px; border-radius:0; } .budget-row + .budget-row { border-top:1px solid var(--line); }
.budget-row .row { gap:10px; }
.goal > * + * { margin-top:12px; } .goal-need { font-size:17px; }
.naps { list-style:none; padding:0; margin:8px 0 0; } .naps li { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); }
details summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
.kw { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--line); margin-top:6px; }
.file-btn input { display:none; }
.ai-answer { margin-top:12px; padding:12px; border-radius:14px; background:var(--bg); white-space:pre-wrap; }
.card .mud-input-control { margin-top:10px; }

/* ===== Bottom sheet ===== */
.sheet-backdrop { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); animation:fade .25s both; }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:600px; margin:0 auto; max-height:92dvh; display:flex; flex-direction:column;
  background:var(--card); border-radius:28px 28px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.3); animation:sheetUp .34s cubic-bezier(.2,.8,.2,1) both;
}
.sheet-grip { width:44px; height:5px; border-radius:3px; background:var(--line); margin:10px auto 0; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:6px 16px 0 20px; } .sheet-head h2 { font-size:21px; font-weight:800; }
.sheet-body { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px 20px calc(env(safe-area-inset-bottom) + 24px); }
.sheet.out { animation:sheetDown .23s ease-in both; } .sheet-backdrop.out { animation:fadeOut .23s both; }

/* ===== Toast ===== */
.toasts { position:fixed; left:12px; right:12px; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); z-index:60; display:flex; flex-direction:column; gap:8px; max-width:560px; margin:0 auto; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 16px; border-radius:18px; background:#1D2B24; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:toastIn .3s cubic-bezier(.2,.8,.2,1) both; font-weight:600; }
.toast.canh { background:#7A5200; } .toast.loi { background:#9C2A14; animation:toastIn .3s both, shake .5s .3s; }
.toast-text { flex:1; line-height:1.3; } .toast-act { background:rgba(255,255,255,.2); color:#fff; padding:0 14px; } .toast-x { min-width:44px; padding:0; color:#fff; opacity:.8; }

/* ===== Trạng thái rỗng, skeleton, khởi động ===== */
.empty { text-align:center; padding:28px 12px; } .empty h3 { margin-top:8px; font-size:20px; } .empty p { color:var(--muted); margin:6px 0 14px; }
.skeleton { border-radius:var(--r); background:linear-gradient(90deg, var(--line) 25%, var(--card) 50%, var(--line) 75%); background-size:200% 100%; animation:shimmer 1.3s infinite linear; }
.sk-hero { height:190px; } .sk-card { height:130px; } .sk-line { height:18px; margin-top:12px; border-radius:9px; }
.boot { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); }
.boot-logo { width:84px; height:84px; border-radius:24px; background:var(--brand); color:var(--brand-ink); font-size:52px; font-weight:800; display:flex; align-items:center; justify-content:center; animation:pulse 1.6s infinite; }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; z-index:100; padding:14px 16px calc(env(safe-area-inset-bottom) + 14px); background:#FFE1D9; color:#8A1F0A; font-weight:700; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:16px; top:14px; }

/* ===== Confetti ===== */
.confetti { position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden; }
.confetti span { position:absolute; top:-16px; width:10px; height:16px; border-radius:2px; animation:fall linear both; }
@keyframes fall { to { transform:translate3d(var(--dx), 110vh, 0) rotate(var(--r)); opacity:.9; } }

/* ===== Keyframes ===== */
@keyframes pageIn { from { opacity:0; transform:translateY(12px); } }
@keyframes slideIn { from { opacity:0; transform:translateX(24px); } }
@keyframes grow { from { transform:scaleY(0); } }
@keyframes barIn { from { width:0; } }
@keyframes sheetUp { from { transform:translateY(100%); } }
@keyframes sheetDown { to { transform:translateY(100%); } }
@keyframes fade { from { opacity:0; } } @keyframes fadeOut { to { opacity:0; } }
@keyframes toastIn { from { opacity:0; transform:translateY(16px) scale(.97); } }
@keyframes ripple { to { transform:scale(26); opacity:0; } }
@keyframes shimmer { to { background-position:-200% 0; } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(200,56,28,0); } 50% { box-shadow:0 0 0 8px rgba(200,56,28,.18); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}