:root {
  /* Telegram theme variables (with sensible dark fallbacks) */
  --bg: var(--tg-theme-bg-color, #0e1014);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #181b22);
  --text: var(--tg-theme-text-color, #f2f4f8);
  --hint: var(--tg-theme-hint-color, #8b94a3);
  --link: var(--tg-theme-link-color, #5bc0eb);
  --button: var(--tg-theme-button-color, #2ea3ff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --destructive: var(--tg-theme-destructive-text-color, #ff5b5b);
  --success: #27c281;
  --warn: #f5a524;

  /* Surfaces */
  --surface-1: var(--secondary-bg);
  --surface-2: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.32);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 20px;  --s6: 28px;  --s7: 40px;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Type scale */
  --fs-display: 32px;
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 11px;

  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-top: env(safe-area-inset-top, 0);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: contain;
}

body { min-height: 100vh; min-height: 100dvh; }
#app[hidden] { display: none; }

main {
  padding: var(--s2) var(--s4);
  padding-bottom: calc(112px + var(--safe-bottom));
}

button { font-family: inherit; }

a { color: var(--link); text-decoration: none; }
a:active { opacity: 0.7; }

/* ==========================================================
   TOPBAR
   ========================================================== */
.topbar {
  padding: calc(var(--s5) + var(--safe-top)) var(--s4) var(--s4);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.topbar .brand {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--hint);
  text-transform: uppercase;
}
.topbar .balance {
  font-size: var(--fs-display);
  font-weight: 700;
  margin-top: var(--s1);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ==========================================================
   VIEWS
   ========================================================== */
.view { display: none; animation: fade-in 0.18s ease; }
.view.active { display: block; }
.view-title { margin: var(--s2) var(--s1) var(--s4); font-size: var(--fs-h2); font-weight: 600; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   LISTS / CARDS
   ========================================================== */
.list { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  transition: transform 0.08s ease, background 0.12s ease;
  position: relative;
}
.card:active { transform: scale(0.99); background: var(--surface-2); }
.card .name { font-weight: 600; line-height: 1.3; font-size: var(--fs-body); }
.card .meta { font-size: var(--fs-small); color: var(--hint); margin-top: 2px; }
.card .amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-body); }
.card .amount.debit { color: var(--destructive); }
.card .amount.credit { color: var(--success); }
.card .right { display: flex; align-items: center; gap: var(--s2); }
.amount-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.card-last4 {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-tiny); font-weight: 500;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
}
.amount-sub {
  font-size: var(--fs-tiny); color: var(--hint); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.card.archived { opacity: 0.5; }
.card.archived .name::after {
  content: " · архів"; color: var(--hint); font-weight: 400; font-size: var(--fs-tiny);
}

.tx-card { cursor: pointer; }

/* ==========================================================
   WALLET ICON
   ========================================================== */
.wallet-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(46, 163, 255, 0.14);
  flex-shrink: 0;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn-primary, .btn-secondary {
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  padding: 14px var(--s4);
  transition: opacity 0.1s ease, transform 0.06s ease;
  letter-spacing: 0.1px;
}
.btn-primary:active, .btn-secondary:active { transform: scale(0.98); opacity: 0.92; }
.btn-primary { background: var(--button); color: var(--button-text); }
.btn-secondary { background: var(--surface-1); color: var(--text); border: 1px solid var(--border); }
.btn-block { width: 100%; }
.btn-link {
  background: transparent; border: none; color: var(--link);
  font-size: var(--fs-small); padding: 10px; cursor: pointer; width: 100%;
  margin-bottom: var(--s2); font-weight: 500;
}

.btn-sync {
  background: transparent;
  color: var(--link);
  border: 1px solid var(--link);
  border-radius: 999px;
  width: 32px; height: 32px;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-sync:disabled { opacity: 0.5; cursor: wait; }

/* ==========================================================
   FORMS
   ========================================================== */
.form { display: flex; flex-direction: column; gap: var(--s3); }
.form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-small);
  color: var(--hint);
}
.form input, .form select, .form textarea {
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px var(--s3);
  font-size: var(--fs-body);
  font-family: inherit;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { resize: vertical; min-height: 60px; line-height: 1.4; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--button);
}
.form input::placeholder, .form textarea::placeholder {
  color: var(--hint); opacity: 0.55;
}

/* Native dropdowns inside Telegram WebView default-render the option list
   with white background even on dark theme — force readable colors. */
select option {
  background-color: var(--card);
  color: var(--text);
  padding: 6px 10px;
}
select option:checked,
select option:hover {
  background-color: var(--button);
  color: var(--button-text);
}

/* ==========================================================
   CUSTOM SELECT (replaces native <select> for theme-controlled UX)
   ========================================================== */
.cs-wrap { width: 100%; }
.cs-btn {
  width: 100%; padding: var(--s2) var(--s3);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r2);
  font-size: var(--fs-base); font-family: inherit;
  text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cs-btn-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-btn-text.cs-placeholder { color: var(--hint); }
.cs-btn-arrow { color: var(--hint); font-size: 12px; flex: 0 0 auto; }

/* Native <dialog>-based picker. ID #csDialog / class .cs-dlg2. Sits in the
   browser TOP LAYER so it renders above any parent modal that triggered
   it (z-index would not be enough for that). */
.cs-dlg2 {
  /* Reset the default <dialog> centred-box styling. We use the dialog
     itself as a full-viewport overlay and put the visible content inside
     .cs-panel. */
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  padding: 0;
  margin: 0;
  max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; height: 100dvh;
  /* show as flex when open */
}
.cs-dlg2[open] {
  display: flex;
  align-items: flex-end;        /* mobile: panel docked to bottom */
  justify-content: center;
}
.cs-dlg2::backdrop {
  /* Hide default backdrop — we already dim via the dialog's own bg. */
  background: transparent;
}
.cs-panel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100vw;
  max-height: 92vh; max-height: 92dvh;
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
  box-shadow: var(--shadow-md);
  animation: cs-slide-up 0.18s ease;
}
@keyframes cs-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cs-head {
  display: flex; gap: var(--s2); align-items: center;
}
.cs-search {
  flex: 1; padding: var(--s2) var(--s3);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r2);
  font-size: var(--fs-base);
}

/* Legacy class names — keep so existing CSS rules referring to .cs-dialog
   etc. still apply if anything imports them. */
.cs-dialog { display: none; }    /* old element no longer used */
.cs-dialog-head {
  display: flex; gap: var(--s2); align-items: center;
}
.cs-dialog-head input[type="search"] {
  flex: 1; padding: var(--s2) var(--s3);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r2);
  font-size: var(--fs-base);
}
.cs-close {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  width: 36px; height: 36px; border-radius: var(--r2);
  font-size: 16px; cursor: pointer;
}
.cs-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.cs-group {
  font-size: var(--fs-tiny); color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: var(--s2) var(--s3) 4px;
}
.cs-item {
  background: var(--card); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  text-align: left; font-size: var(--fs-base); font-family: inherit;
  cursor: pointer;
}
.cs-item:active { background: var(--surface-2); }
.cs-item.cs-selected {
  background: var(--button); color: var(--button-text);
  font-weight: 600;
}
.cs-empty { color: var(--hint); padding: var(--s4) var(--s2); text-align: center; }

@media (max-width: 520px) {
  /* Bottom-sheet panel on mobile. The dialog backdrop catches taps above it. */
  .cs-panel {
    max-height: 80vh; max-height: 80dvh;
  }
}
@media (min-width: 521px) {
  /* Centered on desktop with rounded corners on all sides. */
  .cs-dlg2[open] { align-items: center; }
  .cs-panel {
    width: min(460px, 94vw);
    max-height: 80vh;
    border-radius: var(--r-lg);
    animation: cs-fade-in 0.16s ease;
  }
  @keyframes cs-fade-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
}

.form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238b94a3' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
}

.row { display: flex; gap: var(--s3); }
.row > * { flex: 1; }

.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: var(--s2) !important;
  font-size: var(--fs-body) !important;
  color: var(--text) !important;
  padding: var(--s2) 0;
}
.checkbox-row input { width: auto; flex: 0; }

/* ==========================================================
   DIALOGS — bottom-sheet on mobile, centered on wider screens
   ========================================================== */
dialog {
  border: none;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--text);
  padding: var(--s4);
  width: min(94vw, 460px);
  max-width: 100vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  /* Top-layer should beat any z-index, but iOS Telegram WebView ignores it
     and paints fixed elements above. Force a very high z-index defensively. */
  z-index: 9000;
}
/* Two layers of dimming so the area outside the dialog is unambiguously
   inactive even when the WebView ignores ::backdrop and top-layer:
     1. ::backdrop  — proper browsers
     2. box-shadow  — every other case (covers any z-index < 9000) */
dialog[open] {
  box-shadow: var(--shadow-md), 0 0 0 100vmax rgba(0,0,0,.55);
}
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.dlg-title { margin: 0 0 var(--s3); font-size: var(--fs-h2); font-weight: 600; }

@media (max-width: 520px) {
  dialog {
    margin: 0 0 0 0;
    position: fixed;
    bottom: 0; top: auto; left: 0; right: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--s4) var(--s4) calc(var(--s4) + var(--safe-bottom));
    animation: sheet-in 0.22s ease-out;
  }
  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  /* Drag-handle pill */
  dialog::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 0 auto var(--s3);
  }
}

/* ==========================================================
   HINTS / EMPTY STATES
   ========================================================== */
.hint {
  color: var(--hint);
  font-size: var(--fs-small);
  line-height: 1.5;
  padding: var(--s3);
  background: var(--surface-1);
  border-radius: var(--r-sm);
}
.hint a { color: var(--link); font-weight: 500; }
.hint-warn { background: rgba(245, 165, 36, 0.13); color: var(--warn); border: 1px solid rgba(245, 165, 36, 0.25); }
.hint-info { background: rgba(46, 163, 255, 0.10); color: var(--text); }

.muted {
  color: var(--hint);
  font-size: var(--fs-body);
  text-align: center;
  padding: var(--s7) var(--s4);
  background: var(--surface-1);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
}
.muted-emoji { font-size: 44px; display: block; margin-bottom: var(--s3); opacity: 0.85; }

/* ==========================================================
   SKELETON LOADER
   ========================================================== */
