/* Shared mobile design tokens; Telegram colors are mapped in theme.js. */
:root {
  color-scheme:light;
  --bg:#f5f6f4;
  --surface:#ffffff;
  --surface-soft:#edefec;
  --text:#202d29;
  --muted:#63726b;
  --line:#e1e6e1;
  --accent:#17664c;
  --on-accent:#fff;
  --accent-soft:#e7f1eb;
  --positive:#18704d;
  --negative:#b13d3d;
  --negative-soft:#fbedeb;
  --hero:#173e32;
  --hero-text:#f6faf7;
  --hero-muted:#c1d6ca;
  --radius:24px;
  --radius-sm:16px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --nav-height:68px;
  --safe-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px));
  --safe-left:max(env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px),var(--tg-content-safe-area-inset-left,0px));
  --safe-right:max(env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px),var(--tg-content-safe-area-inset-right,0px));
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#151c19;
  --surface:#202924;
  --surface-soft:#2b352f;
  --text:#edf2ee;
  --muted:#a8b8ac;
  --line:#354139;
  --accent:#95d4b2;
  --on-accent:#142b20;
  --accent-soft:#293e32;
  --positive:#9cdbb8;
  --negative:#ffa7a1;
  --negative-soft:#432d2b;
  --hero:#264e3e;
  --hero-muted:#cfdfd3;
}

* {
  box-sizing:border-box
}

[hidden] {
  display:none!important
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.45
}

button,input,textarea {
  font:inherit
}

button,a,input {
  -webkit-tap-highlight-color:transparent
}

button {
  color:inherit;
  cursor:pointer;
  border:0;
  background:transparent;
  touch-action:manipulation
}

button:disabled {
  cursor:default;
  opacity:.46
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}

button,a {
  transition:background-color 120ms ease,color 120ms ease
}

button:active:not(:disabled) {
  filter:brightness(.94)
}

svg {
  width:22px;
  height:22px;
  flex:0 0 auto;
  vertical-align:middle
}

a {
  color:var(--accent);
  text-decoration:none
}

h1,h2,h3,p {
  margin:0
}

input {
  width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  padding:11px 13px;
  font-size:16px;
  outline:none
}

input::placeholder {
  color:var(--muted);
  opacity:.85
}

input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft)
}

input[aria-invalid="true"] {
  border-color:var(--negative)
}

input[type="number"] {
  appearance:textfield;
  -moz-appearance:textfield
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0
}

#app {
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  min-height:var(--tg-viewport-stable-height,100dvh);
  padding-left:var(--safe-left);
  padding-right:var(--safe-right)
}

.screen {
  padding-top:var(--safe-top);
  padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 20px)
}

.screen.flow-screen {
  padding-bottom:calc(106px + var(--safe-bottom))
}

.topbar {
  min-height:76px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:12px
}

.topbar h1,.logo {
  font-size:21px;
  font-weight:700;
  letter-spacing:-.55px;
  min-width:0;
  overflow-wrap:anywhere
}

.topbar.with-back {
  min-height:68px;
  padding:10px 16px;
  gap:8px
}

.topbar.with-back .logo {
  font-size:18px;
  letter-spacing:-.25px
}

.brand-mark {
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--on-accent);
  width:38px;
  height:38px;
  border-radius:12px;
  font-weight:750;
  font-size:23px;
  letter-spacing:-2px;
  padding-right:2px
}

.brand-copy {
  flex:1
}

.eyebrow,.subtle {
  font-size:12px;
  color:var(--muted)
}

.header-avatar {
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--surface-soft);
  color:var(--accent);
  font-size:13px;
  font-weight:700
}

.content {
  padding:0 var(--space-5)
}

.section {
  margin-top:var(--space-6)
}

.section-title,.section-heading h2 {
  font-size:15px;
  font-weight:650;
  letter-spacing:-.15px;
  margin:20px 0 10px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:22px 0 10px
}

.section-heading h2 {
  margin:0
}

.section-heading a,.text-btn {
  font-size:13px;
  font-weight:600;
  padding:12px 0;
  min-height:44px
}

.section-heading a {
  margin:-12px 0
}

.section-heading a {
  display:flex;
  align-items:center
}

.glass-card,.surface,.settings-list,.report-list {
  background:var(--surface);
  border-radius:var(--radius)
}

