/* ===== Icons ===== */
.ic { width: 22px; height: 22px; flex: none; }
.ci {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tc, var(--brand)) 14%, var(--surface));
  color: var(--tc, var(--brand));
}
.ci .ic { width: 21px; height: 21px; }
.ci.sm { width: 32px; height: 32px; border-radius: 10px; }
.ci.sm .ic { width: 16px; height: 16px; }
.ci.lg { width: 50px; height: 50px; border-radius: 16px; }
.ci.lg .ic { width: 24px; height: 24px; }
.ci.solid { background: var(--tc, var(--brand)); color: #fff; }

/* ===== Cards ===== */
.card {
  background: var(--surface); border-radius: var(--radius-l); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); padding: var(--space-4); margin-bottom: var(--space-4);
}
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.card-title h2 { font-size: var(--fs-m); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.card-title h2 .ic { width: 18px; height: 18px; color: var(--brand); }
.card-title a, .card-title button.link { color: var(--brand-600); font-weight: 600; font-size: var(--fs-s); display: inline-flex; align-items: center; gap: 4px; }

/* ===== Hero balance ===== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, #0f766e 0%, #0ea5a4 45%, #2563eb 130%);
  color: #fff; border-radius: 26px; padding: 22px 22px 18px; margin-bottom: var(--space-4);
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand) 60%, transparent);
}
.hero::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); z-index: -1; }
.hero::after { content: ""; position: absolute; width: 200px; height: 200px; left: -60px; bottom: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent); z-index: -1; }
.hero .label { font-size: var(--fs-s); opacity: .8; font-weight: 500; letter-spacing: .01em; }
.hero .amount { font-size: clamp(28px, 9.5vw, 40px); overflow-wrap: anywhere; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 18px; }
.hero .split { display: flex; gap: 10px; }
.hero .split > div { flex: 1; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border-radius: 14px; padding: 10px 12px; }
.hero .split .ci { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.2); color: #fff; }
.hero .split .ci .ic { width: 16px; height: 16px; }
.hero .split .label { font-size: 11px; opacity: .85; }
.hero .split .v { font-weight: 700; font-size: var(--fs-m); letter-spacing: -0.01em; }

/* ===== Wallet cards ===== */
.wallet-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter)) var(--space-3); scrollbar-width: none; align-items: stretch; }
.wallet-strip::-webkit-scrollbar { display: none; }
.wallet-card {
  --wc: var(--brand);
  flex: 0 0 172px; scroll-snap-align: start; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-1); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; transition: transform 140ms var(--ease);
}
.wallet-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: color-mix(in srgb, var(--wc) 16%, transparent); }
.wallet-card:active { transform: scale(.98); }
.wallet-card .ci { --tc: var(--wc); width: 36px; height: 36px; border-radius: 12px; }
.wallet-card .w-name { font-size: var(--fs-s); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-card .w-bal { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; margin-top: -8px; white-space: nowrap; }
.wallet-card.add { justify-content: center; align-items: center; color: var(--text-3); border: 1.5px dashed var(--border); box-shadow: none; background: transparent; min-height: 100px; }
.wallet-card.add::after { display: none; }
@media (min-width: 768px) { .wallet-strip { flex-wrap: wrap; overflow: visible; margin: 0 0 var(--space-4); padding: 0; } .wallet-card { flex: 0 0 calc(25% - 8px); } }

/* ===== Chips ===== */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 6px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 36px; line-height: 1; justify-content: center; border-radius: 999px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: var(--fs-s); font-weight: 600; white-space: nowrap; color: var(--text);
  transition: transform 120ms var(--ease), background var(--dur), border-color var(--dur);
}
.chip:hover { border-color: var(--border); }
.chip:active { transform: scale(.96); }
.chip:has(> .ci) { padding-left: 5px; }
.chip .ci { width: 26px; height: 26px; border-radius: 8px; }
.chip > .ic { width: 15px; height: 15px; margin-right: -2px; }
.chip .ci .ic { width: 15px; height: 15px; }
.chip .amt { color: var(--text-2); font-weight: 500; }
.chip.ghost { background: transparent; border: 1px dashed var(--border); color: var(--text-3); font-weight: 500; }
.chip.ghost .ic { width: 15px; height: 15px; }
.chip.sel { background: var(--brand-100); color: var(--brand-600); }

