/* ============================================================================
   redesign.css — "Violet Fintech" (production, 18/10/2026)
   Thiết kế mới theo ảnh tham khảo Hùng duyệt: nền sáng #F7F7FA, hero gradient
   tím, tờ trắng bo góc trùm lên, thẻ trắng mềm, số lớn đậm, thanh điều hướng
   trắng với nút + gradient tím nâng giữa.
   File nạp CUỐI CÙNG (sau optimize.css) nên thắng mọi CSS trước đó.
   CHỈ đổi trình bày — không đụng dữ liệu / logic / id / tên hàm của app.
   ========================================================================== */

/* ---------- 1) Bảng màu sáng ép cho MỌI chế độ theme (dark/light/auto) ----------
   Thiết kế tham khảo chỉ có bản sáng; các biến này thắng khai báo cũ. */
:root, body.theme-light, body.theme-auto, body.theme-dark {
  --bg-base: #F7F7FA;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card2: #F4F4F8;
  --bg-glass: rgba(255, 255, 255, 0.6);
  --bg-glass-border: #EDEDF2;

  --primary: #7C3AED;
  --primary-light: #8B5CF6;
  --primary-dark: #6D28D9;
  --primary-alpha: rgba(124, 58, 237, 0.12);
  --grad-primary: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);

  --income-color: #10B981;
  --income: #10B981;
  --income-bg: rgba(16, 185, 129, 0.12);

  --expense-color: #F43F5E;
  --expense: #F43F5E;
  --expense-bg: rgba(244, 63, 94, 0.10);

  --balance-color: #F59E0B;
  --balance: #F59E0B;

  --text-1: #14141A;
  --text-2: #5B5B66;
  --text-3: #8E8E9A;

  --border: rgba(20, 20, 40, 0.08);
  --border-color: #EDEDF2;

  --nav-bg: #FFFFFF;

  --shadow-glow: 0 10px 24px rgba(124, 58, 237, 0.07);
  --glass-effect: none;
}