.balance-card {
  padding:22px;
  border-radius:20px;
  color:var(--hero-text);
  background:var(--hero)
}

.balance-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--hero-muted)
}

.label {
  font-size:13px;
  font-weight:500
}

.balance-amount {
  font-size:clamp(25px,7.6vw,34px);
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.balance-card .balance-amount {
  margin:10px 0 18px
}

.balance-meta {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--hero-muted)
}

.balance-meta svg {
  width:16px;
  height:16px
}

.badge {
  color:var(--hero-muted);
  font-size:12px
}

.balance-card .badge.negative {
  color:#ffd3cf
}

.month-summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-3);
  margin:14px 0
}

.month-stat {
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px
}

.stat-caption {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px
}

.stat-caption svg {
  width:17px;
  height:17px
}

.stat-number,.stat-value {
  font-weight:650;
  font-size:20px;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  letter-spacing:-.4px
}

.stat-number {
  font-size:18px
}

.currency {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0
}

.positive,.green-text {
  color:var(--positive)
}

.negative,.red-text {
  color:var(--negative)
}

.muted,.stat-label,.stat-sub {
  color:var(--muted)
}

.stat-label,.stat-sub {
  font-size:12px
}

.stat-value {
  margin-top:6px
}

.stat-sub {
  margin-top:6px
}

.btn-primary,.btn-secondary,.btn-tertiary {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-weight:650;
  font-size:15px
}

.btn-primary {
  background:var(--accent);
  color:var(--on-accent)
}

.btn-secondary {
  background:var(--surface-soft);
  color:var(--text)
}

.btn-tertiary {
  color:var(--accent)
}

.btn-block,.btn-big {
  width:100%
}

.btn-danger {
  color:var(--negative);
  background:var(--negative-soft)
}

.back-btn,.icon-btn {
  width:44px;
  min-width:44px;
  height:44px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:var(--radius-sm);
  font-size:22px
}

.back-btn {
  background:var(--surface)
}

.icon-btn:hover,.btn-tertiary:hover {
  background:var(--surface-soft)
}

.icon-btn svg {
  width:20px;
  height:20px
}

.bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  width:min(100%,640px);
  min-height:calc(var(--nav-height) + var(--safe-bottom));
  padding:5px max(12px,var(--safe-right)) calc(5px + var(--safe-bottom)) max(12px,var(--safe-left));
  display:flex;
  background:var(--surface);
  border-top:1px solid var(--line)
}

.nav-item {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:11px;
  font-weight:550;
  color:var(--muted);
  border-radius:12px;
  min-height:56px
}

.nav-item svg {
  width:23px;
  height:23px
}

.nav-item.active {
  color:var(--accent);
  background:var(--accent-soft)
}

.keyboard-open .bottom-nav {
  display:none
}

.action-bar {
  position:fixed;
  z-index:25;
  bottom:var(--keyboard-offset,0px);
  left:50%;
  transform:translateX(-50%);
  width:min(100%,640px);
  padding:12px max(20px,var(--safe-right)) calc(12px + var(--safe-bottom)) max(20px,var(--safe-left));
  background:var(--surface);
  border-top:1px solid var(--line)
}

.action-bar .field-hint {
  margin:0 0 8px;
  text-align:center;
  font-size:12px
}

.keyboard-open .action-bar {
  padding-bottom:10px
}

.keyboard-open .action-bar .field-hint {
  display:none
}

.seg-tabs,.mode-switch {
  display:flex;
  background:var(--surface-soft);
  padding:4px;
  border-radius:13px;
  gap:3px;
  margin-bottom:20px
}

.seg-tabs button,.mode-btn {
  min-width:0;
  flex:1;
  min-height:44px;
  padding:9px 7px;
  font-weight:600;
  font-size:13px;
  color:var(--muted);
  border-radius:9px
}

.seg-tabs button.active,.mode-btn.active {
  background:var(--surface);
  color:var(--text)
}

#hist-period-type {
  margin-bottom:12px
}

.accounts-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.account-card {
  background:var(--surface);
  text-align:left;
  padding:16px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}

.account-card .name {
  color:var(--muted);
  font-size:13px;
  overflow-wrap:anywhere
}

