/* =====================================================================
   GIAO DIỆN KÍNH MỜ (glassmorphism)
   Tệp này nạp SAU styles.css và chỉ thay "lớp da": màu, kính, bóng đổ.
   - Đổi màu nền: sửa các biến --bd-* bên dưới.
   - Dùng ảnh làm nền: đặt --bd-image: url("anh-nen.jpg");
   - Bỏ giao diện kính: xóa dòng <link ... theme-glass.css> trong index.html.
   ===================================================================== */

:root,
:root:not([data-theme="light"]) {
  /* ---- Nền (thay tùy ý) ---- */
  --bd-base: #15123a;
  --bd-1: #ff4fa3;      /* hồng */
  --bd-2: #2ec5ff;      /* xanh trời */
  --bd-3: #7b5cff;      /* tím */
  --bd-4: #10d5a0;      /* xanh ngọc */
  --bd-image: none;     /* VD: url("icons/nen.jpg") */
  --scrim: rgba(9, 8, 32, 0.32);        /* lớp tối phủ toàn nền */
  --panel-scrim: rgba(10, 8, 36, 0.32); /* lớp tối dưới mỗi tấm kính: chữ đạt tương phản ≥ 4.5:1 ở mọi vùng nền */
  --on-backdrop: rgba(255, 255, 255, 0.96); /* chữ nằm trực tiếp trên nền */

  /* ---- Kính ---- */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-strong: rgba(255, 255, 255, 0.18);
  --glass-hover: rgba(255, 255, 255, 0.20);
  --glass-press: rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-blur: 16px;
  --glass-shadow: 0 10px 40px rgba(4, 4, 28, 0.35), 0 2px 8px rgba(4, 4, 28, 0.18);
  --glass-shadow-lift: 0 18px 60px rgba(4, 4, 28, 0.45), 0 4px 14px rgba(4, 4, 28, 0.22);
  --overlay-panel: rgba(22, 18, 58, 0.58);   /* kính tối cho bảng trượt, thông báo */

  /* ---- Màu chữ & trạng thái (thiết kế cho nền tối) ---- */
  --bg: var(--bd-base);
  --surface: var(--glass-bg);
  --surface-2: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.86);
  --line: rgba(255, 255, 255, 0.18);
  --accent: #8cf5d2;
  --accent-soft: rgba(140, 245, 210, 0.18);
  --on-accent: #052219;
  --danger: #ffa3a3;
  --bar: #8cf5d2;
  --pos: #7af7c0;
  --neg: #ffa3a3;
  --warn: #ffd889;
  --notice-bg: rgba(255, 200, 90, 0.16);
  --shadow: none;
  --focus: #ffffff;
  color-scheme: dark;
}

/* ---------- Phông nền rực rỡ + lớp phủ tương phản ---------- */
html { background: var(--bd-base); }
body { background: transparent; color: var(--text); }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    var(--bd-image) center / cover no-repeat,
    radial-gradient(38vmax 38vmax at 12% 8%, var(--bd-1), transparent 70%),
    radial-gradient(34vmax 34vmax at 92% 22%, var(--bd-2), transparent 70%),
    radial-gradient(42vmax 42vmax at 75% 92%, var(--bd-3), transparent 70%),
    radial-gradient(30vmax 30vmax at 8% 78%, var(--bd-4), transparent 70%),
    linear-gradient(160deg, #1d1450 0%, #0e2a52 50%, #2b0f45 100%);
  animation: drift 40s ease-in-out infinite alternate;
}
body::after { z-index: -1; background: var(--scrim); }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); }
  100% { transform: translate3d(2vmax, -2vmax, 0) scale(1.03); }
}

/* ---------- Bề mặt kính dùng chung ---------- */
.card,
.cat,
.key,
.pill,
.seg,
.tabs,
.auth-box,
.btn,
.icon-btn:not(:disabled),
.note:focus,
.chips button,
.chip-input,
.field input,
.field select,
.calc,
.top-nav,
details.list-card {
  background: linear-gradient(var(--glass-bg), var(--glass-bg)), linear-gradient(var(--panel-scrim), var(--panel-scrim));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
}
/* Panel nổi: bóng rộng và mềm tạo chiều sâu nhiều lớp */
.card, .auth-box, details.list-card { box-shadow: var(--glass-shadow); border-radius: 20px; }
.cat, .key, .btn, .pill { box-shadow: 0 6px 22px rgba(4, 4, 28, 0.22); }