/* ---------- 2) Nền & chữ chung ---------- */
body { background: #F7F7FA !important; color: #14141A !important; }
.content-wrapper { color: #14141A; }
.tab-content { padding-bottom: 132px !important; }
.tab-content.active { color: #14141A; }
.app-branding { color: #C6C6D2 !important; }
.section-title { text-align: left !important; text-transform: none !important; color: #14141A !important; font-size: 1.05rem !important; letter-spacing: 0 !important; font-weight: 800 !important; }
.section-header { margin-bottom: 10px !important; }

/* ==========================================================================
   TAB 1 — Hero gradient tím + tờ trắng bo góc (theo ảnh tham khảo màn Home)
   ========================================================================== */
#tab1 .hero-card {
  background: linear-gradient(135deg, #B79CFC 0%, #9D7BFA 22%, #8B5CF6 45%, #7C3AED 72%, #6D28D9 100%) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 -16px !important;
  padding: 20px 20px 0 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: default !important;
  position: relative;
}
#tab1 .hero-card:hover { transform: none !important; box-shadow: none !important; }
#tab1 .hero-card:active { transform: none !important; }
/* vệt sáng chéo mềm như ảnh tham khảo */
#tab1 .hero-card::before {
  content: ''; position: absolute; top: -70px; right: 8%; width: 130px; height: 340px;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0));
  transform: rotate(22deg); border-radius: 0; pointer-events: none;
}
#tab1 .hero-card::after {
  content: ''; position: absolute; top: -90px; left: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0));
  pointer-events: none;
}
/* hàng ngày: nút tròn kính + pill ngày */
#tab1 .hero-date-nav { justify-content: center; margin-bottom: 10px; position: relative; z-index: 1; }
#tab1 .date-nav-btn {
  background: rgba(255,255,255,0.22) !important; color: #fff !important;
  width: 32px; height: 32px; font-size: 0.72rem; border: none !important; border-radius: 50% !important;
}
#tab1 .hero-date-tap { position: relative; display: inline-flex; align-items: center; }
#tab1 .hero-date {
  background: rgba(255,255,255,0.20); color: #fff; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; font-size: 0.8rem; margin: 0 4px;
}
#tab1 .hero-date-nav .fa-caret-down { color: rgba(255,255,255,0.7) !important; }
#tab1 .hero-label { color: rgba(255,255,255,0.85) !important; justify-content: center; font-size: 0.75rem; position: relative; z-index: 1; }
#tab1 .hero-label .privacy-toggle-btn { color: rgba(255,255,255,0.85) !important; }
/* số lớn trắng */
#heroExpenseMain {
  font-size: 3rem !important; font-weight: 800 !important; color: #fff !important;
  justify-content: center; text-align: center; margin: 2px 0 8px !important;
  letter-spacing: -0.03em !important; position: relative; z-index: 1;
}
#heroExpenseMain span { font-size: 1.5rem !important; }
/* pill so sánh (thắng cả style inline màu của getCompareHTML) */
#heroExpenseCompare { justify-content: center; margin-bottom: 22px !important; position: relative; z-index: 1; }
#heroExpenseCompare span {
  background: rgba(255,255,255,0.22) !important; color: #fff !important;
  padding: 7px 16px !important; border-radius: 999px !important;
  box-shadow: none !important; font-size: 0.75rem !important; font-weight: 600 !important;
}
/* tờ trắng bo góc chứa 2 thẻ mềm */
#tab1 .hero-sub {
  display: flex; gap: 12px; background: #fff;
  border-radius: 28px 28px 0 0;
  margin: 0 -20px !important; padding: 22px 20px 26px;
  position: relative; z-index: 2;
}
#tab1 .hero-sub .hero-stat {
  flex: 1; background: #F4F4F8; border-radius: 18px; padding: 13px 14px;
}
#tab1 .hero-stat-label { color: #8E8E9A !important; font-size: 0.72rem !important; margin-bottom: 5px !important; font-weight: 600; }
#tab1 .hero-stat-label i { color: #8B5CF6; margin-right: 5px; }
#tab1 .hero-stat-val { color: #14141A !important; font-size: 1.12rem !important; font-weight: 800 !important; }
#tab1 .hero-stat-val span { font-size: 0.8rem !important; font-weight: 700 !important; color: #8E8E9A !important; }
#tab1 .hero-sub .divider-v { display: none !important; }
/* tờ trắng nối dài xuống danh sách */
#tab1 > .section-header,
#tab1 > #loadingTab1,
#tab1 > #placeholderTab1,
#tab1 > #transactionsContainer,
#tab1 > #pagination {
  background: #fff; margin-left: -16px; margin-right: -16px;
  padding-left: 16px; padding-right: 16px;
}
#tab1 > .section-header { padding-top: 6px; padding-bottom: 10px; margin-top: 0 !important; margin-bottom: 0 !important; }
#tab1 > #transactionsContainer { padding-bottom: 44px; }