.account-card .amount {
  font-size:18px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.account-card .account-icon {
  color:var(--accent);
  margin-bottom:4px
}

.account-list {
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden
}

.account-list-row {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  text-align:left
}

.account-list-row + .account-list-row {
  border-top:1px solid var(--line)
}

.account-icon-box {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--accent);
  flex-shrink:0
}

.account-copy {
  flex:1;
  min-width:0
}

.account-copy strong {
  display:block;
  font-size:14px;
  font-weight:600;
  overflow-wrap:anywhere
}

.account-copy small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}

.account-list-row .account-value {
  font-variant-numeric:tabular-nums;
  font-weight:600;
  text-align:right;
  font-size:14px;
  max-width:50%;
  overflow-wrap:anywhere
}

.account-list-row > svg {
  width:15px;
  color:var(--muted)
}

.kredit-card {
  width:100%;
  text-align:left;
  margin-top:12px;
  padding:16px;
  border-radius:var(--radius);
  background:var(--surface)
}

.kredit-card .section-title {
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:8px
}

.kredit-row {
  display:flex;
  gap:12px;
  justify-content:space-between;
  font-size:13px;
  padding:5px 0
}

.kredit-row > :last-child {
  text-align:right;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  min-width:0
}

.section-total {
  font-size:27px;
  font-weight:650;
  letter-spacing:-.7px;
  margin:4px 0 16px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.category-list {
  padding:0 16px;
  background:var(--surface);
  border-radius:var(--radius)
}

.category-row {
  padding:16px 0
}

.category-row + .category-row {
  border-top:1px solid var(--line)
}

.cat-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  margin-bottom:9px
}

.cat-top > :first-child {
  overflow-wrap:anywhere;
  min-width:0
}

.cat-top > :last-child {
  font-variant-numeric:tabular-nums;
  text-align:right;
  flex-shrink:0;
  font-weight:550
}

.progress-track {
  height:5px;
  background:var(--surface-soft);
  border-radius:4px;
  overflow:hidden
}

.progress-fill {
  height:100%;
  background:var(--accent);
  border-radius:inherit
}

.link-full-report {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  margin-top:18px;
  background:var(--surface);
  border-radius:var(--radius);
  font-size:14px;
  font-weight:600;
  min-height:52px
}

.report-row,.report-total {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  font-size:14px
}

.report-row + .report-row {
  border-top:1px solid var(--line)
}

.report-row > :first-child {
  min-width:0;
  overflow-wrap:anywhere
}

.report-row > :last-child,.report-total > :last-child {
  font-variant-numeric:tabular-nums;
  text-align:right;
  font-weight:600
}

.report-total {
  font-weight:650
}

.period-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:14px
}

#hist-period-label,#overview-month-label {
  text-align:center;
  font-size:15px;
  font-weight:650
}

.period-nav .icon-btn {
  background:var(--surface);
  font-size:28px
}

#overview-month-next:disabled { opacity:.4; cursor:default; }

.hist-summary {
  display:flex;
  padding:10px 0 14px;
  gap:16px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line)
}

.hist-summary > div:not(.divider) {
  flex:1;
  min-width:0
}

.hist-summary .stat-value {
  font-size:17px;
  overflow-wrap:anywhere
}

.hist-summary #hist-kirim { color:var(--positive); }

.hist-period-nav {
  margin:0 0 8px
}

.hist-period-nav #hist-period-label {
  font-size:19px;
  font-weight:700;
  text-transform:capitalize
}

.hist-period-nav .icon-btn {
  background:transparent;
  font-size:22px
}

.history-filters {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  margin-bottom:10px
}

.history-filters select { width:100%; min-width:0; max-width:100%; }

#hist-search {
  display:block;
  width:100%;
  min-width:0;
  margin:0 0 8px;
}

.history-export {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:center;
  margin:10px 0 16px;
}

.history-export label { grid-column:1 / -1; font-size:12px; color:var(--muted); }
.history-export select,.history-export button { min-width:0; width:100%; height:48px; }
.history-export button { white-space:nowrap; }

.divider {
  width:1px;
  background:var(--line)
}

.day-header,.day-title {
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  margin:22px 0 8px;
  text-transform:none
}

#hist-list .day-title {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:18px 0 6px
}

#hist-list .day-title span:last-child { font-weight:400; }

#hist-list .tx-row {
  min-height:60px;
  padding:9px 0;
  gap:8px
}