/* Kính lồng trong kính: chỉ tô màu, không làm mờ thêm (đỡ nặng máy) */
.card .btn, .sheet .btn, .card .seg, .sheet .seg, .sheet .field input, .sheet .chips button, .sheet .chip-input,
.card .calc, .sheet .calc, .card .icon-btn, .sheet .icon-btn, .card .chips button,
.top-nav .icon-btn, .top-nav .btn {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

/* Thanh tiêu đề dính trên cùng: kính mỏng, không viền hai bên */
.top-nav {
  margin: 0 -16px; padding: 10px 16px 8px;
  border-width: 0 0 1px; border-radius: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), linear-gradient(var(--panel-scrim), var(--panel-scrim));
}
.top-nav h1 { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

/* ---------- Màn Nhập ---------- */
.amount, .today-total b { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.note { color: var(--text); }
.cat { border-radius: 16px; transition: transform .08s, background .15s, box-shadow .15s; }
.cat:hover, .key:hover { background: linear-gradient(var(--glass-hover), var(--glass-hover)), linear-gradient(var(--panel-scrim), var(--panel-scrim)); }
.cat:active, .key:active { background: linear-gradient(var(--glass-press), var(--glass-press)), linear-gradient(var(--panel-scrim), var(--panel-scrim)); }
.cats.ready .cat { background: linear-gradient(rgba(140, 245, 210, 0.20), rgba(140, 245, 210, 0.20)), linear-gradient(var(--panel-scrim), var(--panel-scrim)); border-color: rgba(140, 245, 210, 0.65); }
.key { border-radius: 16px; color: var(--text); }
.key.fn { color: var(--muted); }
.pill.past { background: linear-gradient(rgba(255, 200, 90, 0.26), rgba(255, 200, 90, 0.26)), linear-gradient(var(--panel-scrim), var(--panel-scrim)); color: #fff3d6; border-color: rgba(255, 216, 137, 0.6); }
.today-total, .hint, .amount .cur, .view.scroll > p.muted { color: var(--on-backdrop); }
.amount.empty { color: rgba(255, 255, 255, 0.75); }
.note::placeholder { color: rgba(255, 255, 255, 0.8) !important; }

/* ---------- Thẻ, danh sách, biểu đồ ---------- */
.card h2 { color: var(--muted); }
.summary .big, .saving .s-amount { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); }
.entry, .asset, .day-head { border-color: var(--line); }
.bar-track, .progress { background: rgba(255, 255, 255, 0.14); }
.bar-fill { background: linear-gradient(90deg, #8cf5d2, #6fc8ff); }
.progress div { background: linear-gradient(90deg, #8cf5d2, #6fc8ff); }
.chart .zero-line { stroke: rgba(255, 255, 255, 0.35); }
.badge { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.badge.coin { background: rgba(255, 196, 80, 0.22); color: #ffe3a8; border-color: rgba(255, 216, 137, 0.35); }
.badge.stock { background: rgba(110, 170, 255, 0.24); color: #d7e6ff; border-color: rgba(160, 200, 255, 0.35); }
.side-tag.buy { background: rgba(122, 247, 192, 0.18); }
.side-tag.sell { background: rgba(255, 163, 163, 0.18); }
.saving.matured { border-color: rgba(255, 216, 137, 0.7); }
.highlight { border-color: rgba(140, 245, 210, 0.7); }
.avatar { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid var(--glass-border); }
.mode-badge { background: rgba(140, 245, 210, 0.18); color: var(--accent); }
.mode-badge.local, .notice, .demo-note { background: var(--notice-bg); color: var(--warn); border: 1px solid rgba(255, 216, 137, 0.3); }

/* ---------- Nút ---------- */
.btn { color: var(--text); border-radius: 14px; transition: background .15s, transform .08s; }
.btn:hover { background: linear-gradient(var(--glass-hover), var(--glass-hover)), linear-gradient(var(--panel-scrim), var(--panel-scrim)); }
.card .btn:hover, .sheet .btn:hover { background: rgba(255, 255, 255, 0.18); }
.btn:active { transform: scale(.98); }
.btn.primary,
.card .btn.primary,
.sheet .btn.primary,
.chips button.active,
.side-seg button.active[data-v="buy"] {
  background: linear-gradient(135deg, #9ff8dc, #74cfff);
  color: #04202a; border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 26px rgba(80, 210, 220, 0.35);
}
.btn.sell-btn,
.card .btn.sell-btn,
.sheet .btn.sell-btn,
.side-seg button.active[data-v="sell"] {
  background: linear-gradient(135deg, #ffb3b3, #ff8fb6);
  color: #3a0614; border-color: rgba(255, 255, 255, 0.55);
}
.btn.danger { color: var(--danger); }
.btn.danger.armed { background: linear-gradient(135deg, #ffb3b3, #ff8fb6); color: #3a0614; }
.seg { padding: 3px; }
.seg button { color: var(--muted); }
.seg button.active { background: rgba(255, 255, 255, 0.26); color: #fff; box-shadow: 0 2px 10px rgba(4, 4, 28, 0.25); }
.icon-btn { color: #fff; }
.icon-btn:disabled { color: rgba(255, 255, 255, 0.3); background: transparent; border: 0; }
.link-btn { color: var(--accent); }
.entry .del { color: var(--muted); }
.entry .del:hover { background: rgba(255, 255, 255, 0.12); color: var(--danger); }

/* ---------- Ô nhập ---------- */
.field { color: var(--muted); }
.field input, .field select, .chip-input { color: var(--text); border-radius: 12px; }
.field input::placeholder, .note::placeholder, .chip-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.form-error { color: #ffb8b8; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }

/* ---------- Thanh tab nổi ---------- */
.tabs {
  left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
  border-radius: 22px; padding-bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)), linear-gradient(var(--panel-scrim), var(--panel-scrim));
  box-shadow: var(--glass-shadow-lift);
}
#app { padding-bottom: calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom)); }
.tab { color: rgba(255, 255, 255, 0.86); border-radius: 16px; }
.tab.active { color: #fff; background: rgba(255, 255, 255, 0.16); }
.tab.active svg { stroke: var(--accent); }

/* ---------- Lớp nổi: bảng trượt, thông báo, màn chờ ---------- */
.sheet-backdrop { background: rgba(6, 5, 24, 0.45); }
.sheet {
  background: var(--overlay-panel);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border); border-bottom: 0;
  box-shadow: 0 -10px 60px rgba(4, 4, 28, 0.5);
  color: var(--text);
}
.sheet-head { background: transparent; }
.toast {
  background: var(--overlay-panel); color: #fff;
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-lift);
}
.toast button { color: var(--accent); }
.splash { background: rgba(12, 10, 40, 0.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--muted); }
.logo {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.auth-box { padding: 24px 20px; }

/* ---------- Tiêu điểm bàn phím: luôn nhìn thấy ---------- */
:focus { outline: none; }
:focus-visible,
.field input:focus-visible,
.note:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(140, 245, 210, 0.45) !important;
}
.field input:focus { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.16); }

/* =====================================================================
   PHƯƠNG ÁN DỰ PHÒNG
   ===================================================================== */

/* Trình duyệt không hỗ trợ làm mờ → dùng tấm nền đặc hơn để chữ vẫn rõ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(30, 26, 72, 0.82); --overlay-panel: rgba(22, 18, 58, 0.95); }
  .card .btn, .sheet .btn, .card .seg, .sheet .seg, .sheet .field input { background: rgba(255, 255, 255, 0.10); }
}

/* Người dùng bật "Giảm độ trong suốt" → bỏ kính, dùng nền đặc */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: #2a2560; --glass-hover: #353072; --glass-press: #403a80;
    --overlay-panel: #221d52; --scrim: rgba(9, 8, 32, 0.75);
  }
  .card, .cat, .key, .pill, .seg, .tabs, .auth-box, .btn, .icon-btn, .chips button, .chip-input,
  .field input, .field select, .calc, .top-nav, details.list-card, .sheet, .toast, .splash, .logo {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .top-nav { background: #1d1946; }
  .tabs { background: #2a2560; }
  .sheet-backdrop { background: rgba(6, 5, 24, 0.75); }
  .splash { background: var(--bd-base); }
}

/* Người dùng bật "Giảm chuyển động" → nền đứng yên, bỏ hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Chế độ tương phản cao của Windows → bỏ nền trang trí, dùng màu hệ thống */
@media (forced-colors: active) {
  body::before, body::after { display: none; }
  .card, .cat, .key, .btn, .tabs, .sheet, .toast, .seg, .field input { border: 1px solid CanvasText; backdrop-filter: none; }
  .tab.active, .seg button.active, .btn.primary { border: 2px solid Highlight; }
}

/* Ô "Khác" trong hàng chọn kỳ hạn: giữ dạng viên nhỏ */
.chips .chip-input { width: 84px !important; min-height: 36px !important; padding: 0 10px !important; border-radius: 999px !important; text-align: center; font-size: 14px; }

/* ===== v3 ===== */
/* Bàn phím số: bỏ làm mờ (12 phím mờ cùng lúc làm máy yếu bị giật); lớp tối bên dưới vẫn giữ chữ dễ đọc */
.key { -webkit-backdrop-filter: none; backdrop-filter: none; }
.cat-row input { background: rgba(255, 255, 255, 0.10); border-color: var(--glass-border); }

.bar-row.budget .bar-fill { background: linear-gradient(90deg, #8cf5d2, #6fc8ff); }
.kind-seg button.active[data-kind="in"] { background: linear-gradient(135deg, #9ff8dc, #7af7c0); color: #04210f; }

/* "Giảm hiệu ứng" bật trong Tài khoản → giống chế độ giảm độ trong suốt của hệ thống */
body.no-blur { --glass-bg: #2a2560; --glass-hover: #353072; --glass-press: #403a80; --overlay-panel: #221d52; --scrim: rgba(9, 8, 32, 0.6); }
body.no-blur::before { animation: none; }
body.no-blur .card, body.no-blur .cat, body.no-blur .key, body.no-blur .pill, body.no-blur .seg, body.no-blur .tabs,
body.no-blur .auth-box, body.no-blur .btn, body.no-blur .icon-btn, body.no-blur .chips button, body.no-blur .chip-input,
body.no-blur .field input, body.no-blur .field select, body.no-blur .calc, body.no-blur .top-nav, body.no-blur details.list-card,
body.no-blur .sheet, body.no-blur .toast, body.no-blur .splash, body.no-blur .logo {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.no-blur .top-nav { background: #1d1946; }
body.no-blur .tabs { background: #2a2560; }