/* ---------- Thẻ giao dịch trắng mềm (giống thẻ Transactions ảnh mẫu) ---------- */
.tx-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important;
  border-radius: 22px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; margin-bottom: 12px !important;
  cursor: pointer;
}
.tx-card:hover { transform: none !important; box-shadow: 0 10px 24px rgba(124,58,237,0.10) !important; border-color: #E2D9FB !important; }
.tx-card:active { transform: scale(0.99) !important; }
.tx-icon-wrap { border-radius: 16px !important; width: 46px; height: 46px; }
.tx-title { color: #14141A !important; font-weight: 700 !important; }
.tx-date, .tx-note { color: #8E8E9A !important; }
.tx-amount.expense { color: #F43F5E !important; font-weight: 800 !important; }
.tx-amount.income { color: #10B981 !important; font-weight: 800 !important; }
.tx-badge { border-radius: 999px !important; font-size: 0.68rem !important; padding: 3px 10px !important; font-weight: 600 !important; }
.tx-badge-neutral, .tx-badge.tx-badge-neutral { background: #F4F4F8 !important; color: #5B5B66 !important; }
.tx-badge.expense { background: rgba(244,63,94,0.10) !important; color: #F43F5E !important; }
.tx-badge.income { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
/* ẩn nút sửa/xóa + dòng STT cho thoáng như ảnh tham khảo; bấm vào thẻ để sửa (xem initTxCardTapToEdit) */
.tx-card .tx-actions, .tx-card .tx-id-row { display: none !important; }

/* ==========================================================================
   TAB 2 — Báo cáo (segmented control + thẻ donut + thẻ danh mục + lịch)
   ========================================================================== */
#tab2 .section-header { margin-bottom: 12px !important; }
/* segmented control như ảnh mẫu */
#tab2 .period-pills {
  background: #F1F1F6 !important; border-radius: 999px !important;
  padding: 4px !important; gap: 2px !important; margin-bottom: 14px; border: none !important;
}
#tab2 .period-pill {
  flex: 1 1 0; text-align: center; border-radius: 999px !important;
  color: #8E8E9A !important; font-weight: 700 !important; font-size: 0.8rem !important;
  padding: 10px 2px !important; background: transparent !important; border: none !important;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
#tab2 .period-pill.active {
  background: #fff !important; color: #14141A !important;
  box-shadow: 0 4px 14px rgba(20,20,40,0.10) !important;
}
/* 3 thẻ thống kê */
#tab2 .stat-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important;
  border-radius: 22px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; padding: 14px 12px !important;
}
#tab2 .stat-card:hover { transform: none !important; }
#tab2 .stat-num { color: #14141A !important; font-size: 1.02rem !important; font-weight: 800 !important; }
#tab2 .stat-num span { color: #8E8E9A !important; font-size: 0.72rem !important; }
#tab2 .stat-compare { color: #8E8E9A !important; font-size: 0.68rem !important; }
#tab2 .stat-header .stat-tag { color: #8E8E9A !important; font-weight: 600 !important; }
#tab2 .stat-header i { color: #8B5CF6 !important; }
/* nút xuất */
#tab2 .btn-soft {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  border-radius: 18px !important; box-shadow: 0 6px 16px rgba(124,58,237,0.05) !important;
  color: #14141A !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 11px 6px !important; font-size: 0.85rem !important; font-weight: 700 !important;
}
/* thẻ biểu đồ */
#tab2 .chart-container { margin-bottom: 16px; }
#tab2 .chart-placeholder {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important;
  border-radius: 28px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#tab2 .chart-placeholder:hover { transform: none !important; }
#tab2 .pie-layout-wrapper { flex-direction: column !important; align-items: center !important; padding: 20px 16px 22px !important; gap: 0 !important; }
#tab2 .pie-layout-wrapper .pie-chart-inner {
  flex: 0 0 170px !important; width: 170px !important; height: 170px !important;
  min-width: 170px !important; min-height: 170px !important;
}
#tab2 .pie-layout-wrapper .pie-chart-inner:hover { transform: none !important; }
#tab2 #monthlyCustomLegend { display: none !important; }
#tab2 .chart-title { color: #14141A !important; font-weight: 800 !important; text-transform: none !important; }
#tab2 #pieChartTitleTab2 { text-align: center !important; width: 100%; margin-bottom: 6px !important; }
#tab2 #chartTitleTab2 { margin-top: 14px !important; }
/* nút chuyển kiểu biểu đồ */
#tab2 .chart-toggle-btn {
  background: #F4F4F8 !important; border: none !important; color: #8B5CF6 !important;
  width: 36px; height: 36px; border-radius: 50% !important; box-shadow: none !important;
}
/* thẻ danh mục + thanh tiến trình (giống thẻ category ảnh mẫu) */
#monthlyCategoryProgressList { margin-top: 4px; }
#monthlyCategoryProgressList .cat-progress-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 8px 20px rgba(124,58,237,0.05) !important;
  border-radius: 20px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; padding: 11px 16px !important; margin-bottom: 10px !important;
  cursor: pointer;
}
#monthlyCategoryProgressList .cat-progress-card:hover { transform: none !important; border-color: #E2D9FB !important; }
#monthlyCategoryProgressList .cat-progress-icon { border-radius: 14px !important; width: 40px !important; height: 40px !important; font-size: 1rem !important; }
#monthlyCategoryProgressList .cat-progress-title { color: #14141A !important; font-weight: 700 !important; }
#monthlyCategoryProgressList .cat-progress-amt { font-weight: 800 !important; }
#monthlyCategoryProgressList .cat-progress-amt span { font-size: 0.72rem !important; font-weight: 700 !important; }
#monthlyCategoryProgressList .cat-progress-bar-bg { background: #F1F1F6 !important; height: 6px !important; border-radius: 4px !important; margin-top: 8px !important; }
#monthlyCategoryProgressList .cat-progress-bar-fill { border-radius: 4px !important; }
/* ---------- Lịch ---------- */
#calendarWidget .cal-ctrl-bar {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 6px 16px rgba(124,58,237,0.05) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
}
#calendarWidget .cal-ctrl-icon, #calendarWidget #calCtrlLabel { color: #14141A !important; }
#calendarWidget .cal-ctrl-arrow, #calendarWidget .cal-ctrl-toggle {
  background: #F4F4F8 !important; border: none !important; color: #8B5CF6 !important; box-shadow: none !important;
}
#calendarWidget #calendarStatbox.info-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important;
  border-radius: 28px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; padding: 16px 14px !important; margin-bottom: 16px;
}
#calendarWidget .calendar-header span { color: #8E8E9A !important; font-weight: 700; }
#calendarWidget .calendar-day { border-color: #F3F3F7 !important; background: #fff !important; border-radius: 12px !important; }
#calendarWidget .calendar-day .calendar-date { color: #14141A !important; font-weight: 700 !important; }
#calendarWidget .calendar-day .calendar-lunar { color: #B9B9C4 !important; }
#calendarWidget .calendar-day .cal-amt-col .calendar-balance { font-size: 0.6rem !important; font-weight: 700 !important; }
#calendarWidget .calendar-day .cal-amt-col .calendar-balance.negative { color: #F43F5E !important; }
#calendarWidget .calendar-day .cal-amt-col .calendar-balance.positive { color: #10B981 !important; }
#calendarWidget .calendar-day.selected-day { background: #fff !important; outline: none !important; }
#calendarWidget .calendar-day.selected-day .calendar-date {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: #fff !important;
  border-radius: 50%; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