/* ===== Transaction list ===== */
.tx-group { margin-bottom: var(--space-4); }
.tx-date { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); padding: 0 6px 8px; }
.tx-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); overflow: hidden; }
.tx {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; width: 100%; text-align: left; position: relative;
  transition: background var(--dur);
}
.tx-wrap + .tx-wrap::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--border); z-index: 2; }
.tx-wrap { position: relative; }
.tx:hover { background: var(--surface-2); }
.tx .t-main { min-width: 0; }
.tx .t-cat { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.tx .t-cat .ic { width: 13px; height: 13px; color: var(--text-3); }
.tx .t-sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tx .t-amt { font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }
.empty { text-align: center; color: var(--text-3); padding: var(--space-8) var(--space-4); font-size: var(--fs-s); }
.empty .ci { margin: 0 auto 12px; width: 56px; height: 56px; border-radius: 18px; --tc: var(--text-3); }
.empty .ci .ic { width: 26px; height: 26px; }

/* ===== Segmented ===== */
.seg { display: flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { flex: 1; padding: 8px 10px; border-radius: 9px; font-size: var(--fs-s); font-weight: 600; color: var(--text-2); transition: all var(--dur); white-space: nowrap; }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg button.active[data-kind="expense"] { color: var(--expense); }
.seg button.active[data-kind="income"] { color: var(--income); }
.seg button.active[data-kind="transfer"] { color: var(--transfer); }

/* ===== Month stepper ===== */
.month-nav { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.month-nav button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.month-nav button:hover { background: var(--surface-2); }
.month-nav button .ic { width: 18px; height: 18px; }
.month-nav .m-label { min-width: 130px; text-align: center; font-weight: 700; font-size: var(--fs-s); text-transform: capitalize; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 600;
  background: var(--surface-2); color: var(--text); transition: transform 120ms var(--ease), background var(--dur), opacity var(--dur), filter var(--dur);
}
.btn .ic { width: 20px; height: 20px; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn.danger { background: var(--expense-bg); color: var(--expense); }
.btn.block { width: 100%; }
.btn.sm { height: 38px; padding: 0 14px; font-size: var(--fs-s); border-radius: 11px; }
.btn.sm .ic { width: 17px; height: 17px; }
.btn:disabled { opacity: .5; pointer-events: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); transition: background var(--dur); }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.raised { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }

/* ===== Forms ===== */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: .02em; margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--surface-2); border: 1.5px solid transparent; outline: 0;
  transition: border-color var(--dur), background var(--dur);
}
textarea.input { height: auto; min-height: 70px; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: var(--brand); background: var(--surface); }
.input::placeholder { color: var(--text-3); }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b94a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.row { display: flex; gap: var(--space-3); }
.row > * { flex: 1; min-width: 0; }
.field-err { color: var(--expense); font-size: var(--fs-xs); margin-top: 6px; }
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.search .input { padding-left: 38px; }

/* ===== Lists ===== */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: var(--space-4); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; position: relative; min-height: 58px; }
.list-row + .list-row::before { content: ""; position: absolute; left: 62px; right: 0; top: 0; height: 1px; background: var(--border); }
.list-row.plain + .list-row::before, .list-row + .list-row.plain::before { left: 14px; }
.list-row:hover { background: var(--surface-2); }
.list-row .ci { width: 36px; height: 36px; border-radius: 11px; }
.list-row .ci .ic { width: 18px; height: 18px; }
.list-row .lm { flex: 1; min-width: 0; }
.list-row .lt { font-weight: 600; }
.list-row .ls { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .lr { color: var(--text-2); font-size: var(--fs-s); display: flex; align-items: center; gap: 6px; }
.list-row .chev { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.list-row.wrap { flex-wrap: wrap; }
.list-row.wrap .seg { flex-basis: 100%; }
@media (min-width: 768px) { .list-row.wrap .seg { flex-basis: auto; min-width: 240px; } }
.section-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 4px 6px 8px; }

/* ===== Progress / budgets ===== */
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width 400ms var(--ease); }
.progress > i.warn { background: var(--warn); }
.progress > i.over { background: var(--expense); }
.budget { display: block; width: 100%; text-align: left; padding: 10px 0; }
.budget + .budget { border-top: 1px solid var(--border); }
.budget .b-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.budget .b-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.budget .b-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 5px; }