.skel {
  display: block;
  background: linear-gradient(90deg, var(--surface-1) 0%, rgba(255,255,255,0.06) 50%, var(--surface-1) 100%);
  background-size: 200% 100%;
  animation: skel-shine 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes skel-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-card {
  height: 64px; margin-bottom: var(--s2);
}

/* ==========================================================
   BUDGETS bar
   ========================================================== */
.budget-card .bar {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--border); margin: 4px 0; overflow: hidden;
}
.budget-card .bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--success); transition: width 0.3s;
}
.budget-card.over .bar > span { background: var(--destructive); }

/* ==========================================================
   ONBOARDING (empty Wallets state)
   ========================================================== */
.onboarding { display: flex; flex-direction: column; gap: var(--s2); }
.onb-hero { text-align: center; padding: var(--s3) var(--s2); }
.onb-emoji { font-size: 48px; margin-bottom: var(--s2); }
.onb-hero h2 { margin: 0 0 var(--s2); font-size: var(--fs-h2); }
.onb-hero p { color: var(--hint); margin: 0; font-size: var(--fs-small); line-height: 1.4; }
.onb-tile {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r3);
  padding: var(--s3); text-align: left; width: 100%; cursor: pointer;
  color: var(--text); font-family: inherit;
  transition: transform 0.08s, background 0.1s;
}
.onb-tile:active { transform: scale(0.98); background: var(--bg); }
.onb-ico { font-size: 32px; flex: 0 0 auto; }
.onb-title { font-weight: 600; font-size: var(--fs-base); }
.onb-sub { color: var(--hint); font-size: var(--fs-tiny); margin-top: 2px; }

/* ==========================================================
   WALLET DETAIL action sheet (ZenMoney-style)
   ========================================================== */
.wd-form { gap: var(--s3); }
.wd-header {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) 0;
}
.wd-ico {
  font-size: 28px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border-radius: 10px;
}
.wd-name {
  flex: 1; min-width: 0; font-size: 18px; font-weight: 600;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-sync {
  background: transparent; border: 0; color: var(--link);
  font-size: 22px; cursor: pointer; width: 36px; height: 36px;
}

.wd-balances {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r3); padding: var(--s3); text-align: center;
}
.wd-bal-block { padding: 6px 0; }
.wd-bal-label {
  color: var(--hint); font-size: var(--fs-tiny);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.wd-bal-value {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wd-bal-value.positive { color: var(--success); }
.wd-bal-value.negative { color: var(--destructive); }
.wd-bal-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}

.wd-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
}
.wd-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s3) var(--s2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); cursor: pointer;
  color: var(--text); font-family: inherit;
  transition: transform 0.08s, background 0.1s;
}
.wd-action:active { transform: scale(0.96); background: var(--bg); }
.wd-action-ico {
  font-size: 22px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 10px;
}
.wd-action-lbl { font-size: var(--fs-tiny); text-align: center; line-height: 1.2; }

.wd-edit .wd-action-ico { background: rgba(170, 90, 220, 0.18); }
.wd-archive .wd-action-ico { background: rgba(150, 150, 150, 0.18); }
.wd-ops .wd-action-ico { background: rgba(0, 130, 220, 0.18); }
.wd-credit .wd-action-ico { background: rgba(40, 180, 100, 0.18); }
.wd-transfer .wd-action-ico { background: rgba(220, 160, 0, 0.18); }
.wd-debit .wd-action-ico { background: rgba(220, 70, 90, 0.18); }

.wd-delete {
  background: transparent; border: 0; color: var(--destructive);
  cursor: pointer; padding: var(--s2); font-size: var(--fs-small);
  font-family: inherit;
}

/* ==========================================================
   NET-WORTH compact breakdown row (under topbar, only if mixed assets)
   ========================================================== */
.nw-breakdown-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3);
}
.nw-chip {
  display: flex; gap: 6px; align-items: baseline;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px 10px; font-size: var(--fs-tiny);
}
.nw-chip-val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================
   PULL-TO-REFRESH spinner
   ========================================================== */
.ptr-spinner {
  height: 0; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  color: var(--hint); font-size: 22px;
  transition: height 0.15s ease-out;
}
.ptr-arrow { transition: transform 0.2s; }
.ptr-armed .ptr-arrow { transform: rotate(180deg); color: var(--link); }
.ptr-spin .ptr-arrow { animation: ptr-rotate 0.8s linear infinite; }
@keyframes ptr-rotate { to { transform: rotate(360deg); } }

/* ==========================================================
   SWIPE wrappers (tx cards) — action revealed only when swipe-open
   ========================================================== */
.swipe-wrap {
  position: relative; overflow: hidden;
  margin-bottom: var(--s2); border-radius: var(--r2);
}
.swipe-wrap > .swipe-card {
  position: relative;        /* sit ABOVE the absolute action */
  z-index: 1;
  width: 100%; box-sizing: border-box;
  margin-bottom: 0;
  touch-action: pan-y;
  background: var(--card);   /* must be opaque to mask the action */
}
.swipe-action {
  position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; user-select: none;
  z-index: 0;                /* below the card by default */
}
.swipe-action-delete { background: var(--destructive); color: #fff; }

/* ==========================================================
   RECEIPT shortcut (camera shortcut on + form)
   ========================================================== */
.receipt-shortcut { display: block; margin-bottom: var(--s3); cursor: pointer; }

/* ==========================================================
   CHIPS (recent merchants in + form, etc.)
   ========================================================== */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3);
  align-items: center;
}
.chips-label {
  width: 100%; color: var(--hint); font-size: var(--fs-tiny);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.chip {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 6px 12px; font-size: var(--fs-small);
  cursor: pointer; transition: background 0.1s;
}
.chip:active { background: var(--bg); transform: scale(0.96); }

/* ==========================================================
   ATTACHMENTS list (in tx-edit dialog)
   ========================================================== */
.att-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.att-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s2);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r2);
  font-size: var(--fs-small);
}
.att-thumb { font-size: 18px; width: 26px; text-align: center; }
.att-name {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-meta { color: var(--hint); font-size: var(--fs-tiny); }
.att-view, .att-del {
  background: transparent; border: 0; color: var(--link);
  cursor: pointer; padding: 4px 8px; font-size: 16px;
}
.att-del { color: var(--destructive); }
.att-upload-label { display: block; cursor: pointer; }

/* ==========================================================
   TX FILTERS bar (Operations) — compact secondary row
   ========================================================== */
.tx-filters { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.tx-filters input[type="search"],
.tx-filters input[type="date"],
.tx-filters select {
  width: 100%; padding: var(--s2) var(--s3);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r2);
  font-size: var(--fs-small);
}
.tx-filters input[type="search"]::placeholder { color: var(--hint); }

/* ==========================================================
   TX PERIOD bar (top of Operations) — overrides default period-bar
   ========================================================== */
.tx-period-bar {
  margin-bottom: var(--s3);
  padding: 0;
  gap: var(--s2);
}
.tx-period-bar .period-arrow {
  width: 32px; height: 32px;
  font-size: 18px; border-radius: 8px;
  background: var(--card);
}
.tx-period-bar .period-label {
  flex: 1; padding: 6px var(--s3);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); font-weight: 600;
  font-size: var(--fs-base);
}

/* ==========================================================
   TX STAT card (header above the list)
   ========================================================== */
.tx-stat-card {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r3); padding: var(--s3);
  margin-bottom: var(--s3);
}
.tx-stat-ico {
  font-size: 24px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 10px; flex: 0 0 auto;
}
.tx-stat-body { flex: 1; min-width: 0; }
.tx-stat-title {
  font-weight: 600; font-size: var(--fs-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-stat-meta { color: var(--hint); font-size: var(--fs-tiny); margin-top: 2px; }
.tx-stat-amount {
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tx-stat-amount.credit { color: var(--success); }
.tx-stat-amount.debit { color: var(--destructive); }

/* ==========================================================
   TX DAY header — bigger, ZenMoney-style
   ========================================================== */
.tx-day-big {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 var(--s2);
}
.tx-day-num {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--text); width: 50px;
  font-variant-numeric: tabular-nums;
}
.tx-day-text { flex: 1; min-width: 0; }
.tx-day-wd { font-size: var(--fs-small); color: var(--text); text-transform: lowercase; }
.tx-day-my { font-size: var(--fs-tiny); color: var(--hint); text-transform: lowercase; }
.tx-day-net {
  font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
}
.tx-day-net.pos { color: var(--success); }
.tx-day-net.neg { color: var(--destructive); }

/* ==========================================================
   TX ROW — ZenMoney-style: colored icon + title + sub + amount
   ========================================================== */
.tx-row {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); padding: var(--s2) var(--s3);
  cursor: pointer; touch-action: pan-y;
}
.tx-row-ico {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 22px;
}
.tx-row-ico-debit    { background: rgba(220, 70, 90, 0.15); }
.tx-row-ico-credit   { background: rgba(40, 180, 100, 0.15); }
.tx-row-ico-transfer { background: rgba(0, 130, 220, 0.15); }
.tx-row-body { flex: 1; min-width: 0; }
.tx-row-title {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-row-sub {
  display: flex; gap: 6px; align-items: center;
  font-size: var(--fs-tiny); color: var(--hint);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tx-row-acc { opacity: 0.85; }
.tx-row-cat { color: var(--link); opacity: 0.85; }
.tx-row-amount {
  font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--fs-base); flex: 0 0 auto;
}
.tx-row-amount.debit { color: var(--destructive); }
.tx-row-amount.credit { color: var(--success); }
.tx-row-amount.neutral { color: var(--hint); }

/* ==========================================================
   PERIOD picker dialog
   ========================================================== */
.pp-form { gap: var(--s3); }
.pp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2);
}
.pp-tile, .pp-wide {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: var(--s3) var(--s2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2); cursor: pointer;
  color: var(--text); font-family: inherit;
}
.pp-tile:active, .pp-wide:active { background: var(--bg); transform: scale(0.97); }
.pp-wide { width: 100%; }
.pp-ico {
  font-size: 22px; font-weight: 700;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 8px;
}
.pp-lbl { font-size: var(--fs-small); }
.pp-sub { font-size: var(--fs-tiny); color: var(--hint); }

/* ==========================================================
   TX LIST — day grouping
   ========================================================== */
.tx-day {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--s4) var(--s1) var(--s2);
  font-size: var(--fs-small);
}
.tx-day .date { color: var(--hint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--fs-tiny); }
.tx-day .total { color: var(--hint); font-variant-numeric: tabular-nums; font-size: var(--fs-tiny); }
.tx-day .total .credit { color: var(--success); }
.tx-day .total .debit { color: var(--destructive); }