#hist-list .tx-icon {
  width:30px;
  height:30px;
  border-radius:9px
}

#hist-list .tx-icon svg { width:17px; height:17px; }

.tx-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  width:100%;
  min-height:72px;
  outline-offset:-2px
}

.tx-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--surface);
  color:var(--muted)
}

.tx-row.income .tx-icon {
  color:var(--positive);
  background:var(--accent-soft)
}

.tx-main {
  flex:1;
  min-width:0
}

.tx-name {
  font-weight:550;
  font-size:14px;
  overflow-wrap:anywhere
}

.tx-sub {
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  overflow-wrap:anywhere
}

.tx-right {
  text-align:right;
  max-width:48%;
  min-width:0
}

.tx-amount {
  font-size:14px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.tx-row.income .tx-amount {
  color:var(--positive)
}

.tx-row.expense .tx-amount {
  color:var(--negative)
}

.tx-balance {
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  font-variant-numeric:tabular-nums
}

.debts-summary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:24px
}

.debt-stat {
  padding:15px;
  background:var(--surface);
  border-radius:var(--radius)
}

.debt-stat .stat-value {
  color:var(--positive);
  font-size:20px
}

.debt-stat.owed .stat-value {
  color:var(--negative)
}

.debt-card {
  padding:16px;
  margin:10px 0;
  background:var(--surface);
  border-radius:var(--radius)
}

.debt-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:12px
}

.debt-card-clickable { cursor:pointer; }
.debt-card-clickable:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.debt-history-comment { color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin-top:4px; }
.debt-history-summary { padding:20px; margin-bottom:24px; }
.debt-history-summary .stat-value { font-size:28px; margin:5px 0; overflow-wrap:anywhere; }
#debt-hist-list .day-title { display:flex; justify-content:space-between; gap:8px; }
#debt-hist-list .day-title span:last-child { font-weight:400; }
#debt-hist-list .tx-row { padding:14px 16px; }
.funding-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
.funding-dialog fieldset { border:0; padding:0; margin:16px 0; min-width:0; }
.funding-dialog legend { font-weight:650; margin-bottom:8px; }
.funding-dialog .funding-choice { display:flex; align-items:center; gap:10px; min-height:48px; font-weight:400; }
.funding-dialog input[type=radio] { width:20px; min-height:20px; flex-shrink:0; }
.funding-dialog select { width:100%; min-height:48px; margin:8px 0 12px; padding:12px 14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text); font:inherit; }
.funding-dialog input[type=radio] { accent-color:var(--accent); }
#confirm-description { white-space:pre-line; }

.debt-name {
  font-weight:600;
  overflow-wrap:anywhere;
  min-width:0
}

.debt-amount {
  font-variant-numeric:tabular-nums;
  font-weight:650;
  text-align:right
}

.debt-progress {
  margin-top:14px
}

.debt-progress-text {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}

.amount-entry {
  padding:4px 0 14px;
  text-align:center;
  border-bottom:1px solid var(--line);
  margin-bottom:20px
}

.amount-entry > label {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px
}

.amount-input-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0
}

#tx-amount {
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  text-align:center;
  width:100%;
  font-size:clamp(27px,9vw,38px);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-1px;
  padding:6px 0;
  font-variant-numeric:tabular-nums
}

.amount-input-row > span {
  color:var(--muted);
  font-size:14px;
  flex-shrink:0
}

.amount-display {
  color:var(--accent);
  min-height:44px;
  font-size:12px;
  padding:8px 12px;
  margin-bottom:-12px
}

.form-section {
  margin:20px 0
}

.form-section .section-title {
  margin-top:0
}

.pill-grid {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.pill-btn {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  min-height:44px;
  font-size:13px;
  font-weight:550;
  text-align:left;
  overflow-wrap:anywhere;
  max-width:100%
}

.pill-btn.selected {
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent)
}

.pill-btn.selected::before {
  content:"✓";
  display:inline-block;
  margin-right:5px
}

.special {
  margin-top:10px
}

.special-btn {
  background:transparent;
  color:var(--muted);
  border-style:dashed
}

.special-btn.selected {
  border-style:solid
}

.dynamic-field {
  margin:18px 0
}

.dynamic-field > label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px
}

.dynamic-field .pill-grid + input {
  margin-top:12px
}