/* ===== Sheet ===== */
.sheet-backdrop {
  position: fixed; inset: 0; background: var(--overlay); z-index: 50; backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dur); display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  width: 100%; max-height: calc(100% - var(--sat) - 20px);
  background: var(--surface); border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-sheet); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 300ms var(--ease);
  padding-bottom: var(--sab);
}
.sheet-backdrop.open .sheet { transform: none; }
.sheet .grip { width: 36px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 20px; }
.sheet-head h2 { font-size: var(--fs-m); font-weight: 700; letter-spacing: -0.01em; }
.sheet-body { overflow-y: auto; padding: 4px var(--space-4) var(--space-4); -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); display: flex; gap: var(--space-3); }
@media (min-width: 768px) {
  .sheet-backdrop { align-items: center; }
  .sheet { width: 480px; max-height: calc(100% - 64px); border-radius: 24px; border: 1px solid var(--border); transform: translateY(16px) scale(.98); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur); }
  .sheet-backdrop.open .sheet { transform: none; opacity: 1; }
  .sheet .grip { display: none; }
  .sheet-head { padding-top: var(--space-4); }
}

/* ===== Amount & keypad ===== */
.amount-display {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  font-size: 44px; font-weight: 800; letter-spacing: -0.03em; padding: 8px 4px 10px; min-height: 66px;
}
.amount-display .cur { font-size: 20px; color: var(--text-3); font-weight: 600; }
.amount-display .expr { font-size: 13px; color: var(--text-3); font-weight: 500; margin-right: auto; align-self: center; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.keypad button {
  height: 52px; border-radius: 16px; background: var(--surface-2); font-size: 22px; font-weight: 600;
  display: grid; place-items: center; transition: background 100ms, transform 100ms;
  user-select: none; -webkit-user-select: none;
}
.keypad button:active { background: var(--surface-3); transform: scale(.95); }
.keypad button.op { background: var(--brand-100); color: var(--brand-600); }
.keypad button.okk { background: var(--brand); color: var(--brand-ink); }
.keypad button .ic { width: 24px; height: 24px; }

/* ===== Category grid ===== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }
@media (min-width: 400px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 14px; }
.cat-cell .ci { width: 46px; height: 46px; border-radius: 15px; transition: transform 120ms var(--ease), box-shadow 120ms, background var(--dur); }
.cat-cell .ci .ic { width: 22px; height: 22px; }
.cat-cell span:last-child { font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-cell.sel .ci { background: var(--tc, var(--brand)); color: #fff; transform: scale(1.06); box-shadow: 0 6px 16px -6px var(--tc, var(--brand)); }
.cat-cell.sel span:last-child { color: var(--text); font-weight: 600; }

/* ===== Picker rows (add sheet) ===== */
.pick-list { background: var(--surface-2); border-radius: 16px; padding: 2px 12px; margin-top: 12px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; width: 100%; text-align: left; position: relative; }
.pick-row + .pick-row::before { content: ""; position: absolute; left: 44px; right: 0; top: 0; height: 1px; background: var(--border); }
.pick-row .pi { width: 32px; height: 32px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--text-2); flex: none; }
.pick-row .pi .ic { width: 17px; height: 17px; }
.pick-row .pl { font-size: 11px; color: var(--text-3); }
.pick-row .pv { font-weight: 600; }
.pick-row input, .pick-row select { background: transparent; border: 0; outline: 0; width: 100%; padding: 0; font-weight: 600; color: var(--text); }
.pick-row input[type="date"] { -webkit-appearance: none; appearance: none; }
.pick-row .chev { width: 18px; height: 18px; color: var(--text-3); }

/* ===== Toast ===== */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--sab) + 28px); display: flex; justify-content: center; z-index: 60; pointer-events: none; }
@media (min-width: 768px) { #toast-root { bottom: 24px; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px;
  background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-2);
  font-size: var(--fs-s); font-weight: 500; max-width: calc(100% - 32px);
  animation: toast-in 220ms var(--ease);
}
.toast button { color: var(--brand); font-weight: 700; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ===== Banner ===== */
.banner { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius-l); padding: 14px; margin-bottom: var(--space-4); box-shadow: var(--shadow-1); }
.banner .ci { --tc: var(--brand); }
.banner .bt { font-weight: 700; font-size: var(--fs-s); color: var(--brand-600); margin-bottom: 2px; }
.banner .bm { font-size: var(--fs-s); }
.banner .ba { display: flex; gap: 8px; margin-top: 10px; }