#calendarWidget .calendar-day.today { background: #F4F0FE !important; }
#calendarWidget .calendar-day.today .calendar-date { color: #7C3AED !important; }

/* ==========================================================================
   TAB 3 — Từ khóa
   ========================================================================== */
#tab3 .field-label { color: #8E8E9A !important; font-weight: 600 !important; }
#tab3 .field-input {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  border-radius: 16px !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: #14141A !important; font-size: 0.95rem !important;
}
#tab3 .field-input:focus { border-color: #8B5CF6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.12) !important; }
#addKeywordBtn {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
  border-radius: 999px !important; color: #fff !important; border: none !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.35) !important; font-weight: 800 !important;
}
#addKeywordBtn:active { transform: scale(0.97) !important; }
#fetchKeywordsBtn {
  background: #fff !important; border: 1px solid #EDEDF2 !important; border-radius: 999px !important;
  color: #14141A !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-weight: 700 !important;
}
#tab3 .keyword-group-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important;
  border-radius: 22px !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; padding: 14px 16px !important;
}
#tab3 .keyword-group-card:hover { transform: none !important; border-color: #E2D9FB !important; }
#tab3 .keyword-group-card .tx-icon-wrap { border-radius: 16px !important; width: 44px; height: 44px; }
#tab3 .keyword-group-card .tx-title { color: #14141A !important; font-weight: 700 !important; }
#tab3 .keyword-group-card .tx-id-row { color: #8E8E9A !important; display: block !important; }
#tab3 .keyword-group-card .chevron { color: #B9B9C4 !important; }
#tab3 .keyword-tag {
  background: #F4F4F8 !important; color: #14141A !important;
  border: 1px solid #EDEDF2 !important; border-radius: 12px !important;
}
#tab3 .accordion-body { color: #5B5B66 !important; }

/* ==========================================================================
   THANH ĐIỀU HƯỚNG DƯỚI + NÚT + TRÒN NÂNG GIỮA (theo ảnh tham khảo)
   ========================================================================== */