.field-hint {
  color:var(--muted);
  font-size:12px;
  margin-top:7px
}

.field-error {
  color:var(--negative);
  font-size:12px;
  margin:6px 0 0
}

.keypad {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:16px 0;
  padding:10px;
  background:var(--surface-soft);
  border-radius:var(--radius)
}

.keypad button {
  min-height:46px;
  font-size:22px;
  border-radius:9px;
  background:var(--surface)
}

.profile-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px
}

.profile-avatar {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:650;
  font-size:17px;
  flex-shrink:0
}

.profile-name {
  font-size:17px;
  font-weight:650;
  overflow-wrap:anywhere
}

.profile-sub {
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}

.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  gap:10px
}

.row-label {
  font-weight:550;
  font-size:14px;
  overflow-wrap:anywhere
}

.row-value {
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
  font-variant-numeric:tabular-nums
}

#settings-accounts-list,#settings-categories-list {
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden
}

.settings-account-row + .settings-account-row {
  border-top:1px solid var(--line)
}

.account-row-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px 10px 16px;
  min-height:64px;
  gap:4px
}

.account-row-main > div:first-child {
  min-width:0
}

.row-actions {
  display:flex;
  flex-shrink:0
}

.deactivate-account,.deactivate-category {
  color:var(--muted)
}

.deactivate-account:hover,.deactivate-category:hover {
  color:var(--negative);
  background:var(--negative-soft)
}

.cat-name-input {
  border-color:transparent;
  background:transparent;
  padding-left:0;
  font-size:14px;
  min-height:44px;
  border-radius:6px
}

.cat-name-input:focus {
  padding-left:8px;
  border-color:var(--accent)
}

.save-category {
  color:var(--accent)
}

#settings-add-account {
  margin-top:12px
}

.account-edit-form,#settings-account-form {
  padding:0 16px 16px;
  background:var(--surface-soft);
  border-radius:var(--radius)
}

#settings-account-form {
  margin-top:12px;
  padding-top:1px
}

.yesno-row {
  display:flex;
  gap:8px
}

.yesno-row > button {
  flex:1;
  text-align:center
}

.new-category {
  display:flex;
  align-items:end;
  gap:10px;
  margin-top:14px
}

.new-category .dynamic-field {
  flex:1;
  min-width:0;
  margin:0
}

.new-category button {
  width:48px;
  height:48px;
  flex-shrink:0
}

.empty-state,.placeholder {
  padding:28px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  width:100%
}

.empty-state svg {
  width:28px;
  height:28px;
  margin-bottom:10px;
  opacity:.8
}

.empty-state strong {
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:600;
  margin-bottom:5px
}

.empty-state p {
  max-width:260px;
  margin:auto
}

.empty-state button {
  margin:12px auto 0
}

.accounts-grid > .empty-state {
  grid-column:1/-1
}

.skeleton {
  padding:18px 0
}

.skeleton span {
  display:block;
  height:13px;
  margin-bottom:12px;
  border-radius:5px;
  background:var(--surface-soft)
}

.skeleton span:nth-child(2n) {
  width:60%
}

.screen[aria-busy="true"] .balance-amount,.screen[aria-busy="true"] .stat-number {
  opacity:.45
}

.toast {
  position:fixed;
  z-index:150;
  bottom:calc(var(--nav-height) + var(--safe-bottom) + 14px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-radius:12px;
  background:var(--text);
  color:var(--bg);
  font-size:14px;
  box-shadow:0 4px 20px #0002
}

.toast.error {
  background:var(--negative);
  color:var(--bg)
}

.toast svg {
  width:19px;
  height:19px
}

.keyboard-open .toast {
  bottom:calc(var(--keyboard-offset,0px) + 86px)
}

.fatal-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:var(--bg);
  padding:28px
}

.fatal-box {
  max-width:360px;
  text-align:center
}

.fatal-box .brand-mark {
  margin:0 auto 24px
}

.fatal-box h2 {
  font-size:21px;
  margin-bottom:12px
}

#fatal-message {
  color:var(--muted);
  margin-bottom:24px;
  overflow-wrap:anywhere
}

dialog {
  position:fixed;
  inset:auto 0 0;
  margin:0 auto;
  width:min(100%,640px);
  max-width:640px;
  max-height:calc(90dvh - var(--safe-top));
  padding:12px 24px calc(24px + var(--safe-bottom));
  background:var(--surface);
  color:var(--text);
  border:0;
  border-radius:24px 24px 0 0;
  overflow:auto
}