/* ===== Reports ===== */
.legend { margin-top: var(--space-3); }
.legend-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; width: 100%; text-align: left; position: relative; }
.legend-row + .legend-row::before { content: ""; position: absolute; left: 44px; right: 0; top: 0; height: 1px; background: var(--border); }
.legend-row .ci { width: 34px; height: 34px; border-radius: 10px; }
.legend-row .ci .ic { width: 17px; height: 17px; }
.legend-row .ln { font-weight: 600; font-size: var(--fs-s); }
.legend-row .lp { font-size: var(--fs-xs); color: var(--text-3); }
.legend-row .la { font-weight: 700; font-size: var(--fs-s); }
.donut-wrap { position: relative; height: 230px; }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.donut-center .dl { font-size: var(--fs-xs); color: var(--text-3); }
.donut-center .dv { font-weight: 800; font-size: var(--fs-l); letter-spacing: -0.02em; }
.stat-row { display: flex; gap: 10px; margin: 0 calc(-1 * var(--gutter)) var(--space-4); padding: 2px var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.stat-row::-webkit-scrollbar { display: none; }
.stat { flex: 1 0 auto; min-width: 118px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-1); white-space: nowrap; }
@media (min-width: 768px) { .stat-row { margin: 0 0 var(--space-4); padding: 0; overflow: visible; } .stat { flex: 1 1 0; } }
.stat .sl { font-size: 11px; color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.stat .sl .ic { width: 13px; height: 13px; }
.stat .sv { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; margin-top: 3px; }

/* ===== Pickers ===== */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; transition: transform 100ms; }
.swatch.sel { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); transform: scale(1.08); }
.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icon-grid button { height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); background: var(--surface-2); }
.icon-grid button .ic { width: 20px; height: 20px; }
.icon-grid button.sel { background: var(--brand); color: var(--brand-ink); }

/* ===== Table (desktop) ===== */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); overflow: hidden; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-s); }
.table th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-2); }
.table td.r, .table th.r { text-align: right; }
.table .cell-ic { display: inline-flex; align-items: center; gap: 8px; }
.table .cell-ic .ci { width: 28px; height: 28px; border-radius: 8px; }
.table .cell-ic .ci .ic { width: 14px; height: 14px; }

/* ===== Switch ===== */
.switch { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--surface-3); transition: background var(--dur); flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform 220ms var(--ease); }
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(20px); }
.screen-head .sub { font-size: var(--fs-s); color: var(--text-3); font-weight: 500; margin-top: 2px; }

/* ===== Date picker ===== */
.dp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; }
.dp-head .icon-btn { width: 34px; height: 34px; }
.dp-title { font-weight: 700; font-size: var(--fs); text-transform: capitalize; padding: 6px 12px; border-radius: 10px; }
.dp-title:hover { background: var(--surface-2); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0 6px; }
.dp-day { height: 38px; display: grid; place-items: center; border-radius: 11px; font-weight: 600; font-size: 14px; color: var(--text); position: relative; transition: background 120ms, transform 120ms var(--ease); }
.dp-day:hover { background: var(--surface-2); }
.dp-day:active { transform: scale(.9); }
.dp-day.out { color: var(--text-3); opacity: .45; font-weight: 500; }
.dp-day.future { color: var(--text-3); }
.dp-day.today::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.dp-day.sel { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 16px -6px var(--brand); }
.dp-day.sel::after { background: var(--brand-ink); }