/* ==========================================================
   CATEGORY pill (on tx cards)
   ========================================================== */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  background: rgba(46, 163, 255, 0.13);
  color: var(--button);
  margin-top: 4px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-pill.empty { background: rgba(139, 148, 163, 0.13); color: var(--hint); font-style: italic; }
.cat-pill.ai::before { content: "✨"; font-size: 9px; }
.cat-pill.income { background: rgba(39, 194, 129, 0.13); color: var(--success); }
.cat-pill.expense { background: rgba(255, 91, 91, 0.13); color: var(--destructive); }

/* ==========================================================
   BOTTOM NAV
   ========================================================== */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr;
  align-items: end;
  padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-bottom));
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  z-index: 10;
  backdrop-filter: blur(8px);
}
.navbtn {
  background: transparent; border: none;
  color: var(--hint);
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  cursor: pointer;
}
.navbtn .navico { font-size: 22px; line-height: 1; }
.navbtn.active { color: var(--button); }
.navbtn.fab {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  font-size: 32px; font-weight: 300;
  margin: -28px auto 0;
  box-shadow: 0 6px 16px rgba(46, 163, 255, 0.4);
  align-self: center;
}
.navbtn.fab.active { background: var(--button); color: var(--button-text); }
.navbtn.fab:active { transform: scale(0.95); }

/* ==========================================================
   CATEGORIES TAB
   ========================================================== */
.period-kind-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  margin: var(--s2) 0 var(--s2);
}
.pk-tab {
  flex: 1;
  background: transparent; border: none; color: var(--hint);
  padding: 8px 4px;
  border-radius: 8px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pk-tab.active { background: var(--button); color: var(--button-text); }

.period-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s1) 0 var(--s3);
}
.period-arrow {
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 22px; cursor: pointer; line-height: 1;
}
.period-label {
  flex: 1;
  background: transparent; border: none; color: var(--text);
  font-size: var(--fs-h2); font-weight: 600; text-align: center; cursor: pointer;
}