dialog::backdrop {
  background:#0a161c80
}

.sheet-handle {
  width:36px;
  height:4px;
  border-radius:4px;
  background:var(--line);
  margin:0 auto 24px
}

dialog h2 {
  font-size:20px;
  letter-spacing:-.4px
}

dialog p {
  color:var(--muted);
  font-size:14px;
  margin:10px 0 24px
}

.sheet-actions {
  display:flex;
  gap:10px
}

.sheet-actions button {
  flex:1
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(min-width:680px) {
  #app {
    border-left:1px solid var(--line);
    border-right:1px solid var(--line)
  }
  .content {
    padding:0 28px
  }
  .topbar {
    padding-left:28px;
    padding-right:28px
  }
  dialog {
    inset:0;
    margin:auto;
    border-radius:20px;
    max-width:420px;
    height:fit-content
  }
  .sheet-handle {
    display:none
  }
  dialog h2 {
    margin-top:16px
  }
}

@media(max-width:350px) {
  .content {
    padding:0 16px
  }
  .topbar {
    padding-left:16px;
    padding-right:16px
  }
  .balance-card {
    padding:18px
  }
  .month-stat,.debt-stat {
    padding:12px
  }
  .stat-number {
    font-size:16px
  }
  .cat-top {
    font-size:12px
  }
  .account-list-row {
    gap:8px;
    padding:14px 12px
  }
  .account-icon-box {
    width:34px;
    height:36px
  }
  .account-card {
    padding:13px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important
  }
}

.load-more {
  margin-top:16px
}

.amount-input-row .field-error {
  width:100%
}

.new-category:has(.field-error:not([hidden])) {
  align-items:center
}

.opening-entry { margin:12px 0; }
.opening-intro { font-size:15px; margin-bottom:8px; }
.opening-account { margin-top:16px; padding:20px; border-radius:var(--radius); background:var(--surface); }
.opening-account-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.opening-account h2 { font-size:17px; min-width:0; overflow-wrap:anywhere; }
.opening-account label { display:block; font-weight:600; font-size:13px; margin:16px 0 8px; }
.opening-preview { margin-top:12px; font-size:13px; font-variant-numeric:tabular-nums; }
.opening-preview > div { display:flex; justify-content:space-between; gap:12px; margin-top:8px; }
.opening-preview span { color:var(--muted); }
.opening-preview strong { text-align:right; max-width:55%; overflow-wrap:anywhere; }
.opening-status { margin:12px 0; }
.opening-tabs { margin-top:16px; }
.opening-tabs button { font-size:12px; }
.opening-account select,.interest-choice,#hist-account,#hist-filter,#hist-export-format {
  width:100%; min-width:0; min-height:48px; padding:10px 12px;
  font:inherit; font-size:16px; color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.opening-account select:focus-visible,.interest-choice:focus-visible,#hist-account:focus-visible,#hist-filter:focus-visible,#hist-export-format:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

#hist-summary-scope { margin:0 0 12px; }
.opening-debt-list-title { margin-top:24px; }
#opening-debt-form > .field-hint { margin-top:12px; }
#opening-debt-list { margin-top:12px; }

/* Liquid Glass: floating controls over stable, readable content surfaces.
   Solid backgrounds are the fallback for older Telegram WebViews. */