.bottom-nav {
  position: fixed !important; bottom: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important; width: 100% !important; max-width: 430px !important;
  background: #fff !important; border: none !important; border-top: 1px solid #EDEDF2 !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -12px 32px rgba(20,20,40,0.08) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1000 !important; gap: 0 !important;
}
.bottom-nav::before, .bottom-nav::after { display: none !important; }
.bottom-nav .nav-tabs-group {
  background: transparent !important; border: none !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 0 !important; height: auto !important; padding: 0 !important;
  flex: 1 1 auto !important; display: flex !important; align-items: center !important;
  justify-content: space-around !important; container-type: normal !important;
}
.bottom-nav .nav-btn { height: auto !important; padding: 4px 2px !important; flex: 0 1 auto !important; min-width: 64px; }
.bottom-nav .nav-icon-wrap { color: #B9B9C4 !important; background: transparent !important; font-size: 1.15rem !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; }
.bottom-nav .nav-label { color: #B9B9C4 !important; font-size: 0.68rem !important; margin-top: 2px !important; font-weight: 600; }
.bottom-nav .nav-btn:hover .nav-icon-wrap { color: #8B5CF6 !important; background: transparent !important; transform: none !important; }
.bottom-nav .nav-btn:hover .nav-label { color: #8B5CF6 !important; }
.bottom-nav .nav-btn.active { background: transparent !important; }
.bottom-nav .nav-btn.active .nav-icon-wrap { color: #14141A !important; }
.bottom-nav .nav-btn.active .nav-label { color: #14141A !important; font-weight: 800; }
.bottom-nav .nav-spacer { flex: 0 0 76px; }
/* nút + tròn nâng giữa thanh */
#fabBtn {
  position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
  bottom: 30px !important; width: 60px !important; height: 60px !important;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
  border: none !important; border-radius: 50% !important; color: #fff !important;
  font-size: 1.35rem !important;
  box-shadow: 0 14px 30px rgba(124,58,237,0.45), inset 0 1px 1px rgba(255,255,255,0.3) !important;
  z-index: 1001 !important; flex-shrink: 0 !important;
}
#fabBtn:hover { box-shadow: 0 16px 34px rgba(124,58,237,0.55) !important; filter: none !important; }
#fabBtn:active { transform: translateX(-50%) scale(0.94) !important; }
#fabBtn.active { transform: translateX(-50%) rotate(45deg) !important; }
#navIndicator, .nav-indicator { display: none !important; }
/* menu FAB căn giữa trên nút + */
.fab-backdrop { background: rgba(20,20,40,0.35) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.fab-menu {
  right: auto !important; left: 50% !important;
  transform: translateX(-50%) translateY(24px) scale(0.96) !important;
  transform-origin: bottom center !important; align-items: center !important; bottom: 108px !important;
}
.fab-menu.show { transform: translateX(-50%) translateY(0) scale(1) !important; }
.fab-item-label {
  background: #fff !important; color: #14141A !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 8px 20px rgba(124,58,237,0.12) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.fab-item-icon {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 8px 20px rgba(124,58,237,0.12) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: #8B5CF6 !important;
}

/* ==========================================================================
   MODAL / SHEET / POPUP — cùng ngôn ngữ thẻ trắng mềm
   ========================================================================== */
#modalOverlay, .overlay { background: rgba(20,20,40,0.45) !important; }
.modal-sheet {
  background: #fff !important; border: none !important; border-top: 1px solid #EDEDF2 !important;
  box-shadow: 0 -16px 48px rgba(20,20,40,0.14) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 28px 28px 0 0 !important;
}
.modal-handle { background: #E2E2EA !important; }
.modal-title { color: #14141A !important; font-weight: 800 !important; text-transform: none !important; }
.modal-close-x { background: #F4F4F8 !important; border: none !important; color: #14141A !important; }
.modal-close-x:hover { background: rgba(244,63,94,0.10) !important; color: #F43F5E !important; }

/* form: nhãn + ô nhập + nút */
.field-label { color: #8E8E9A !important; font-weight: 600 !important; }
.field-input, .settings-select {
  background: #F4F4F8 !important; border: 1px solid transparent !important;
  border-radius: 16px !important; color: #14141A !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-size: 0.95rem !important;
}
.field-input:focus, .settings-select:focus { border-color: #8B5CF6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.12) !important; outline: none !important; }
.field-input::placeholder { color: #B9B9C4 !important; }
.type-pill {
  background: #F4F4F8 !important; border: 1px solid transparent !important; color: #5B5B66 !important;
  border-radius: 16px !important; font-weight: 700 !important;
}
.type-pill.expense-active { background: rgba(244,63,94,0.10) !important; color: #F43F5E !important; border-color: rgba(244,63,94,0.25) !important; }
.type-pill.income-active, .type-pill:not(.expense-active).active-pill { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; border-color: rgba(16,185,129,0.3) !important; }
.btn-save {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important; color: #fff !important;
  border: none !important; border-radius: 16px !important; font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.30) !important;
}
.btn-cancel {
  background: #F4F4F8 !important; color: #14141A !important; border: none !important;
  border-radius: 16px !important; font-weight: 700 !important; box-shadow: none !important;
}
.btn-danger, .btn-danger-outline { border-radius: 16px !important; font-weight: 800 !important; }
.btn-danger { background: #F43F5E !important; color: #fff !important; border: none !important; }
.btn-danger-outline { background: rgba(244,63,94,0.08) !important; color: #F43F5E !important; border: 1px solid rgba(244,63,94,0.25) !important; }
.modal-actions { border-top: 1px solid #EDEDF2 !important; }

/* tìm kiếm */
#searchModal .field-input { background: #F4F4F8 !important; }
#searchModal .empty-state { color: #8E8E9A !important; }

/* chi tiết ngày / danh mục */
#detailModal .detail-total-card > div { border-radius: 18px !important; }
#detailModalTitle { color: #14141A !important; font-weight: 800 !important; }
#detailListTitle { color: #14141A !important; font-weight: 800 !important; text-transform: none !important; }

/* hộp thoại xác nhận xóa */
.confirm-dialog { background: #fff !important; border-radius: 24px !important; box-shadow: 0 20px 60px rgba(20,20,40,0.20) !important; }
.confirm-title { color: #14141A !important; }
.confirm-desc { color: #5B5B66 !important; }

/* quản lý danh mục (icon picker) */
.icon-grid { background: #F4F4F8 !important; border-radius: 18px !important; }
.icon-item { background: #fff !important; border: 1px solid #EDEDF2 !important; border-radius: 14px !important; color: #14141A !important; }
.icon-item.selected { border-color: #8B5CF6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important; }
.tag-input-container { background: #F4F4F8 !important; border: 1px solid transparent !important; border-radius: 16px !important; }
.tag-input-field { color: #14141A !important; }

/* ==========================================================================
   TRANG TOÀN MÀN HÌNH (Cài đặt / Giới thiệu)
   ========================================================================== */
.fullscreen-page { background-color: #F7F7FA !important; background-image: none !important; }
.fs-title { color: #14141A !important; text-transform: none !important; }
.fs-back { background: #fff !important; border: 1px solid #EDEDF2 !important; color: #14141A !important; box-shadow: 0 4px 12px rgba(124,58,237,0.06) !important; }
.settings-group-title { color: #14141A !important; }
.settings-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important; border-radius: 22px !important;
}
.settings-info { color: #14141A !important; }
.settings-info i { color: #8B5CF6 !important; }
.settings-row { border-bottom: 1px solid #F3F3F7 !important; }
.settings-row.danger-row { color: #F43F5E !important; }
.toggle-switch .slider { background: #E2E2EA !important; }
.toggle-switch input:checked + .slider { background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important; }
.info-card {
  background: #fff !important; border: 1px solid #EDEDF2 !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.06) !important; border-radius: 22px !important;
}
.info-text, .info-list { color: #5B5B66 !important; }
.chart-title { color: #14141A !important; font-weight: 800 !important; }

/* ==========================================================================
   MISC — toast, trạng thái rỗng, spinner, phân trang
   ========================================================================== */
.premium-toast {
  background: #14141A !important; color: #fff !important; border: none !important;
  box-shadow: 0 14px 34px rgba(20,20,40,0.30) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
}
.premium-toast .toast-message { color: #fff !important; }
.premium-toast .toast-progress { background: #8B5CF6 !important; }
.empty-state {
  background: #fff !important; border: 1px dashed #E2E2EA !important; border-radius: 22px !important;
  color: #8E8E9A !important; box-shadow: none !important;
}
.loading-spinner { color: #8B5CF6 !important; }
.pagination-container { padding-bottom: 8px !important; }
.pagination-btn {
  background: #fff !important; border: 1px solid #EDEDF2 !important; color: #14141A !important;
  border-radius: 14px !important; box-shadow: 0 4px 12px rgba(124,58,237,0.06) !important;
}
.pagination-btn:disabled { opacity: 0.4; }
.pagination-info { color: #8E8E9A !important; font-weight: 700 !important; }

/* popup "Có gì mới" của app: giữ nguyên nội dung/logic, làm mềm khung ngoài */
#whatsnewOverlay > div { border-radius: 24px !important; box-shadow: 0 24px 70px rgba(20,20,40,0.30) !important; overflow: hidden; }

/* an toàn vùng tai thỏ cho tờ trắng tab1 khi cuộn */
#tab1 > #transactionsContainer { border-radius: 0; }