.totals-row { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.total-card {
  flex: 1;
  background: var(--surface-1);
  border: 2px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s3);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.total-card.active.expense { border-color: var(--destructive); background: rgba(255,91,91,0.06); }
.total-card.active.income { border-color: var(--success); background: rgba(39,194,129,0.06); }
.total-label { color: var(--hint); font-size: var(--fs-small); font-weight: 500; }
.total-value { font-size: var(--fs-h1); font-weight: 700; margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.total-card.expense .total-value { color: var(--destructive); }
.total-card.income .total-value { color: var(--success); }

.cat-chart {
  display: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.cat-chart.show { display: flex; gap: var(--s4); align-items: center; }
.cat-chart svg { flex-shrink: 0; }
.cat-chart-legend {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-tiny);
}
.cat-chart-legend > div {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cat-chart-legend > div .swatch {
  width: 10px; height: 10px; border-radius: 2px;
}
.cat-chart-legend > div .name {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cat-chart-legend > div .pct {
  color: var(--hint); font-variant-numeric: tabular-nums;
}

/* Categories: hierarchical layout — parent on its own row, then a sub-grid
   of children directly underneath. No more breaking into a flat 2-col mess. */
.cats-grid {
  display: flex; flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.cat-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  padding-left: var(--s4);          /* visual indent under parent */
  border-left: 2px solid var(--border);
  margin-left: var(--s2);
  padding-top: 2px; padding-bottom: var(--s2);
}
.cat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
  cursor: pointer;
  text-align: left; color: var(--text);
  transition: transform 0.06s ease;
}
.cat-tile:active { transform: scale(0.98); }
.cat-tile .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(46, 163, 255, 0.14);
  flex-shrink: 0;
}
.cat-tile.expense .ico { background: rgba(255, 91, 91, 0.14); }
.cat-tile.income .ico { background: rgba(39, 194, 129, 0.14); }
.cat-tile .body { flex: 1; min-width: 0; }
.cat-tile .name {
  font-size: var(--fs-small); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-tile .amt {
  font-size: var(--fs-small); font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cat-tile.expense .amt { color: var(--destructive); }
.cat-tile.income .amt { color: var(--success); }
/* Parent tile: full row, prominent. Sub tile: smaller, in 2-col sub-grid. */
.cat-tile-parent { width: 100%; }
.cat-tile-sub {
  padding: var(--s2);
  background: var(--surface-2);
}
.cat-tile-sub .ico {
  width: 32px; height: 32px; font-size: 16px; border-radius: 9px;
}
.cat-tile-sub .name { font-size: var(--fs-tiny); font-weight: 500; }
.cat-tile-sub .amt { font-size: var(--fs-tiny); }

/* Budget progress */
.cat-progress {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.cat-progress > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--button);
  transition: width 0.3s ease;
}
.cat-progress.ok > span { background: var(--success); }
.cat-progress.warn > span { background: var(--warn); }
.cat-progress.over > span { background: var(--destructive); }
.cat-tile .budget-meta {
  font-size: var(--fs-tiny);
  color: var(--hint);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cat-tile .budget-meta.over { color: var(--destructive); font-weight: 600; }

/* Insights panel */
.insights-text {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  white-space: pre-wrap;
  font-size: var(--fs-body);
  line-height: 1.5;
  max-height: 60vh;
  overflow-y: auto;
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: var(--s2);
  border-radius: var(--r-sm);
  max-height: 200px; overflow-y: auto;
}
.emoji-picker button {
  background: transparent; border: 2px solid transparent;
  font-size: 20px; padding: 6px; border-radius: 8px;
  cursor: pointer; line-height: 1;
}
.emoji-picker button.active { border-color: var(--button); background: rgba(46,163,255,0.16); }

/* ==========================================================
   SETTINGS
   ========================================================== */
.settings-section { margin-bottom: var(--s5); }
.settings-label {
  font-size: var(--fs-tiny); font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: var(--s2) var(--s1) var(--s2);
}
.settings-card { display: block; padding: var(--s4); }
.settings-details {
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.settings-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--link);
  padding: 4px 0;
  list-style: none;
}
.settings-details summary::-webkit-details-marker { display: none; }
.settings-details summary::before { content: "+ "; font-weight: 700; }
.settings-details[open] summary::before { content: "− "; }
.ai-status-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small);
}
.ai-status-row .label { color: var(--hint); }
.ai-status-row .value { font-weight: 600; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge.byok { background: rgba(46, 163, 255, 0.18); color: var(--button); }
.badge.global { background: rgba(139, 148, 163, 0.20); color: var(--hint); }
.badge.none { background: rgba(245, 165, 36, 0.18); color: var(--warn); }

/* ==========================================================
   IMPORT BANNER + DIALOG
   ========================================================== */
.imports-banner {
  background: linear-gradient(180deg, rgba(46,163,255,0.12), rgba(46,163,255,0.06));
  border: 1px solid rgba(46, 163, 255, 0.32);
  border-radius: var(--r-md);
  padding: var(--s3);
  margin-bottom: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.import-banner-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-1);
  padding: var(--s3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.import-banner-card .meta { font-size: var(--fs-tiny); color: var(--hint); margin-top: 2px; }

.import-controls {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-small);
}
.import-controls .btn-link { width: auto; padding: 4px var(--s2); margin: 0; }

.import-rows {
  max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
/* No native checkbox — we use a custom round indicator that's clearly visible
   on dark theme. Whole row is clickable. */
.import-row {
  display: grid;
  grid-template-columns: 20px 36px 1fr auto;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--r2);
  margin-bottom: 4px;
  font-size: var(--fs-small);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s;
}
.import-row:hover { background: var(--surface-2); }
.import-row.selected {
  background: rgba(46,163,255,0.08);
  border-color: rgba(46,163,255,0.45);
}
.ir-check {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--hint);
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition: background 0.1s, border-color 0.1s;
}
.ir-check.on {
  background: var(--link);
  border-color: var(--link);
}
.ir-check.on::after {
  content: ""; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ir-ico {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 18px;
  flex: 0 0 auto;
}
.ir-ico-debit { background: rgba(220, 70, 90, 0.15); }
.ir-ico-credit { background: rgba(40, 180, 100, 0.18); }
.ir-ico-transfer { background: rgba(0, 130, 220, 0.18); }
.ir-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ir-title {
  font-weight: 500; font-size: var(--fs-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left; color: var(--text);
}
.ir-meta {
  font-size: var(--fs-tiny); color: var(--hint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.ir-amount {
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: var(--fs-base);
}
.ir-amount.debit { color: var(--destructive); }
.ir-amount.credit { color: var(--success); }
.ir-amount.transfer { color: var(--hint); }

/* ==========================================================
   BOOT GATE
   ========================================================== */
.boot-gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
  background: var(--bg);
  z-index: 100;
}
.boot-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5);
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.boot-emoji { font-size: 56px; margin-bottom: var(--s2); }
.boot-title { font-size: var(--fs-display); font-weight: 700; margin-bottom: var(--s3); letter-spacing: -0.5px; }
.boot-msg { font-size: var(--fs-body); color: var(--hint); margin-bottom: var(--s4); }
.boot-help {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.boot-help a { color: var(--link); font-weight: 600; }
.boot-help details { margin-top: var(--s3); }
.boot-help summary { cursor: pointer; color: var(--hint); font-size: var(--fs-tiny); }
.boot-help pre { font-size: 10px; color: var(--hint); white-space: pre-wrap; word-break: break-all; margin-top: 6px; }

/* ==========================================================
   TOASTER
   ========================================================== */
.toaster {
  position: fixed;
  left: 50%; bottom: calc(112px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  /* Above any dialog (which uses 9000–9500) so success/error toasts that
     fire from within a dialog flow remain visible. */
  z-index: 10000;
  pointer-events: none;
  width: max-content; max-width: 90vw;
}
.toast {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in 0.18s ease-out;
}
.toast.error { border-color: var(--destructive); color: var(--destructive); }
.toast.success { border-color: var(--success); color: var(--success); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Receipt card (tx-detail dialog) ---------- */
.receipt-card {
  margin-top: var(--s2);
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
}
.receipt-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.receipt-merchant {
  font-weight: 600; font-size: 14px;
}
.receipt-total {
  font-weight: 700; font-size: 16px;
}
.receipt-meta {
  color: var(--hint); font-size: 12px; margin-bottom: 8px;
}
.receipt-items {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 6px 0; margin: 6px 0;
}
.ri-row {
  display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline;
}
.ri-name {
  flex: 1; min-width: 0; word-break: break-word;
}
.ri-qty {
  font-weight: 600; color: var(--link);
}
.ri-unit {
  color: var(--hint); font-size: 11px; margin-left: 4px;
}
.ri-amount {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: 12.5px;
}
.receipt-row {
  display: flex; justify-content: space-between; color: var(--hint);
  font-size: 12px; margin-top: 2px;
}

/* ---------- Month-end forecast card ---------- */
.forecast-card {
  margin-top: var(--s2);
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.forecast-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.forecast-label {
  color: var(--hint); font-size: 12px;
}
.forecast-value {
  font-weight: 600;
}
.forecast-meta {
  color: var(--hint); font-size: 11.5px; margin-top: 6px;
}
.forecast-bar {
  height: 6px; background: var(--bg); border-radius: 3px;
  overflow: hidden; margin-top: 8px;
}
.forecast-bar-fill {
  height: 100%; background: linear-gradient(90deg, #4ade80, #facc15, #ef4444);
  transition: width .3s ease;
}

/* ---------- Heatmap (16-week activity) ---------- */
.heatmap-card {
  margin-top: var(--s2);
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.heatmap-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--hint); margin-bottom: 8px;
}
.heatmap-legend {
  display: inline-flex; gap: 3px; align-items: center;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
}
.hm-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: #2a2a2a;
  width: 100%;
  display: inline-block;
}
.hm-cell.empty { visibility: hidden; }
.hm-cell.l0 { background: #1f1f1f; }
.hm-cell.l1 { background: #1e3a5f; }
.hm-cell.l2 { background: #2a6cab; }
.hm-cell.l3 { background: #d97706; }
.hm-cell.l4 { background: #dc2626; }
.heatmap-legend .hm-cell {
  width: 11px; height: 11px;
}

/* ---------- Bulk-select toolbar ---------- */
.tx-bulk-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--link);
  color: #fff;
  border-radius: 12px;
  margin-top: var(--s2);
  font-size: 13px;
}
.tx-bulk-bar .btn-link { color: #fff; opacity: .9; }
.tx-bulk-bar .btn-link:hover { opacity: 1; }
.tx-bulk-bar .btn-secondary {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: transparent;
  padding: 4px 10px;
  font-size: 12px;
}
.tx-bulk-count {
  font-weight: 700; flex: 1;
}
.tx-row.selected {
  background: rgba(56, 132, 255, .14);
  outline: 2px solid var(--link);
}

/* ---------- Wallet-detail extra action ---------- */
.wd-action.wd-correct .wd-action-ico { font-size: 20px; }

/* ---------- Grouped wallets list ---------- */
.wallet-group {
  margin-top: var(--s2);
}
.wallet-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.wallet-group-head:hover { background: rgba(255,255,255,.04); }
.wg-ico { font-size: 16px; }
.wg-title { font-weight: 600; }
.wg-count {
  font-size: 11px; color: var(--hint);
  background: rgba(255,255,255,.06);
  padding: 1px 6px; border-radius: 8px;
  min-width: 18px; text-align: center;
}
.wg-sum {
  flex: 1; text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wg-chevron {
  color: var(--hint); font-size: 11px;
  margin-left: 2px;
}
.wallet-group-body {
  display: flex; flex-direction: column; gap: var(--s1);
  margin-top: 6px;
}
.wallet-group.closed .wallet-group-body { display: none; }

/* ---------- Excluded ("sink") wallets ---------- */
.card.wallet-excluded {
  opacity: .55;
  border-style: dashed;
}
.card.wallet-excluded:hover { opacity: .8; }
.card-excluded {
  font-size: 12px;
  margin-left: 4px;
  opacity: .6;
}

/* ---------- Wallet-edit: exclude checkbox row ---------- */
/* `.form label` is `display:flex; flex-direction:column` — for a checkbox we
   want the input INLINE with the label text, not stacked. Override here. */
label.we-exclude {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
label.we-exclude > input[type="checkbox"] {
  /* Native checkbox in Telegram WebView dark mode is barely visible — the
     box AND tick blend with the background. Replace with explicit custom
     indicator: empty bordered square when off, filled accent + white tick
     when on. */
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 1px 0 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 2px solid var(--hint);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
label.we-exclude > input[type="checkbox"]:checked {
  background: var(--link);
  border-color: var(--link);
}
label.we-exclude > input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}
label.we-exclude:has(input:checked) {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 12%, var(--bg2));
}
.we-exclude-text {
  flex: 1;
  display: block;
  line-height: 1.35;
}
.we-exclude-hint {
  display: block;
  color: var(--hint);
  font-size: 11px;
  margin-top: 2px;
}

/* ==========================================================
   Settings 2.0 — clean panel-based layout
   ========================================================== */

/* Compact profile header that anchors the Settings page */
.profile-card {
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(168,85,247,.06));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.profile-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.profile-key {
  color: var(--hint); font-size: 12px;
}
.profile-val {
  font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; word-break: break-all;
}

/* Collapsible panels — both Settings sections AND nested cards on other tabs */
.panel {
  margin-top: var(--s3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg2);
  overflow: hidden;
}
.panel[open] {
  background: var(--bg2);
}
.panel-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary::after {
  content: "▸";
  color: var(--hint); font-size: 12px;
  transition: transform .2s ease;
}
.panel[open] .panel-summary::after {
  transform: rotate(90deg);
}
.panel-summary:hover {
  background: rgba(255,255,255,.03);
}
.panel-body {
  padding: 0 14px 14px;
}

/* Danger panel gets a red tint */
.panel-danger { border-color: rgba(220,38,38,.35); }
.panel-danger .panel-summary { color: var(--destructive); }

/* Slightly smaller label when used INSIDE a panel */
.settings-label.compact {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: var(--s2);
  margin-bottom: 6px;
}

/* Tiny "●live" pill next to wallet names that auto-sync from the bank.
   Lets the user tell apart a manual snapshot from a live-pulled wallet
   when both are in the same Bank group. */
.card-live {
  font-size: 10px; color: var(--accent);
  background: rgba(59,130,246,.12);
  padding: 1px 5px; border-radius: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Mono connect dialog: radio "pills" for Token vs OpenAPI */
.mono-mode-pill {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.mono-mode-pill input { margin: 0; }
.mono-mode-pill:has(input:checked) {
  border-color: var(--accent);
  background: rgba(59,130,246,.12);
}

/* ---------- cs-dialog backdrop overlay ---------- */
/* Sits just below the cs-dialog (z-index 9500) and just above any other
   dialog (9000). When the cs-dialog opens we display:block this; clicks
   anywhere on it close the cs-dialog. Solves the bug where the bottom-sheet
   cs-dialog opened over only part of the screen and taps on the visible
   area above leaked through to elements behind. */
.cs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9400;
}

/* ---------- Currency switcher (topbar) ---------- */
.ccy-switcher {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.ccy-chip {
  flex: 0 0 auto;
  padding: 4px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--hint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ccy-chip:hover { background: rgba(255,255,255,.06); }
.ccy-chip.active {
  background: var(--link);
  border-color: var(--link);
  color: #fff;
}

/* ---------- Cashflow chart ---------- */
.cashflow-card {
  margin-top: var(--s2);
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.cashflow-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--hint); margin-bottom: 8px;
}
.cashflow-legend { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; margin-right: 2px; }
.cf-dot.debit { background: #ef4444; }
.cf-dot.credit { background: #4ade80; }
.cashflow-bars {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  gap: 1px;
  height: 90px;
  align-items: end;
}
.cf-col {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cf-bar { width: 100%; border-radius: 1px; }
.cf-bar.credit { background: #4ade80; }
.cf-bar.debit  { background: #ef4444; margin-top: 1px; }
.cashflow-foot {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 12px; color: var(--text);
}
.cashflow-foot b.pos { color: var(--success); }
.cashflow-foot b.neg { color: var(--destructive); }

/* ---------- Receipt-search results ---------- */
.receipt-search-results {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 6px;
  max-height: 280px; overflow-y: auto;
}
.rs-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.rs-row:last-child { border-bottom: 0; }
.rs-name { font-weight: 500; }
.rs-meta {
  display: flex; justify-content: space-between;
  color: var(--hint); font-size: 11px; margin-top: 2px;
}
.rs-amount { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* ---------- Tx Load-more button ---------- */
.tx-load-more {
  margin-top: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg2);
}

/* ---------- Subscriptions list ---------- */
.sub-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sub-name { font-weight: 500; }
.sub-meta {
  font-size: 11px; color: var(--hint); margin-left: 6px;
}
.sub-amount { font-variant-numeric: tabular-nums; }
.sub-total {
  text-align: right; margin-top: 8px; font-size: 13px;
}

/* ---------- Audit log rows ---------- */
.audit-row {
  display: grid;
  grid-template-columns: 100px 110px 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.audit-row:last-child { border-bottom: 0; }
.audit-when { color: var(--hint); font-variant-numeric: tabular-nums; }
.audit-action {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--link);
  font-size: 10px;
}
.audit-summary { color: var(--text); }

/* ---------- Price tracker rows ---------- */
.pt-row {
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.pt-name { font-weight: 600; font-size: 13px; }
.pt-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-top: 4px;
  color: var(--text);
}
.pt-meta .muted { color: var(--hint); }
.pt-stores { font-size: 11px; color: var(--hint); margin-top: 2px; }

/* ---------- Heatmap cells are now clickable ---------- */
.hm-cell[data-day] {
  cursor: pointer;
  transition: opacity .12s;
}
.hm-cell[data-day]:hover { opacity: 0.6; }


/* ==========================================================
   ✨ v2 POLISH LAYER (2026-05-12)
   ----------------------------------------------------------
   Additive — every rule below ONLY overrides/augments earlier
   declarations; nothing here removes existing behaviour. Goals:
     1. Stronger hero / balance hierarchy.
     2. Class-coloured accent stripes on wallet cards so different
        bucket types are distinguishable at a glance.
     3. Smooth accordion (max-height + opacity) instead of the
        abrupt display:none toggle, plus a chevron that rotates.
     4. Bottom-nav active state — pill-behind-icon affordance.
     5. Punchier press feedback on every interactive element.
     6. Bottom-sheet-feel dialog enter animation.
     7. Tasteful "live" pulse on auto-syncing wallets.
   ========================================================== */


/* ---- 1. HERO BALANCE ---- */
/* The "ЗАГАЛЬНИЙ БАЛАНС" number is the most important glance-info
   on the entire screen. Treat it accordingly — slight gradient pull
   toward the accent gives it weight without overwhelming the dark
   background. */
.topbar {
  padding-bottom: var(--s5);
}
.topbar .balance {
  background: linear-gradient(135deg, var(--text) 0%, var(--text) 55%, var(--button) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;  /* fallback */
  /* Animate the value-change with a tiny cross-fade so currency-chip
     switches feel responsive instead of jumpy. */
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.topbar .balance:active { transform: scale(0.99); }


/* ---- 2. CLASS-COLOUR ACCENT on wallet cards ----
   A 3-pixel coloured strip on the left edge of every wallet card,
   colour-keyed to the bucket it belongs to. Helps the eye sort 22
   bank cards from 3 cash cards from 4 debt cards. */
.card[data-class] {
  overflow: hidden;
  padding-left: calc(var(--s4) + 4px);
}
.card[data-class]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.card[data-class="bank"]::before     { background: linear-gradient(180deg, #4287f5, #2c5fb8); }
.card[data-class="cash"]::before     { background: linear-gradient(180deg, #27c281, #1aa66b); }
.card[data-class="savings"]::before  { background: linear-gradient(180deg, #f5a524, #d68a14); }
.card[data-class="debts"]::before    { background: linear-gradient(180deg, #ff5b5b, #d63838); }
.card[data-class="invest"]::before   { background: linear-gradient(180deg, #a067ff, #7f44d1); }
.card[data-class="crypto"]::before   { background: linear-gradient(180deg, #ffa620, #ed7e0b); }
.card[data-class="other"]::before    { background: var(--border-strong); }
.card[data-class="excluded"]::before { background: var(--border-strong); opacity: 0.5; }

/* Excluded wallets get an even gentler treatment */
.card.wallet-excluded {
  opacity: 0.55;
}


/* ---- 3. GROUP ACCORDION smoothness ----
   Original CSS used `display: none` which is an abrupt jump cut.
   Replace with max-height + opacity cross-fade. The earlier rule
   `.wallet-group.closed .wallet-group-body { display: none; }`
   from line 1527 still wins via specificity at first paint, so
   we override with !important. (Single use-site, acceptable.) */
.wallet-group-body {
  overflow: hidden;
  max-height: 4000px;
  opacity: 1;
  transition: max-height 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.18s ease,
              margin-top 0.18s ease;
}
.wallet-group.closed .wallet-group-body {
  display: flex !important;  /* override original `display:none` */
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* Chevron: keep one Unicode glyph ▾ in HTML, rotate via CSS. */
.wg-chevron {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 11px;
}
.wallet-group.closed .wg-chevron { transform: rotate(-90deg); }

.wallet-group-head {
  border-radius: var(--r-sm);
  transition: background 0.12s ease, transform 0.08s ease;
}
.wallet-group-head:active {
  background: rgba(255,255,255,.06);
  transform: scale(0.995);
}
.wg-count {
  background: rgba(255,255,255,.08);
  transition: background 0.12s ease;
}


/* ---- 4. BOTTOM NAV active pill ---- */
.navbtn {
  position: relative;
  z-index: 0;
  transition: color 0.14s ease;
}
.navbtn .navico {
  display: inline-block;
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Soft circle behind the active icon — same accent colour as Telegram's
   theme button so it picks up tg-theme-button-color automatically. */
.navbtn:not(.fab).active::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 28px;
  background: rgba(46, 163, 255, 0.14);
  border-radius: 14px;
  z-index: -1;
  animation: nav-pill-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes nav-pill-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.navbtn:not(.fab).active .navico { transform: scale(1.08); }
.navbtn:not(.fab):active .navico { transform: scale(0.92); }

/* FAB — bouncier press, stronger glow */
.navbtn.fab {
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.12s ease;
}
.navbtn.fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 6px rgba(46, 163, 255, 0.35);
}


/* ---- 5. CARDS hover/press feedback ---- */
.card {
  transition: transform 0.1s ease, background 0.14s ease,
              border-color 0.14s ease, box-shadow 0.14s ease;
}
.card:hover { border-color: var(--border-strong); }


/* ---- 6. BUTTONS shadow + press feel ---- */
.btn-primary {
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 8px rgba(46, 163, 255, 0.22);
  transition: transform 0.08s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 1px 2px rgba(46, 163, 255, 0.15);
}
.btn-secondary:active { transform: scale(0.97); }


/* ---- 7. CURRENCY chip refinement ---- */
.ccy-chip {
  transition: background 0.14s ease, color 0.14s ease,
              border-color 0.14s ease, transform 0.08s ease,
              box-shadow 0.14s ease;
}
.ccy-chip:active { transform: scale(0.94); }
.ccy-chip.active {
  box-shadow: 0 2px 10px rgba(46, 163, 255, 0.35);
}


/* ---- 8. NET-WORTH BREAKDOWN chips ---- */
.nw-chip {
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: background 0.14s ease;
}
.nw-chip:hover { background: rgba(255,255,255,.05); }


/* ---- 9. SYNC BUTTON (↻) more inviting ---- */
.btn-sync {
  background: rgba(46, 163, 255, 0.10);
  border: none;
  color: var(--button);
  transition: background 0.12s ease, transform 0.2s ease;
}
.btn-sync:hover { background: rgba(46, 163, 255, 0.18); }
.btn-sync:active {
  transform: rotate(180deg) scale(0.92);
  background: rgba(46, 163, 255, 0.30);
}
.btn-sync:disabled {
  background: rgba(255,255,255,.06);
  color: var(--hint);
  animation: sync-spin 1.1s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }


/* ---- 10. LIVE BADGE pulse ----
   The little ●live pill next to syncable wallet names. Adding a soft
   ring-pulse makes the affordance ("this updates by itself") obvious
   without being noisy — pulse is slow (2.4s) and very low opacity. */
.card-live {
  position: relative;
  padding-left: 14px;
}
.card-live::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--button);
  box-shadow: 0 0 0 0 rgba(46, 163, 255, 0.55);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(46, 163, 255, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(46, 163, 255, 0); }
}


/* ---- 11. DIALOG bottom-sheet enter ----
   Slide-up + fade is what every native sheet does. */
dialog {
  animation: dlg-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dlg-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ---- 12. SKELETON shimmer ----
   The plain pulsing rectangle is informational but bland. Real shimmer
   reads as "this content is actually loading, not crashed". */
.skel,
.skeleton-card {
  background: linear-gradient(
    90deg,
    var(--surface-1) 0%,
    rgba(255,255,255,.06) 50%,
    var(--surface-1) 100%
  );
  background-size: 220% 100%;
  animation: skel-shimmer 1.5s linear infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}


/* ---- 13. ONBOARDING tile press ----
   Bigger tap zones plus a satisfying press are crucial here because
   this is the FIRST thing a new user touches. */
.onb-tile {
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.onb-tile:active {
  transform: scale(0.97);
  border-color: var(--button);
}


/* ---- 14. WALLET DETAIL action grid press feel ---- */
.wd-action {
  transition: transform 0.08s ease, background 0.12s ease;
}
.wd-action:active {
  transform: scale(0.95);
  background: rgba(255,255,255,.04);
}


/* ---- 15. TOASTS subtle elevation ---- */
.toast {
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
}
.toast.success {
  background: rgba(39, 194, 129, 0.12);
}
.toast.error {
  background: rgba(255, 91, 91, 0.12);
}


/* ---- 16. AMOUNT colour cue without changing format ----
   A negative balance reads red, positive reads on default — we don't
   touch the format string but tint the colour for wallets that are
   underwater. Scoped to wallet-list cards so we don't surprise tx rows. */
.card .amount-stack .amount {
  transition: color 0.14s ease;
}
.card[data-class="debts"] .amount-stack .amount { color: var(--destructive); }


/* ---- 17. WALLET-GROUP-SUM colour ---- */
/* The right-aligned summary in each group header — use a slightly less
   muted colour so it doesn't blend into the chevron. */
.wg-sum { color: var(--text); opacity: 0.78; }


/* ---- 18. VIEW transition refinement ---- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---- 19. MERGE picker rows in dlgWalletMerge ----
   Pressable cards with subtle right-arrow hint. */
.wm-target {
  transition: background 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}
.wm-target:hover { border-color: var(--button); }
.wm-target:active { transform: scale(0.98); background: rgba(46, 163, 255, 0.08); }


/* ---- 20. SETTINGS panel summary touchable ---- */
.panel-summary {
  cursor: pointer;
  transition: background 0.12s ease;
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
}
.panel-summary:active { background: rgba(255,255,255,.05); }


/* ---- 22. WALLET ICON CHIPS (brand / colour-hint) ----
   The .wallet-ico div is normally a soft-blue tile with an emoji inside.
   When the icon-picker chooses a "chip" (brand letter or colour dot), it
   adds .wallet-ico-chip + inline background/color. We want:
     * crisp circle (chips read better round than rounded-square)
     * bold serif-ish letter so "m"/"П"/"Ξ" feel like badges, not text
     * subtle inset shadow so the chip pops off the dark card */
.wallet-ico-chip {
  border-radius: 50% !important;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 3px rgba(0,0,0,.35);
}
/* In the wallet detail dialog the icon container is bigger (44×44 vs 40×40);
   keep the chip styling but bump font slightly for proportion. */
.wd-ico.wallet-ico-chip { font-size: 22px; }


/* ---- 23. SCROLLBARS subtle (desktop only) ---- */
@media (hover: hover) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.10);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }
  ::-webkit-scrollbar-track { background: transparent; }
}


/* ============================================================
   ✨✨ v3 REDESIGN — Wallets tab (2026-05-12)
   ------------------------------------------------------------
   Goal: make the Wallets tab feel like a modern banking app.
     • Hero: bigger, calmer, with a soft radial glow behind balance
     • Class breakdown: a row of colour-coded summary pills
     • Group accordion: 48px coloured-circle icon, generous padding
     • Section rhythm: clearer spacing between hero / chips / list
     • Stagger reveal on group cards (very subtle)
   No HTML structure change required (except nw-chip layout, see JS).
   ============================================================ */


/* ---- HERO: ambient glow + better typography ---- */
.topbar {
  position: relative;
  padding-top: calc(var(--s5) + var(--safe-top));
  padding-bottom: var(--s4);
  overflow: hidden;
}
/* Soft accent glow behind the balance — bumps the visual hierarchy of the
   hero number without resorting to a busy gradient. Single pseudo-element,
   no impact on layout. */
.topbar::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 540px; height: 280px;
  background: radial-gradient(
    closest-side,
    rgba(46, 163, 255, 0.16) 0%,
    rgba(46, 163, 255, 0.06) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.topbar > * { position: relative; z-index: 1; }

.topbar .brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--hint);
  opacity: 0.7;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.topbar .balance {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1.2px;
  /* Restore the v2 gradient text effect but with a softer endpoint. */
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, var(--button) 140%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ---- CURRENCY SWITCHER: bolder, with a sliding-pill feel ---- */
.ccy-switcher {
  display: flex;
  gap: 6px;
  margin-top: var(--s3);
  padding: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  width: fit-content;
}
.ccy-chip {
  background: transparent !important;
  border: none !important;
  color: var(--hint);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.18s ease;
}
.ccy-chip.active {
  background: var(--button) !important;
  color: var(--button-text) !important;
  box-shadow: 0 4px 12px rgba(46, 163, 255, 0.32);
}


/* ---- NW-BREAKDOWN: colour-coded summary chips ---- */
.nw-breakdown-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 8px;
  padding: 2px 0 var(--s2);
  margin: 0 calc(-1 * var(--s4)) var(--s3);
  padding-left: var(--s4);
  padding-right: var(--s4);
  scroll-snap-type: x proximity;
}
.nw-breakdown-row::-webkit-scrollbar { display: none; }

.nw-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s ease, border-color 0.14s ease;
}
.nw-chip:active { transform: scale(0.97); }

/* Coloured left stripe — same palette as wallet-card data-class. */
.nw-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.nw-chip[data-class="bank"]::before     { background: linear-gradient(180deg, #4287f5, #2c5fb8); }
.nw-chip[data-class="cash"]::before     { background: linear-gradient(180deg, #27c281, #1aa66b); }
.nw-chip[data-class="savings"]::before  { background: linear-gradient(180deg, #f5a524, #d68a14); }
.nw-chip[data-class="owed"]::before     { background: linear-gradient(180deg, #34d399, #1aa66b); }
.nw-chip[data-class="debts"]::before    { background: linear-gradient(180deg, #ff5b5b, #d63838); }
.nw-chip[data-class="invest"]::before   { background: linear-gradient(180deg, #a067ff, #7f44d1); }
.nw-chip[data-class="crypto"]::before   { background: linear-gradient(180deg, #ffa620, #ed7e0b); }
.nw-chip[data-class="other"]::before    { background: var(--border-strong); }

.nw-chip-ico {
  font-size: 18px;
  flex-shrink: 0;
  padding-left: 4px;
}
.nw-chip-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.nw-chip-lbl {
  font-size: 11px;
  color: var(--hint);
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.nw-chip-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.nw-chip[data-neg="true"] .nw-chip-val { color: var(--destructive); }


/* ---- VIEW container: more breathing room ---- */
main {
  padding-left: var(--s4);
  padding-right: var(--s4);
  padding-top: var(--s2);
}
#view-wallet { padding-top: 4px; }
#accountsList { gap: var(--s3); }


/* ---- GROUP ACCORDION: card-like summary with coloured icon ---- */
.wallet-group {
  margin-top: 0;
}
.wallet-group-head {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: var(--s3);
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  transition: background 0.14s ease, border-color 0.14s ease,
              transform 0.08s ease, box-shadow 0.14s ease;
}
.wallet-group-head:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.04);
}
.wallet-group-head:active {
  transform: scale(0.995);
  background: rgba(255,255,255,0.06);
}

/* Coloured 44×44 icon circle — class-tinted bg, emoji centred. */
.wg-ico {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,0.06);
  position: relative;
  flex-shrink: 0;
}
.wallet-group[data-class="cash"]    .wg-ico { background: rgba( 39,194,129,.12); }
.wallet-group[data-class="bank"]    .wg-ico { background: rgba( 66,135,245,.13); }
.wallet-group[data-class="savings"] .wg-ico { background: rgba(245,165, 36,.13); }
.wallet-group[data-class="owed_to_me"] .wg-ico { background: rgba(52,211,153,.14); }
.wallet-group[data-class="debts"]   .wg-ico { background: rgba(255, 91, 91,.13); }
.wallet-group[data-class="invest"]  .wg-ico { background: rgba(160,103,255,.13); }
.wallet-group[data-class="crypto"]  .wg-ico { background: rgba(255,166, 32,.13); }
.wallet-group[data-class="other"]   .wg-ico { background: rgba(255,255,255,.06); }
.wallet-group[data-class="excluded"] .wg-ico { background: rgba(255,255,255,.04); opacity: 0.7; }

.wg-title {
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.1px;
  display: flex; align-items: center; gap: 8px;
}
.wg-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  background: rgba(255,255,255,0.08);
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.4;
}
.wg-sum {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.wallet-group[data-class="debts"] .wg-sum { color: var(--destructive); opacity: 0.95; }
.wallet-group[data-class="owed_to_me"] .wg-sum { color: var(--success); opacity: 0.95; }
.wg-chevron {
  color: var(--hint);
  font-size: 14px;
  opacity: 0.55;
  margin-left: 2px;
}

/* The group body sits *under* the head with a soft connection — slight
   inward indent + subtle separator instead of a wholly separate card. */
.wallet-group-body {
  padding: var(--s2) 0 0;
  gap: var(--s2);
  display: flex;
  flex-direction: column;
}


/* ---- STAGGER REVEAL on group cards ---- */
.wallet-group {
  opacity: 0;
  transform: translateY(8px);
  animation: wg-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.wallet-group:nth-child(1) { animation-delay: 0.00s; }
.wallet-group:nth-child(2) { animation-delay: 0.04s; }
.wallet-group:nth-child(3) { animation-delay: 0.08s; }
.wallet-group:nth-child(4) { animation-delay: 0.12s; }
.wallet-group:nth-child(5) { animation-delay: 0.16s; }
.wallet-group:nth-child(6) { animation-delay: 0.20s; }
.wallet-group:nth-child(7) { animation-delay: 0.24s; }
.wallet-group:nth-child(8) { animation-delay: 0.28s; }
@keyframes wg-in {
  to { opacity: 1; transform: translateY(0); }
}


/* ---- WALLET CARDS inside body: bigger touch, cleaner left stripe ---- */
.wallet-group-body .card {
  padding: 12px 14px 12px calc(14px + 4px);
  border-radius: 14px;
  border-color: var(--border);
}
.wallet-group-body .card:hover {
  background: rgba(255,255,255,0.03);
}
.wallet-group-body .card .name {
  font-size: 14.5px;
  font-weight: 600;
}
.wallet-group-body .card .meta {
  font-size: 11.5px;
  opacity: 0.65;
  margin-top: 2px;
}
.wallet-group-body .card .amount {
  font-size: 15px;
}
.wallet-group-body .card .amount-sub {
  font-size: 11px;
  opacity: 0.65;
}


/* ---- BOTTOM PADDING for the wallets view so last group isn't hugging FAB ---- */
#view-wallet { padding-bottom: var(--s4); }


/* ---- ARROW button + Toggles row breathing ---- */
#view-wallet .row {
  margin-top: var(--s3);
  gap: var(--s2);
}
#btnToggleZero, #btnToggleArchived {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--hint);
  transition: background 0.14s ease, color 0.14s ease;
}
#btnToggleZero:hover, #btnToggleArchived:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}


/* ---- "+ Додати гаманець" — primary CTA, bumped polish ---- */
#btnAddAccount {
  margin-top: var(--s3);
  padding: 14px;
  font-size: 14.5px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(46, 163, 255, 0.28);
}


/* ---- HINT block under CTAs ---- */
#view-wallet .hint {
  font-size: 12px;
  line-height: 1.55;
  margin-top: var(--s4);
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--hint);
}


/* ---- Reduced motion: respect users who don't want animations ---- */
@media (prefers-reduced-motion: reduce) {
  .wallet-group { animation: none; opacity: 1; transform: none; }
  .topbar::before { display: none; }
}


/* ============================================================
   ✨✨✨ v4 HIERARCHY FIX — Group ≠ Card (2026-05-17)
   ------------------------------------------------------------
   Problem in v3: a group header («Готівка» 1 · 6000 EUR) and a
   wallet card («money eur» 6000 EUR) had identical chrome —
   rounded box, tinted icon circle, big title. User couldn't
   tell at a glance which is the FOLDER and which is the FILE.
   Fix: strip the "card" look from group headers — they become
   FLAT SECTION TITLES — and let only the wallet cards inside
   carry the card affordance.
   ============================================================ */


/* ---- GROUP HEAD: flat section label (no card chrome) ---- */
.wallet-group-head {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 8px 12px !important;
  grid-template-columns: 40px 1fr auto auto !important;
  gap: 12px !important;
  /* Subtle bottom hairline so the section visually starts beneath it,
     but only when the group is OPEN (closed section has nothing below
     to delimit). */
  position: relative;
}
.wallet-group:not(.closed) .wallet-group-head::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.06) 80%,
    transparent 100%
  );
}
.wallet-group-head:hover {
  background: rgba(255,255,255,0.03) !important;
}
.wallet-group-head:active {
  background: rgba(255,255,255,0.06) !important;
  transform: none !important;
}

/* Group icon: smaller (40px), more saturated tint — clearly different
   size class from wallet-card icons (which we'll keep at 40px but
   un-tinted), so the eye gets «section icon» vs «item icon» cue. */
.wg-ico {
  width: 40px !important;
  height: 40px !important;
  font-size: 21px !important;
  border-radius: 12px !important;
}
/* Bump tint saturation by ~50% so the section icon reads brighter
   than the in-card icon. */
.wallet-group[data-class="cash"]    .wg-ico { background: rgba( 39,194,129,.22); }
.wallet-group[data-class="bank"]    .wg-ico { background: rgba( 66,135,245,.22); }
.wallet-group[data-class="savings"] .wg-ico { background: rgba(245,165, 36,.22); }
.wallet-group[data-class="owed_to_me"] .wg-ico { background: rgba(52,211,153,.22); }
.wallet-group[data-class="debts"]   .wg-ico { background: rgba(255, 91, 91,.22); }
.wallet-group[data-class="invest"]  .wg-ico { background: rgba(160,103,255,.22); }
.wallet-group[data-class="crypto"]  .wg-ico { background: rgba(255,166, 32,.22); }

/* Group TITLE is the loudest text in the section — bumped from 15.5 → 17 */
.wg-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: var(--text);
}
.wg-count {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  background: rgba(255,255,255,0.07) !important;
  color: var(--hint);
  position: relative;
  top: -1px;
}

/* Sum stays right-aligned but smaller & dimmer than the title.
   Hierarchy: title > sum > chevron. */
.wg-sum {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  opacity: 0.7 !important;
  max-width: 200px !important;
}

/* Chevron MORE visible — was 11px, faded.  Now bigger + slightly opaque. */
.wg-chevron {
  font-size: 15px !important;
  opacity: 0.55 !important;
  margin-left: 4px;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.14s ease;
}
.wallet-group-head:hover .wg-chevron { opacity: 0.9 !important; }


/* ---- GROUP BODY: tighter, slightly inset, dimmer cards ---- */
.wallet-group-body {
  padding: 8px 0 4px !important;
  gap: 6px !important;
  /* No left indent — keep cards full-width since they already have a
     coloured stripe on the left edge. Adding indent would push them
     awkwardly off-grid relative to the section header. */
}

/* Wallet cards INSIDE a group — slightly more compact than v3 + reduced
   icon background to deemphasise vs the brighter group icon above. */
.wallet-group-body .card {
  padding: 11px 14px 11px 18px !important;
  border-radius: 13px !important;
  background: var(--surface-1);
  border-color: rgba(255,255,255,0.04) !important;
}
.wallet-group-body .card:hover {
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,0.05) !important;
}
.wallet-group-body .card .wallet-ico {
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
  background: rgba(255,255,255,0.05);
}
.wallet-group-body .card .name {
  font-size: 14px !important;
  font-weight: 600;
}
.wallet-group-body .card .meta {
  font-size: 11px !important;
  margin-top: 1px !important;
}
.wallet-group-body .card .amount {
  font-size: 14.5px !important;
}


/* ---- BETWEEN-GROUP separation: extra vertical breathing ---- */
.wallet-group + .wallet-group {
  margin-top: var(--s2);
}


/* ---- ACCORDION animation: zero out padding/border when closed
   so the gap collapses cleanly (otherwise the new ::after hairline
   leaves a stray pixel). ---- */
.wallet-group.closed .wallet-group-head {
  padding-bottom: 16px !important;
}
.wallet-group.closed .wallet-group-head::after { display: none; }


/* Brand chips (mono m / privat П / ...) have their colour set via inline
   `style="background:#xxx"` — inline wins over our class rules, so no
   explicit override needed here. */


/* ============================================================
   ✨✨✨✨ v5 FROM-SCRATCH REDESIGN (2026-05-17)
   ------------------------------------------------------------
   Goal: replace the noisy, overlapping v3/v4 visual layers on
   the Wallets tab with a single coherent, modern banking-app
   look. JS now emits a cleaner DOM (.wc card class, .wg-sub
   meta line, etc.), so this layer doesn't need to fight earlier
   !important overrides — it owns the new classes outright.
   Old rules still apply to Categories/Transactions/Settings.
   ============================================================ */


/* ---- HERO: split-typography balance + segmented currency ---- */
.topbar {
  padding: calc(var(--s5) + var(--safe-top)) var(--s4) var(--s5) !important;
  overflow: hidden;
}
.topbar::before {
  /* Softer radial glow than v3; bigger, lower, more ambient. */
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 360px;
  background: radial-gradient(
    closest-side,
    rgba(46, 163, 255, 0.14) 0%,
    rgba(46, 163, 255, 0.04) 45%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
.topbar > * { position: relative; z-index: 1; }

.topbar .brand {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--hint);
  opacity: 0.62 !important;
  margin-bottom: 6px !important;
  background: none !important;
  -webkit-text-fill-color: var(--hint) !important;
}

.topbar .balance {
  font-size: 0 !important;  /* reset; child spans set their own size */
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 2px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  /* Remove the v3 gradient-clip; clip + flex children misbehave on some
     Telegram WebViews and the integer-only emphasis below reads cleaner. */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text);
  margin-bottom: var(--s3);
}
.hero-sign {
  font-size: 26px;
  font-weight: 600;
  color: var(--destructive);
  margin-right: 2px;
}
.hero-int {
  font-size: 34px;
  font-weight: 700;
}
.hero-frac {
  font-size: 22px;
  font-weight: 600;
  opacity: 0.55;
  margin-left: -1px;
}
.hero-ccy {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 6px;
}

/* Currency switcher — segmented control */
.ccy-switcher {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 3px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 999px !important;
  width: fit-content;
  margin-top: 0 !important;
}
.ccy-chip {
  background: transparent !important;
  border: none !important;
  color: var(--hint) !important;
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: color 0.14s ease, background 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  min-width: 44px;
  box-shadow: none !important;
}
.ccy-chip.active {
  background: var(--button) !important;
  color: var(--button-text) !important;
  box-shadow: 0 4px 12px rgba(46, 163, 255, 0.30) !important;
}


/* ============================================================
   NET-WORTH TOGGLES — sit under the hero balance.
   Pair of pill toggles ("Усі кошти" / "Без боргів") that flip on/off.
   Off = ghost outline; On = filled accent with a soft glow. Pressed state
   is exposed via aria-pressed for accessibility + CSS targeting.
   ============================================================ */
.nw-toggles {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.nw-toggle {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--hint);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  transition:
    background 0.14s ease, color 0.14s ease,
    border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}
.nw-toggle:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.nw-toggle:active { transform: scale(0.95); }
.nw-toggle[aria-pressed="true"] {
  background: var(--link);
  border-color: var(--link);
  color: #fff;
  box-shadow: 0 3px 10px rgba(46, 163, 255, 0.35);
}
.nw-toggle[aria-pressed="true"]:hover {
  background: var(--link);
  filter: brightness(1.08);
}
.nw-toggle-ico { font-size: 13px; line-height: 1; }
.nw-toggle-lbl { letter-spacing: 0.1px; }
@media (prefers-color-scheme: light) {
  .nw-toggle {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
  }
  .nw-toggle:hover { background: rgba(0,0,0,0.08); }
}


/* ---- CLASS BREAKDOWN PILLS (compact tiles) ---- */
.nw-breakdown-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 8px !important;
  padding: 4px var(--s4) 6px !important;
  margin: var(--s4) calc(-1 * var(--s4)) var(--s4) !important;
  scroll-snap-type: x proximity;
  /* Critical for Telegram WebView: tell the browser this row OWNS horizontal
     pan so it doesn't get hijacked by the parent swipe-to-close gesture or
     the pull-to-refresh listener on <main>. Pair with overscroll-contain so
     the inertia doesn't bubble out. */
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  cursor: grab;
}
.nw-breakdown-row:active { cursor: grabbing; }

/* Visible scroll affordance — a tiny dim arrow at the right edge of the row
   that disappears once user has scrolled. Painted on #view-wallet (which
   sits at higher z than the row) so it's not clipped by the scroll
   container itself. */
#view-wallet { position: relative; }
.nw-breakdown-row::-webkit-scrollbar { display: none; }

.nw-chip {
  /* Tile, NOT a chip — compact 2-line tile so 4-5 fit on a 360 viewport. */
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px 9px 10px !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.14s ease, background 0.14s ease;
  min-height: 48px;
  font-family: inherit;
  /* Forward touch to the scroll container so a finger started on a tile can
     drag-scroll the row. Without this, <button>'s default touch-action would
     swallow the gesture and the row would feel «stuck». */
  touch-action: pan-x !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nw-chip:hover { background: rgba(255,255,255,0.06) !important; }
.nw-chip:active { transform: scale(0.97); }

.nw-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.nw-chip[data-class="bank"]::before     { background: #4287f5; }
.nw-chip[data-class="cash"]::before     { background: #27c281; }
.nw-chip[data-class="savings"]::before  { background: #f5a524; }
.nw-chip[data-class="owed"]::before     { background: #34d399; }
.nw-chip[data-class="debts"]::before    { background: #ff5b5b; }
.nw-chip[data-class="invest"]::before   { background: #a067ff; }
.nw-chip[data-class="crypto"]::before   { background: #ffa620; }
.nw-chip[data-class="other"]::before    { background: rgba(255,255,255,.18); }

.nw-chip-ico {
  font-size: 16px !important;
  flex-shrink: 0;
  padding-left: 2px;
  filter: saturate(1.1);
}
.nw-chip-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  text-align: left !important;
  min-width: 0;
}
.nw-chip-lbl {
  font-size: 10.5px !important;
  color: var(--hint);
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  text-transform: none;
  white-space: nowrap;
}
.nw-chip-val {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.nw-chip[data-neg="true"] .nw-chip-val { color: var(--destructive); }


/* ---- VIEW container ---- */
main {
  padding: 0 var(--s4) calc(112px + var(--safe-bottom)) !important;
}
#view-wallet {
  padding-top: var(--s2);
  padding-bottom: var(--s4);
}
#accountsList {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: var(--s3);
}


/* ---- WALLET GROUP (section) ---- */
.wallet-group {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* override v3 stagger reveal: keep it but lighter */
  animation: none;
  opacity: 1;
  transform: none;
}
.wallet-group + .wallet-group {
  margin-top: var(--s3) !important;
}

/* Section head: pure label, no card chrome */
.wallet-group-head {
  display: grid !important;
  grid-template-columns: 36px 1fr 24px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  user-select: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background 0.14s ease;
  margin: 0 !important;
}
.wallet-group-head::after { display: none !important; }
.wallet-group-head:hover { background: rgba(255,255,255,0.03) !important; }
.wallet-group-head:active { background: rgba(255,255,255,0.06) !important; transform: none !important; }

.wg-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  background: rgba(255,255,255,0.06) !important;
}
.wallet-group[data-class="cash"]       .wg-ico { background: rgba( 39,194,129,.16) !important; }
.wallet-group[data-class="bank"]       .wg-ico { background: rgba( 66,135,245,.16) !important; }
.wallet-group[data-class="savings"]    .wg-ico { background: rgba(245,165, 36,.16) !important; }
.wallet-group[data-class="owed_to_me"] .wg-ico { background: rgba( 52,211,153,.16) !important; }
.wallet-group[data-class="debts"]      .wg-ico { background: rgba(255, 91, 91,.16) !important; }
.wallet-group[data-class="invest"]     .wg-ico { background: rgba(160,103,255,.16) !important; }
.wallet-group[data-class="crypto"]     .wg-ico { background: rgba(255,166, 32,.16) !important; }

.wg-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  gap: 1px;
}
.wg-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: var(--text) !important;
  text-transform: none !important;
}
.wg-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--hint) !important;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wallet-group[data-class="debts"]      .wg-sub { color: var(--destructive) !important; opacity: 0.85; }
.wallet-group[data-class="owed_to_me"] .wg-sub { color: var(--success) !important; opacity: 0.85; }

.wg-chev {
  font-size: 22px !important;
  font-weight: 300;
  color: var(--hint);
  opacity: 0.45;
  text-align: center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.14s ease;
  line-height: 1;
}
.wallet-group:not(.closed) .wg-chev { transform: rotate(90deg); opacity: 0.7; }
.wallet-group-head:hover .wg-chev { opacity: 0.9; }


/* ---- WALLET GROUP BODY — smooth accordion ---- */
.wallet-group-body {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  max-height: 6000px;
  opacity: 1;
  padding: 6px 0 4px !important;
  gap: 6px !important;
  margin: 0 !important;
  transition:
    max-height 0.30s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.18s ease,
    padding 0.18s ease;
}
.wallet-group.closed .wallet-group-body {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}


/* ---- WALLET CARD (.wc) ---- */
.wc {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.08s ease, background 0.14s ease, border-color 0.14s ease;
}
.wc:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.wc:active { transform: scale(0.995); }

/* Coloured stripe on left — class accent */
.wc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.wc[data-class="bank"]::before       { background: linear-gradient(180deg, #4287f5, #2c5fb8); }
.wc[data-class="cash"]::before       { background: linear-gradient(180deg, #27c281, #1aa66b); }
.wc[data-class="savings"]::before    { background: linear-gradient(180deg, #f5a524, #d68a14); }
.wc[data-class="owed_to_me"]::before { background: linear-gradient(180deg, #34d399, #1aa66b); }
.wc[data-class="debts"]::before      { background: linear-gradient(180deg, #ff5b5b, #d63838); }
.wc[data-class="invest"]::before     { background: linear-gradient(180deg, #a067ff, #7f44d1); }
.wc[data-class="crypto"]::before     { background: linear-gradient(180deg, #ffa620, #ed7e0b); }
.wc[data-class="other"]::before      { background: rgba(255,255,255,.10); }
.wc[data-class="excluded"]::before   { background: rgba(255,255,255,.06); }

.wc--archived { opacity: 0.55; }
/* Excluded wallets — kept in their natural group (Cash/Bank/Invest…) but
   visually demoted so the user instantly reads them as "doesn't count".
   We dim the whole row, dash the left accent bar, and grey the amount —
   the headline gets the cue without an extra label per row. */
.wc--excluded {
  opacity: 0.55;
}
.wc--excluded::before {
  /* Override the per-class colour bar with a dashed neutral one. */
  background: transparent !important;
  border-left: 2px dashed var(--hint);
}
.wc--excluded .wc-amt-main {
  color: var(--hint) !important;
  font-weight: 600;
}
.wc--excluded:hover { opacity: 0.85; }

.wc-ico-slot {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc .wallet-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 19px !important;
  background: rgba(255,255,255,0.06) !important;
}
.wc .wallet-ico.wallet-ico-chip {
  border-radius: 50% !important;
  /* inline bg from JS wins */
}

.wc-main {
  min-width: 0;
}
.wc-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.25;
}
.wc-name-text {
  /* Allow up to 2 lines for long names ("Binance USDT", "USDT TLR9Fd…").
     `word-break: break-word` so very long unbroken tokens (Tron addresses)
     also wrap instead of pushing the row wider. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.wc-tail {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  color: var(--hint);
  flex-shrink: 0;
}
.wc-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #27c281;
  box-shadow: 0 0 0 0 rgba(39, 194, 129, 0.55);
  animation: wc-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wc-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(39, 194, 129, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(39, 194, 129, 0); }
}
.wc-excluded {
  font-size: 12px;
  opacity: 0.7;
}
.wc-meta {
  font-size: 11px;
  color: var(--hint);
  opacity: 0.75;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Sync freshness chip — shown on the meta row of synced accounts. Colour
   communicates staleness at a glance: green = just synced, neutral = ok,
   yellow = worth refreshing, red = clearly stale or never. Includes a tiny
   pulsing dot on `fresh` for the live feel. */
.wc-sync-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
  opacity: 0.95;
}
.wc-sync-chip::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wc-sync-chip--fresh {
  color: #1c7e4e;
  background: color-mix(in srgb, #27c281 18%, transparent);
  border-color: color-mix(in srgb, #27c281 30%, transparent);
}
.wc-sync-chip--fresh::before {
  background: #27c281;
  box-shadow: 0 0 0 0 rgba(39, 194, 129, 0.55);
  animation: wc-pulse 2.4s ease-in-out infinite;
}
.wc-sync-chip--normal {
  color: var(--hint);
  background: color-mix(in srgb, var(--hint) 12%, transparent);
  border-color: color-mix(in srgb, var(--hint) 22%, transparent);
}
.wc-sync-chip--normal::before { background: var(--hint); }
.wc-sync-chip--stale {
  color: #b8870b;
  background: color-mix(in srgb, #f5a524 18%, transparent);
  border-color: color-mix(in srgb, #f5a524 35%, transparent);
}
.wc-sync-chip--stale::before { background: #f5a524; }
.wc-sync-chip--old, .wc-sync-chip--never {
  color: #c54141;
  background: color-mix(in srgb, #e23b3b 15%, transparent);
  border-color: color-mix(in srgb, #e23b3b 32%, transparent);
}
.wc-sync-chip--old::before, .wc-sync-chip--never::before {
  background: #e23b3b;
}
/* Light/dark adjustments — the colour-mix backgrounds already adapt, only
   the foreground text needs help in pure light theme. */
@media (prefers-color-scheme: light) {
  .wc-sync-chip--fresh  { color: #186b41; }
  .wc-sync-chip--stale  { color: #8e640a; }
  .wc-sync-chip--old, .wc-sync-chip--never { color: #a02a2a; }
}

.wc-amt {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
/* Sparkline slot — tiny inline 30-day balance trend rendered below amount.
   Empty when balance is flat or has fewer than 2 data points; the slot itself
   reserves no height in that case (svg drives layout). */
.wc-spark {
  margin-top: 2px;
  line-height: 0;
  height: 18px;
  display: flex;
  justify-content: flex-end;
}
.wc-spark:empty { display: none; }
.wc-amt-main {
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.wc-amt-sub {
  font-size: 11px;
  color: var(--hint);
  opacity: 0.7;
  white-space: nowrap;
}

.wc-sync .btn-sync {
  width: 32px !important;
  height: 32px !important;
  background: rgba(46, 163, 255, 0.12) !important;
  border: none !important;
  color: var(--button) !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wc-sync .btn-sync:hover { background: rgba(46, 163, 255, 0.22) !important; }
.wc-sync .btn-sync:active {
  transform: rotate(180deg) scale(0.92);
  background: rgba(46, 163, 255, 0.30) !important;
}
.wc-sync .btn-sync:disabled {
  background: rgba(255,255,255,0.06) !important;
  color: var(--hint) !important;
  animation: wc-spin 1.1s linear infinite;
}
@keyframes wc-spin { to { transform: rotate(360deg); } }


/* ---- TOGGLES ROW + + ADD WALLET BUTTON ---- */
#view-wallet > .row {
  margin-top: var(--s4) !important;
  gap: 8px !important;
}
#btnToggleZero, #btnToggleArchived {
  flex: 1 !important;
  padding: 11px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--hint) !important;
  text-align: center;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
#btnToggleZero:hover, #btnToggleArchived:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#btnAddAccount {
  margin-top: var(--s3) !important;
  padding: 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(46, 163, 255, 0.32) !important;
  letter-spacing: -0.1px;
}
#btnAddAccount:active {
  box-shadow: 0 2px 10px rgba(46, 163, 255, 0.20) !important;
}

#view-wallet .hint {
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin-top: var(--s4) !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(255,255,255,0.07) !important;
  color: var(--hint) !important;
}


/* ---- DETAILS PANELS (Goals) ---- */
#view-wallet > details.panel {
  margin-top: var(--s5) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  overflow: hidden;
}
#view-wallet > details.panel .panel-summary {
  padding: 14px 16px !important;
  font-size: 14px;
  font-weight: 600;
}


/* ---- REDUCED-MOTION still respected ---- */
@media (prefers-reduced-motion: reduce) {
  .wc-live { animation: none; box-shadow: none; }
  .wallet-group-body { transition: none; }
}


/* ============================================================
   END v5
   ============================================================ */


/* ---------- CALENDAR HEATMAP (month grid in Operations) ---------- */
.cal-heatmap-card {
  margin-top: var(--s2);
  padding: 12px 14px 14px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px;
}
.cal-heatmap-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 700;
}
.cal-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-dow {
  font-size: 10px; font-weight: 600; opacity: 0.55;
  text-align: center; padding: 2px 0;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cal-day {
  aspect-ratio: 1.1 / 1;
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; cursor: pointer; user-select: none;
  position: relative;
  transition: transform 0.08s ease, background 0.12s ease;
}
.cal-day:hover { background: rgba(255,255,255,0.07); }
.cal-day:active { transform: scale(0.93); }
.cal-day.empty { background: transparent; cursor: default; }
.cal-day-n {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cal-day-amt {
  font-size: 9px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-top: 1px;
}
/* Intensity buckets — same palette as the github-style strip */
.cal-day.l1 { background: #1e3a5f; }
.cal-day.l2 { background: #2a6cab; }
.cal-day.l3 { background: #d97706; }
.cal-day.l4 { background: #dc2626; }
.cal-day.l3 .cal-day-n,
.cal-day.l4 .cal-day-n { color: #fff; }
/* «Сьогодні» — синя облямівка */
.cal-day.cal-today {
  box-shadow: inset 0 0 0 2px var(--button);
}