:root {
  --glass-edge:rgba(255,255,255,.8);
  --glass-shadow:0 8px 28px rgba(24,45,38,.1),inset 0 1px 0 rgba(255,255,255,.65);
}
:root[data-theme="dark"] {
  --glass-edge:rgba(255,255,255,.17);
  --glass-shadow:0 8px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);
}
body {
  background-image:radial-gradient(ellipse at 100% 0%,var(--accent-soft),transparent 65%);
  background-attachment:fixed;
}
.bottom-nav {
  width:min(calc(100% - 24px - var(--safe-left) - var(--safe-right)),608px);
  bottom:calc(10px + var(--safe-bottom));
  min-height:68px;
  padding:5px;
  gap:3px;
  border:1px solid var(--glass-edge);
  border-radius:36px;
  box-shadow:var(--glass-shadow);
}
.nav-item { border-radius:28px; }
.nav-item.active {
  box-shadow:inset 0 1px 0 var(--glass-edge);
}
.screen { padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 38px); }
.flow-screen { padding-bottom:calc(130px + var(--safe-bottom)); }
.action-bar {
  width:min(calc(100% - 24px - var(--safe-left) - var(--safe-right)),608px);
  bottom:calc(var(--keyboard-offset,0px) + 10px + var(--safe-bottom));
  border:1px solid var(--glass-edge);
  border-radius:28px;
  padding:12px;
  box-shadow:var(--glass-shadow);
}
.keyboard-open .action-bar { bottom:calc(var(--keyboard-offset,0px) + 6px); }
.btn-primary,.btn-secondary,.btn-tertiary { border-radius:24px; }
.back-btn,.profile-button { border-radius:50%; }
.back-btn { background:var(--surface); box-shadow:inset 0 1px 0 var(--glass-edge); }
.mode-switch,.seg-tabs { border-radius:28px; border:1px solid var(--glass-edge); }
.mode-btn,.seg-tabs button { border-radius:24px; }
.mode-btn.active,.seg-tabs button.active { box-shadow:0 2px 6px rgba(0,0,0,.08),inset 0 1px 0 var(--glass-edge); }
.pill-btn { border-radius:22px; }
.balance-card {
  border-radius:28px;
  background-image:linear-gradient(130deg,rgba(255,255,255,.1),transparent 60%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.balance-card .currency { color:var(--hero-muted); }
dialog { border-radius:32px 32px 0 0; }
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
  .bottom-nav,.action-bar,dialog {
    background:color-mix(in srgb,var(--surface) 88%,transparent);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
  }
  .mode-switch,.seg-tabs {
    background:color-mix(in srgb,var(--surface-soft) 80%,transparent);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
}
.transfer-flow .form-section { margin:0; }
.transfer-flow #tx-account-block,.transfer-flow #tx-to-account-block {
  background:var(--surface);
  border-radius:24px;
  padding:16px;
  border:1px solid var(--line);
}
.transfer-flow #tx-account-block { border-color:var(--accent); }
.transfer-flow .amount-entry { margin-top:24px; }
.transfer-flow #tx-available { margin:8px 0 0; }
.transfer-direction {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:-2px auto;
  border-radius:50%;
  font-size:24px;
  font-weight:500;
  color:var(--accent);
  background:var(--accent-soft);
  position:relative;
  z-index:1;
  border:3px solid var(--bg);
}
.transfer-picker { display:block; }
.account-choice-toggle {
  display:flex;
  align-items:center;
  text-align:left;
  gap:12px;
  width:100%;
  min-height:64px;
  padding:0;
}
.account-choice-toggle .account-copy { flex:1; overflow-wrap:anywhere; }
.account-choice-toggle .account-icon-box { border-radius:14px; }
.transfer-options { display:grid; gap:4px; padding-top:12px; }
.transfer-options .pill-btn {
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  border:0;
  border-radius:16px;
  width:100%;
  min-height:60px;
}
.transfer-options .pill-btn span { min-width:0; overflow-wrap:anywhere; }
.transfer-options strong { display:block; font-size:14px; }
.transfer-options small { display:block; font-size:12px; color:var(--muted); }
.admin-stat { display:block; font-size:26px; margin-top:6px; font-variant-numeric:tabular-nums; }
#admin-search { margin:0 0 8px; }
#admin-count { margin-bottom:12px; }
.admin-account {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.admin-account:last-child { border-bottom:0; }
.admin-account > span { flex:1; min-width:0; }
.admin-account > strong { max-width:52%; text-align:right; }
.admin-account small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
#admin-user-report .section-title { margin-top:24px; }
.admin-user .account-value { max-width:45%; }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .bottom-nav,.action-bar,dialog,.mode-switch,.seg-tabs {
    background:var(--surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    border-color:var(--line);
  }
  body { background-image:none; }
}

/* Approved Liquid Glass layout: translucent controls, solid financial data. */
:root {
  --glass-surface:rgba(255,255,255,.84);
  --card-edge:rgba(255,255,255,.82);
  --card-shadow:0 7px 23px rgba(24,62,42,.055);
}
:root[data-theme="dark"] {
  --glass-surface:rgba(42,55,46,.86);
  --card-edge:rgba(255,255,255,.10);
  --card-shadow:0 8px 23px rgba(0,0,0,.18);
}

.month-stat,.account-card,.account-list,.kredit-card,.category-list,
.glass-card,.report-list,.settings-list,.debt-stat,.debt-card,
#settings-accounts-list,#settings-categories-list,.opening-account,
.account-edit-form,#settings-account-form {
  border:1px solid var(--card-edge);
  box-shadow:var(--card-shadow);
}
.balance-card { box-shadow:0 12px 26px rgba(21,67,46,.16),inset 0 1px 0 rgba(255,255,255,.18); }
.month-stat,.debt-stat { min-height:94px; }
.debt-card { margin:10px 0 14px; }
.link-full-report,.opening-entry,.btn-secondary {
  background:var(--glass-surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
.btn-secondary { color:var(--text); }
.btn-primary { box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.seg-tabs,.mode-switch,.period-nav { box-shadow:var(--glass-shadow); }
.period-nav {
  min-height:52px;
  border:1px solid var(--glass-edge);
  border-radius:28px;
  background:var(--glass-surface);
  padding:3px;
}
.period-nav .icon-btn,.hist-period-nav .icon-btn {
  min-width:44px;
  width:44px;
  height:44px;
  background:transparent;
  border-radius:50%;
}
.period-nav .icon-btn:active:not(:disabled) { background:var(--accent-soft); }
.seg-tabs button,.mode-btn { min-height:48px; }
.pill-btn { min-height:44px; }
.history-filters { align-items:end; margin-top:12px; }
.history-filter-field { min-width:0; }
.history-filter-field label,.history-search-label {
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:650;
  color:var(--text);
}
.history-search-label { margin-top:14px; }
.history-filters select,#hist-search,.history-export select,#admin-search {
  min-height:48px;
  border:1px solid var(--glass-edge);
  border-radius:16px;
  background:var(--glass-surface);
  box-shadow:var(--glass-shadow);
  color:var(--text);
}
.history-export { margin-top:13px; }
.history-export label { font-weight:650; color:var(--text); }
.history-export button { min-height:48px; }
.history-day-sheet,#acc-hist-list:not(:empty) {
  background:var(--surface);
  border:1px solid var(--card-edge);
  border-radius:24px;
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
#hist-list .history-day-sheet .tx-row,#acc-hist-list .tx-row { padding-left:16px; padding-right:16px; }
.history-day-sheet .tx-row:last-child,#acc-hist-list .tx-row:last-child { border-bottom:0; }
.history-day-sheet .tx-icon { width:34px!important; height:34px!important; }
#acc-hist-list .load-more { width:calc(100% - 24px); margin:12px; }
.account-list-row,.settings-account-row,.admin-account { min-height:60px; }
.row-actions .icon-btn { min-width:44px; width:44px; min-height:44px; }
.reactivate-category { min-height:44px; padding:8px 12px; font-size:12px; white-space:nowrap; }
.account-choice-toggle { min-height:68px; }
.transfer-flow #tx-account-block,.transfer-flow #tx-to-account-block {
  border-color:var(--card-edge);
  box-shadow:var(--card-shadow);
}
.transfer-flow #tx-account-block:has(.account-choice-toggle) { border-color:var(--accent); }
.action-bar .btn-primary { min-height:48px; }
.bottom-nav,.action-bar { isolation:isolate; }

@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))) {
  .bottom-nav,.action-bar,dialog,.seg-tabs,.mode-switch,.period-nav,
  .link-full-report,.opening-entry,.btn-secondary,
  .history-filters select,#hist-search,.history-export select,#admin-search {
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
  }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .bottom-nav,.action-bar,dialog,.seg-tabs,.mode-switch,.period-nav,
  .link-full-report,.opening-entry,.btn-secondary,
  .history-filters select,#hist-search,.history-export select,#admin-search {
    background:var(--surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    border-color:var(--line);
  }
}
.low-effects .bottom-nav,.low-effects .action-bar,.low-effects dialog,
.low-effects .seg-tabs,.low-effects .mode-switch,.low-effects .period-nav,
.low-effects .btn-secondary,.low-effects .history-filters select,
.low-effects #hist-search,.low-effects .history-export select {
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  background:var(--surface);
}
html.low-effects body { background-image:none; }