/* ===== Pull to refresh ===== */
.ptr { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.ptr .ptr-dot { margin-top: calc(var(--sat) + 8px); width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--brand); transform: translateY(-60px) scale(.6); opacity: 0; transition: transform 200ms var(--ease), opacity 200ms; }
.ptr .ptr-dot .ic { width: 20px; height: 20px; transition: transform 200ms; }
.ptr.pulling .ptr-dot { opacity: 1; }
.ptr.ready .ptr-dot .ic { transform: rotate(180deg); }
.ptr.loading .ptr-dot { transform: translateY(0) scale(1); opacity: 1; }
.ptr.loading .ptr-dot .ic { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cat-group + .cat-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.pick-row .pi.faint { color: var(--text-3); }

/* ===== Compact centered dialog (date picker etc.) ===== */
.sheet-backdrop.center { align-items: center; padding: 0 20px; }
.sheet-backdrop.center .sheet { width: min(370px, 100%); max-height: calc(100% - 80px); border-radius: 24px; border: 1px solid var(--border); transform: translateY(12px) scale(.96); opacity: 0; transition: transform 240ms var(--ease), opacity 200ms; padding-bottom: 0; }
.sheet-backdrop.center.open .sheet { transform: none; opacity: 1; }
.sheet-backdrop.center .grip { display: none; }
.sheet-backdrop.center .sheet-head { padding: 14px 10px 0 18px; }
.sheet-backdrop.center .sheet-head h2 { font-size: var(--fs); }
.dp .chips { margin: 0 0 8px; padding: 0; }
.dp .chip { height: 30px; padding: 0 11px; font-size: 12px; }
.dp-day { height: 40px; font-size: 14px; border-radius: 12px; }
.dp-grid { gap: 2px; }
.dp-week span { padding: 2px 0 4px; }

/* ===== Category picker (list style) ===== */
.cp-list .list-row { min-height: 52px; padding: 8px 12px; }
.cp-list .list-row.child { padding-left: 34px; }
.cp-list .list-row.child::before { left: 34px !important; }
.cp-list .list-row .check { width: 20px; height: 20px; color: var(--brand); }
.cp-list .list-row.sel { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.cp-list .list-row.sel .lt { color: var(--brand-600); }
.cp-list .list-row .lt { font-weight: 600; }
.cp-list .list-row.child .lt { font-weight: 500; }

.sheet-backdrop.anchored { align-items: flex-start; }
.sheet-backdrop.anchored .sheet { position: absolute; left: 50%; translate: -50% 0; }
.sheet-backdrop.anchored .sheet { transform: translateY(6px) scale(.94); }
.sheet-backdrop.anchored.open .sheet { transform: none; }

.cp-list .list-row .edit { width: 32px; height: 32px; color: var(--text-3); opacity: .55; }
.cp-list .list-row .edit .ic { width: 16px; height: 16px; }
.cp-list .list-row:hover .edit { opacity: 1; }

/* wallet badge on transaction tiles */
.tile-wrap { position: relative; width: 42px; height: 42px; flex: none; }
.w-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 7px; background: var(--tc); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.w-badge .ic { width: 11px; height: 11px; stroke-width: 2.4; }

/* sticky filter block (transactions) */
.sticky-controls { position: sticky; top: calc(-28px - var(--sat)); z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 2px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sticky-controls .chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.sticky-controls .row { margin-bottom: 10px; }
@media (min-width: 768px) { .sticky-controls { top: calc(-1 * var(--space-6)); margin: 0; padding: 8px 0 2px; } }

/* month picker */
.mp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 6px; }
.mp-cell { height: 44px; border-radius: 12px; font-weight: 600; font-size: 14px; text-transform: capitalize; background: var(--surface-2); color: var(--text); position: relative; transition: background 120ms, transform 120ms var(--ease); }
.mp-cell:active { transform: scale(.94); }
.mp-cell.future { color: var(--text-3); }
.mp-cell.today::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.mp-cell.sel { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 16px -6px var(--brand); }

.icon-btn.active { background: var(--brand-100); color: var(--brand-600); border-color: transparent; }

.search-sum { font-size: 12px; color: var(--text-3); font-weight: 600; padding: 0 6px 8px; }

/* loading bar (shown only when a redraw takes a while) */
.loading-bar { position: sticky; top: 0; z-index: 9; height: 3px; margin: -4px 0 4px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 200% 100%; animation: loading-slide 1s linear infinite; }
@keyframes loading-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.load-more { display: flex; justify-content: center; padding: 12px; color: var(--text-3); }
.load-more .ic { animation: spin 900ms linear infinite; }

/* category tree depths */
.cp-list .list-row.d1 { padding-left: 34px; }
.cp-list .list-row.d2 { padding-left: 58px; }
.cp-list .list-row.d1::before { left: 34px !important; }
.cp-list .list-row.d2::before { left: 58px !important; }
.cp-list .list-row.d1 .lt, .cp-list .list-row.d2 .lt { font-weight: 500; }
.cp-list .list-row.d0 .lt { font-weight: 700; }
/* horizontal rails inside sheets must keep native horizontal panning */
.chips, .stat-row, .wallet-strip { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }

.tx-list, .tx-wrap, .tx { touch-action: pan-y; }
#view { -webkit-overflow-scrolling: touch; }

/* wallet cards as selector */
.wallet-card { text-align: left; cursor: pointer; border: 1.5px solid var(--border); }
.wallet-card.sel { border-color: var(--wc); box-shadow: 0 0 0 1px var(--wc), var(--shadow-1); }
.wallet-card.sel .w-name { color: var(--text); font-weight: 600; }

/* drag to reorder categories */
.cp-list .drag-row { padding-right: 6px; position: relative; }
.cp-list .drag-row .row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.cp-list .drag-row .grip { width: 36px; height: 44px; display: grid; place-items: center; color: var(--text-3); touch-action: none; cursor: grab; border-radius: 10px; }
.cp-list .drag-row .grip:active { cursor: grabbing; background: var(--surface-2); }
.cp-list .drag-row .grip .ic { width: 18px; height: 18px; }
.cp-list .drag-row.dragging { opacity: .85; z-index: 3; background: var(--surface); box-shadow: var(--shadow-2); transition: none; }
.cp-list { position: relative; }
html[data-anim="on"] .cp-list.reordering .drag-row:not(.dragging) { transition: transform 180ms var(--ease); }
.cp-list .drag-row.snapping { transition: transform 180ms var(--ease); z-index: 3; position: relative; }
.cp-list .drag-row.dragging { transition: none; }

/* reports drill-down crumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 10px; font-size: 13px; }
.crumb { color: var(--brand-600); font-weight: 600; padding: 4px 6px; border-radius: 8px; }
.crumb:hover { background: var(--surface-2); }
.crumb.cur { color: var(--text); pointer-events: none; }
.crumb-sep { color: var(--text-3); }
.legend-row .chev { width: 16px; height: 16px; color: var(--text-3); margin-left: 6px; }
.legend-row { grid-template-columns: 34px 1fr auto auto; }
a.legend-row .chev { display: none; }
.stat-row .stat { min-width: 128px; }

.cp-list .check-empty { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); flex: none; }
.cp-list .list-row.sel .check { color: var(--brand); }

/* back pill (drill-down) */
.back-pill { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--brand-100); color: var(--brand-600); font-weight: 600; font-size: var(--fs-s); max-width: 46%; }
.back-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-pill .ic { width: 20px; height: 20px; stroke-width: 2.4; flex: none; }
.back-pill:active { transform: scale(.96); }
.screen-head.drilled h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sticky-controls.with-head { top: calc(-28px - var(--sat)); padding-top: calc(var(--sat) + 14px); }
.sticky-controls .screen-head { min-height: 40px; }

/* insights */
.ins-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ins-row:last-of-type { border-bottom: 0; }
.ins-row .ins-l { font-weight: 600; font-size: var(--fs-s); }
.ins-row .ins-v { font-weight: 700; text-align: right; }
.ins-row .ins-d { font-size: 12px; font-weight: 600; grid-column: 2; text-align: right; }
.ins-row .faint { grid-column: 1; grid-row: 2; }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ins-tile { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; text-align: left; min-width: 0; }
.ins-tile .sl { font-size: 11px; color: var(--text-3); font-weight: 600; }
.ins-tile .sv { font-weight: 800; font-size: 15px; margin-top: 2px; letter-spacing: -0.01em; }

/* assistant */
.tabbar a { position: relative; }
.tabbar a.has-dot::after { content: ''; position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 2px var(--bg); }
.sidebar a.has-dot::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); margin-left: auto; }
.ast-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--tc); border-radius: var(--radius-l); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-1); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.ast-card.gone { opacity: 0; transform: translateX(24px); }
.ast-body { flex: 1; min-width: 0; }
.ast-t { font-weight: 700; font-size: var(--fs-s); color: var(--text-2); margin-bottom: 2px; }
.ast-m { font-size: var(--fs-s); line-height: 1.4; }
.ast-a { display: flex; gap: 8px; margin-top: 10px; }
.ast-a > .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; padding-left: 10px; padding-right: 10px; }
.ast-empty { text-align: center; padding: 48px 16px; }
.ast-empty .ci { margin: 0 auto 12px; }
.ast-empty .bt { font-weight: 700; margin-bottom: 4px; }
.ast-line { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: var(--space-4); border-radius: var(--radius-l); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); font-weight: 600; font-size: var(--fs-s); color: var(--text); }
.ast-line .ic { color: var(--brand-600); }
.ast-line span { flex: 1; }
.ast-line .chev { color: var(--text-3); }
.chip b { font-weight: 700; margin-left: 2px; }
.legend-row.no-chev { cursor: default; }
.ast-w { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); vertical-align: middle; }
.ast-w .ic { width: 12px; height: 12px; }
.ast-x { display: flex; gap: 4px; margin-top: 8px; margin-left: -6px; }
.ast-x button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ast-x button .ic { width: 14px; height: 14px; }
.ast-x button:hover { color: var(--text-2); background: var(--surface-2); }
.app-logo { width: 40px; height: 40px; border-radius: 12px; flex: none; box-shadow: 0 4px 12px -4px rgba(14,116,144,.5); }
.screen-head .app-logo { margin-right: 12px; }
.sidebar .logo .app-logo { width: 36px; height: 36px; }
.t-amt .pend { display: inline-flex; vertical-align: middle; margin-right: 4px; color: var(--c-amber); }
.t-amt .pend .ic { width: 13px; height: 13px; }
.icon-btn.sync-warn { color: var(--c-amber); }
.icon-btn[hidden] { display: none; }
.install-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; transition: opacity 320ms var(--ease); }
.install-overlay.out { opacity: 0; pointer-events: none; }
.install-overlay .app-logo { width: 72px; height: 72px; border-radius: 20px; }
.install-overlay .msg { font-size: var(--fs-s); color: var(--text-2); max-width: 280px; }
.install-overlay .bar { width: 200px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.install-overlay .bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width 200ms var(--ease); }
.plan-line { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-bottom: var(--space-4); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-s); color: var(--text-2); text-align: left; }
.plan-line .ic { color: var(--brand-600); }
.plan-line.expired { border-color: color-mix(in srgb, var(--c-red) 40%, var(--border)); color: var(--text); }
.plan-line.expired .ic { color: var(--c-red); }
.plan-line span { flex: 1; }
.plan-line .chev { color: var(--text-3); }
.pw-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pw-head .app-logo { width: 52px; height: 52px; border-radius: 16px; }
.pw-t { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.pw-note { font-size: var(--fs-s); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.pw-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.pw-list li { display: flex; gap: 10px; align-items: center; font-size: var(--fs-s); }
.pw-list .ic { width: 18px; height: 18px; color: var(--brand-600); flex: none; }
.byline, .side-foot a, .list-row .ls a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
.byline:hover, .side-foot a:hover { text-decoration: underline; }
.first-card { text-align: center; padding: 22px 16px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--radius-l); display: grid; justify-items: center; gap: 8px; }
.first-card .bt { font-weight: 700; }
.first-card .btn { margin-top: 6px; }
/* onboarding */
.onb { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--sat, 0px) + 12px) 20px calc(var(--sab, 0px) + 20px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.onb.out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.onb-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.onb-top .link { color: var(--text-3); font-weight: 600; font-size: var(--fs-s); }
.onb-dots { display: flex; gap: 6px; }
.onb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: width 200ms var(--ease), background 200ms; }
.onb-dots i.on { width: 20px; background: var(--brand); }
.onb-body { flex: 1; overflow: auto; display: flex; flex-direction: column; justify-content: center; max-width: 440px; width: 100%; margin: 0 auto; animation: onb-in 320ms var(--ease) both; }
@keyframes onb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.onb-hero { display: flex; justify-content: center; margin-bottom: 20px; }
.onb-hero .app-logo { width: 88px; height: 88px; border-radius: 26px; }
.onb-hero .ci { width: 72px; height: 72px; border-radius: 22px; }
.onb-hero .ci .ic { width: 34px; height: 34px; }
.onb h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin: 0 0 6px; }
.onb-sub { text-align: center; color: var(--text-2); font-size: var(--fs-s); margin: 0 0 22px; }
.onb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.onb-list li { display: flex; gap: 12px; align-items: center; font-size: var(--fs-s); }
.onb-check { display: flex; gap: 10px; align-items: center; font-size: var(--fs-s); margin-top: 6px; }
.onb-check input { width: 20px; height: 20px; accent-color: var(--brand); }
.onb-foot { max-width: 440px; width: 100%; margin: 12px auto 0; }
.onb-body { padding-bottom: 12px; }