:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-soft: #eeeeee;
  --ink: #090909;
  --muted: #737373;
  --line: #e2e2e2;
  --brand: #111111;
  --brand-dark: #000000;
  --brand-soft: #ececea;
  --danger: #4a4a4a;
  --danger-soft: #ededeb;
  --shadow: 0 12px 40px rgba(31, 45, 61, .08);
  --tab-height: 70px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html { background: #e2e2e2; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(20, 184, 138, .24); outline-offset: 2px; }
.is-hidden { display: none !important; }

.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(76px + var(--safe-top));
  padding: calc(14px + var(--safe-top)) 20px 14px;
  background: rgba(243, 245, 247, .92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(227, 232, 235, .7);
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
h2 { margin-bottom: 0; font-size: 18px; }

.month-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(31, 45, 61, .05);
  cursor: pointer;
  font-weight: 700;
}
.month-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.main-content {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px calc(104px + var(--safe-bottom));
}

.view { animation: fade-in .22s ease both; }
@keyframes fade-in { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.card {
  padding: 18px;
  border: 1px solid rgba(227, 232, 235, .9);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.summary-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #050505 0%, #171717 58%, #303030 100%);
}
.summary-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -85px;
  top: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.summary-label { position: relative; margin: 0 0 8px; color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; }
.summary-balance { position: relative; margin: 0; font-size: clamp(34px, 11vw, 46px); line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.summary-balance small { margin-right: 4px; font-size: .58em; font-weight: 700; }
.summary-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.summary-stat { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .17); }
.summary-stat span { display: block; margin-bottom: 5px; color: rgba(255, 255, 255, .62); font-size: 12px; }
.summary-stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 2px 12px;
}
.section-head h2 { font-size: 17px; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: var(--brand-dark); cursor: pointer; font-weight: 700; }
.text-button.danger { color: var(--danger); }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.quick-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 13px; background: var(--brand-soft); color: var(--brand-dark); font-size: 18px; }

.list-card { padding: 0; overflow: hidden; }
.transaction-list { margin: 0; padding: 0; list-style: none; }
.transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.transaction-item:last-child { border-bottom: 0; }
.transaction-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: var(--surface-soft); font-size: 20px; }
.transaction-copy { min-width: 0; flex: 1; }
.transaction-title { display: block; overflow: hidden; margin-bottom: 4px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.transaction-note { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-amount { flex: 0 0 auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.transaction-amount.income { color: var(--brand-dark); }
.transaction-amount.expense { color: var(--ink); }

.empty-state { padding: 48px 24px; text-align: center; }
.empty-illustration { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px; background: var(--brand-soft); color: var(--brand-dark); font-size: 34px; }
.empty-state h3 { margin: 0 0 8px; font-size: 18px; }
.empty-state p { margin: 0 auto 18px; max-width: 270px; color: var(--muted); font-size: 14px; line-height: 1.65; }

.filter-row { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 700; }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.day-group { margin-bottom: 16px; }
.day-header { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.day-total { font-variant-numeric: tabular-nums; }

.today-expense-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 17px 18px; border-color: #dedede; background: linear-gradient(135deg, #ffffff 0%, #eeeeee 100%); }
.today-expense-label { margin: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.today-expense-amount { margin: 0; color: var(--brand-dark); font-size: clamp(28px, 9vw, 38px); line-height: 1; font-weight: 850; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.today-expense-amount small { margin-right: 3px; font-size: .55em; font-weight: 800; }
.today-expense-meta { display: grid; min-width: 0; gap: 5px; color: var(--muted); text-align: right; font-size: 12px; line-height: 1.35; }
.today-expense-meta span { overflow: hidden; max-width: 170px; text-overflow: ellipsis; white-space: nowrap; }
.stats-total { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.stat-tile { padding: 15px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.stat-tile span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-tile strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat-tile.expense strong { color: var(--danger); }
.stat-tile.income strong { color: var(--brand-dark); }

.bar-list { display: grid; gap: 17px; }
.bar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.bar-head span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #090909, #595959); }
.bar-fill.income { background: linear-gradient(90deg, #777, #b5b5b5); }

.settings-stack { display: grid; gap: 14px; }
.settings-card { padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.settings-card h3 { margin: 0 0 5px; font-size: 16px; }
.settings-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.settings-actions { display: grid; gap: 9px; margin-top: 14px; }
.sync-account { margin-top: 12px; padding: 9px 11px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.sync-status { margin-top: 13px; padding: 10px 12px; border-radius: 13px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.sync-status.is-synced { background: var(--brand-soft); color: var(--brand-dark); }
.sync-status.is-pending, .sync-status.is-syncing { background: #e2e2e2; color: #333333; }
.sync-status.is-error { background: var(--danger-soft); color: var(--danger); }
.sync-field { display: block; margin-top: 12px; }
.sync-field > span { display: block; margin: 0 0 6px 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sync-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.secondary-button, .ghost-button {
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 750;
}
.ghost-button.danger { border-color: #cccccc; background: var(--danger-soft); color: var(--danger); }
.category-groups { display: grid; gap: 14px; margin-top: 14px; }
.category-group-title { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.category-manage-list { display: flex; flex-wrap: wrap; gap: 7px; }
.category-manage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 12px; }
.category-manage-chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.category-add-row { display: flex; gap: 8px; margin-top: 10px; }
.category-add-row input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.category-add-row button { flex: 0 0 auto; }

.tabbar {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr 74px 1fr 1fr;
  align-items: end;
  width: 100%;
  max-width: 560px;
  height: calc(var(--tab-height) + var(--safe-bottom));
  padding: 7px 8px var(--safe-bottom);
  border-top: 1px solid rgba(227, 232, 235, .8);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
}
.tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  height: 57px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.tab-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab-button.is-active { color: var(--brand-dark); }
.add-button {
  align-self: start;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-top: -20px;
  border: 5px solid var(--surface);
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 9px 22px rgba(20, 184, 138, .34);
  cursor: pointer;
}
.add-button svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.sheet-backdrop, .month-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  background: rgba(14, 22, 30, .48);
  transition: opacity .22s ease, visibility .22s ease;
}
.sheet-backdrop.is-open, .month-backdrop.is-open { visibility: visible; opacity: 1; }
.entry-sheet, .month-picker-sheet {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding: 8px 18px calc(22px + var(--safe-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  box-shadow: 0 -18px 50px rgba(17, 24, 39, .18);
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 105%);
  transition: transform .28s cubic-bezier(.22, .8, .28, 1), visibility 0s linear .28s;
}
.entry-sheet.is-open, .month-picker-sheet.is-open { visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.sheet-handle { width: 38px; height: 4px; margin: 1px auto 9px; border-radius: 999px; background: #d0d0d0; }
.sheet-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 16px; }
.sheet-header h2 { text-align: center; }
.sheet-header .text-button { justify-self: end; }
.icon-button { display: grid; justify-self: start; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px; background: var(--surface); cursor: pointer; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.month-picker-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 16px; }
.month-picker-header h2 { text-align: center; }
.month-picker-header .text-button { justify-self: end; padding: 8px 0 8px 8px; }
.year-control { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 18px; }
.year-control strong { text-align: center; font-size: 18px; }
.year-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.year-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.month-option { min-height: 52px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; font-weight: 750; }
.month-option.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.month-option.is-current:not(.is-active) { border-color: rgba(20, 184, 138, .45); }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 16px; border-radius: 14px; background: #e9e9e9; }
.type-option { height: 42px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-weight: 800; }
.type-option.is-active { background: var(--surface); box-shadow: 0 3px 10px rgba(31, 45, 61, .08); }
.type-option[data-type="expense"].is-active { color: var(--danger); }
.type-option[data-type="income"].is-active { color: var(--brand-dark); }

.amount-field { display: block; margin-bottom: 18px; }
.amount-field > span, .form-row label > span, .note-field > span { display: block; margin: 0 0 7px 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.amount-input-wrap { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.amount-input-wrap span { font-size: 24px; font-weight: 800; }
.amount-input-wrap input { min-width: 0; width: 100%; height: 52px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.amount-input-wrap input::placeholder { color: #cccccc; }
.form-section { margin-bottom: 17px; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.section-label { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.category-chip { min-width: 0; min-height: 58px; padding: 6px 3px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 700; }
.category-chip .emoji { display: block; margin-bottom: 3px; font-size: 20px; }
.category-chip.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 17px; }
.form-row input, .form-row select, .note-field input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
}
.note-field { display: block; margin-bottom: 18px; }
.primary-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 9px 20px rgba(20, 184, 138, .22);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
}

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(88px + var(--safe-bottom));
  max-width: calc(100vw - 40px);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(23, 32, 42, .94);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 620px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 32px; overflow: hidden; box-shadow: 0 24px 80px rgba(22, 35, 48, .16); }
  .topbar { position: relative; }
  .tabbar { bottom: 24px; border-radius: 0 0 32px 32px; }
  .entry-sheet, .month-picker-sheet { bottom: 24px; border-radius: 28px; }
}







/* Monochrome premium theme and smoother motion */
:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-soft: #eeeeee;
  --ink: #090909;
  --muted: #737373;
  --line: #e2e2e2;
  --brand: #111111;
  --brand-dark: #000000;
  --brand-soft: #ececea;
  --danger: #4a4a4a;
  --danger-soft: #ededeb;
  --shadow: 0 18px 48px rgba(0, 0, 0, .075);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, .055);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 480ms;
}

html { background: #e8e8e8; scroll-behavior: smooth; }
body { background: var(--bg); letter-spacing: -.006em; }
button, input, select, .quick-item, .category-chip, .month-option, .filter-chip, .tab-button, .transaction-item { transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-base) var(--ease-out), opacity var(--motion-fast) ease; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
button:active, .quick-item:active, .category-chip:active, .month-option:active, .filter-chip:active, .transaction-item:active { transform: scale(.975); }
.topbar { background: rgba(244, 244, 242, .88); border-bottom-color: rgba(0, 0, 0, .07); backdrop-filter: blur(24px) saturate(120%); }
.eyebrow { color: #5d5d5d; letter-spacing: .16em; }
h1 { font-weight: 850; letter-spacing: -.045em; }
h2 { font-weight: 800; letter-spacing: -.025em; }
.month-button { border-color: #dedede; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .055); }
.month-button:hover { border-color: #111; box-shadow: 0 8px 22px rgba(0, 0, 0, .09); }
.view { animation: view-enter var(--motion-slow) var(--ease-smooth) both; }
@keyframes view-enter { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.995); filter: blur(2px); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }
.card { border-color: rgba(0, 0, 0, .075); box-shadow: var(--shadow-soft); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-fast) ease; }
.card:hover { border-color: rgba(0, 0, 0, .13); box-shadow: var(--shadow); }
.summary-card { background: linear-gradient(145deg, #050505 0%, #171717 58%, #303030 100%); box-shadow: 0 22px 54px rgba(0, 0, 0, .19); }
.summary-card::after { width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035); }
.summary-balance { font-weight: 850; }
.text-button { color: #111; position: relative; }
.text-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--motion-base) var(--ease-out); }
.text-button:hover::after { transform: scaleX(1); transform-origin: left; }
.text-button.danger { color: #4a4a4a; }
.quick-item { border-color: #e3e3e3; background: rgba(255, 255, 255, .94); }
.quick-item:hover { transform: translateY(-3px); border-color: #111; box-shadow: 0 12px 28px rgba(0, 0, 0, .09); }
.quick-icon { background: #111; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .16); }
.transaction-item { background: #fff; }
.transaction-item:hover { background: #f5f5f3; }
.transaction-icon { background: #f0f0ee; }
.transaction-amount.income { color: #555; }
.transaction-amount.expense { color: #090909; }
.filter-chip.is-active { border-color: #090909; background: #090909; color: #fff; }
.filter-chip:hover { border-color: #090909; }
.stat-tile { box-shadow: var(--shadow-soft); }
.stat-tile.expense strong { color: #090909; }
.stat-tile.income strong { color: #666; }
.today-expense-card { border-color: #dedede; background: linear-gradient(145deg, #ffffff 0%, #eeeeee 100%); box-shadow: var(--shadow-soft); }
.today-expense-amount { color: #090909; }
.bar-fill { background: linear-gradient(90deg, #090909, #595959); }
.bar-fill.income { background: linear-gradient(90deg, #777, #b5b5b5); }
.settings-card { border-color: rgba(0, 0, 0, .075); box-shadow: var(--shadow-soft); }
.sync-account { background: #111; color: #fff; }
.sync-status { background: #eeeeee; color: #555; }
.sync-status.is-synced { background: #111; color: #fff; }
.sync-status.is-pending, .sync-status.is-syncing { background: #e2e2e2; color: #222; }
.sync-status.is-error { background: #3a3a3a; color: #fff; }
.secondary-button, .ghost-button { background: #fff; border-color: #dedede; }
.secondary-button:hover, .ghost-button:hover { border-color: #111; box-shadow: 0 8px 20px rgba(0, 0, 0, .07); }
.ghost-button.danger { border-color: #cccccc; background: #ededeb; color: #333; }
.tabbar { background: rgba(255, 255, 255, .94); border-top-color: rgba(0, 0, 0, .08); backdrop-filter: blur(24px) saturate(120%); }
.tab-button { color: #a0a0a0; }
.tab-button.is-active { color: #090909; }
.tab-button svg { transition: transform var(--motion-base) var(--ease-out); }
.tab-button.is-active svg { transform: translateY(-1px) scale(1.045); }
.add-button { border-color: #fff; background: #090909; color: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.add-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 32px rgba(0, 0, 0, .3); }
.sheet-backdrop, .month-backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(5px); transition: opacity var(--motion-base) var(--ease-out), visibility var(--motion-base) var(--ease-out); }
.entry-sheet, .month-picker-sheet { background: #f7f7f5; box-shadow: 0 -24px 70px rgba(0, 0, 0, .22); transition: transform var(--motion-slow) var(--ease-smooth), visibility 0s linear var(--motion-slow); will-change: transform; }
.entry-sheet.is-open, .month-picker-sheet.is-open { transition-delay: 0s; }
.month-option.is-active, .category-chip.is-active { border-color: #090909; background: #111; color: #fff; }
.month-option.is-current:not(.is-active) { border-color: #969696; }
.type-switch { background: #e5e5e5; }
.type-option.is-active { background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .09); }
.type-option[data-type="expense"].is-active { color: #090909; }
.type-option[data-type="income"].is-active { color: #555; }
.amount-input-wrap, .form-row input, .form-row select, .note-field input, .sync-field input, .category-add-row input { border-color: #dedede; background: #fff; }
.amount-input-wrap:focus-within, .form-row input:focus, .form-row select:focus, .note-field input:focus, .sync-field input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.primary-button { background: #090909; color: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, .2); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(0, 0, 0, .25); }
.toast { background: rgba(9, 9, 9, .96); box-shadow: 0 16px 40px rgba(0, 0, 0, .22); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Staggered list and chart motion */
.transaction-item { animation: list-enter .42s var(--ease-smooth) both; }
.transaction-list li:nth-child(2) .transaction-item { animation-delay: 22ms; }
.transaction-list li:nth-child(3) .transaction-item { animation-delay: 44ms; }
.transaction-list li:nth-child(4) .transaction-item { animation-delay: 66ms; }
.transaction-list li:nth-child(5) .transaction-item { animation-delay: 88ms; }
.transaction-list li:nth-child(6) .transaction-item { animation-delay: 110ms; }
@keyframes list-enter { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.bar-fill { transform-origin: left center; animation: bar-grow .72s var(--ease-smooth) both; }
@keyframes bar-grow { from { opacity: .45; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }



/* Remove residual color from emoji icons */
.quick-icon,
.transaction-icon,
.category-chip .emoji,
.category-manage-chip {
  filter: grayscale(1) contrast(1.08);
}

/* Native route transition when supported */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: var(--ease-smooth);
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translate3d(0, -5px, 0) scale(.995); } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.995); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms !important; }
}


/* True black cloud-only theme */
:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-soft: #171717;
  --ink: #f5f5f5;
  --muted: #9a9a9a;
  --line: #2a2a2a;
  --brand: #ffffff;
  --brand-dark: #ffffff;
  --brand-soft: #1c1c1c;
  --danger: #e8e8e8;
  --danger-soft: #1a1a1a;
  --shadow: 0 22px 64px rgba(0, 0, 0, .72);
  --shadow-soft: 0 12px 38px rgba(0, 0, 0, .58);
  color-scheme: dark;
}
html, body { background: #000; color: #f5f5f5; }
.app-shell { background: #000; }
.topbar { background: rgba(0, 0, 0, .86); border-bottom-color: #242424; }
.eyebrow, .summary-label, .section-label, .amount-field > span, .form-row label > span, .note-field > span, .sync-field > span { color: #969696; }
.month-button { color: #fff; border-color: #303030; background: #111; box-shadow: none; }
.month-button:hover { border-color: #fff; background: #171717; }
.card, .settings-card { color: #f5f5f5; border-color: #242424; background: #0d0d0d; box-shadow: var(--shadow-soft); }
.card:hover, .settings-card:hover { border-color: #3b3b3b; }
.summary-card { color: #fff; border-color: #2b2b2b; background: linear-gradient(145deg, #000 0%, #0d0d0d 58%, #202020 100%); }
.summary-card::after { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.025); }
.text-button { color: #fff; }
.text-button.danger { color: #c9c9c9; }
.quick-item { color: #fff; border-color: #292929; background: #0d0d0d; }
.quick-item:hover { border-color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.7); }
.quick-icon, .transaction-icon { background: #1a1a1a; color: #fff; box-shadow: none; }
.quick-icon, .transaction-icon, .category-chip .emoji, .category-manage-chip { filter: none !important; }
.transaction-item { color: #fff; background: #0d0d0d; border-bottom-color: #242424; }
.transaction-item:hover { background: #171717; }
.transaction-title { color: #fff; }
.transaction-note { color: #8f8f8f; }
.transaction-amount.income, .transaction-amount.expense { color: #fff; }
.filter-chip { color: #dedede; border-color: #2b2b2b; background: #111; }
.filter-chip.is-active { color: #000; border-color: #fff; background: #fff; }
.stat-tile { color: #fff; border-color: #282828; background: #0d0d0d; box-shadow: var(--shadow-soft); }
.stat-tile span { color: #8f8f8f; }
.stat-tile.expense strong, .stat-tile.income strong { color: #fff; }
.today-expense-card { color: #fff; border-color: #2b2b2b; background: linear-gradient(145deg, #0a0a0a, #191919); }
.today-expense-label { color: #929292; }
.today-expense-amount { color: #fff; }
.today-expense-meta { color: #8f8f8f; }
.bar-track { background: #222; }
.bar-fill { background: linear-gradient(90deg, #fff, #878787); }
.bar-fill.income { background: linear-gradient(90deg, #9a9a9a, #4f4f4f); }
.sync-account { border: 1px solid #2e2e2e; background: #111; color: #fff; }
.sync-status { background: #171717; color: #aaa; }
.sync-status.is-synced { background: #fff; color: #000; }
.sync-status.is-pending, .sync-status.is-syncing { background: #222; color: #ddd; }
.sync-status.is-error { background: #2a2a2a; color: #fff; }
.secondary-button, .ghost-button { color: #f5f5f5; border-color: #303030; background: #111; }
.secondary-button:hover, .ghost-button:hover { border-color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.7); }
.ghost-button.danger { color: #ddd; border-color: #363636; background: #171717; }
.tabbar { background: rgba(0, 0, 0, .94); border-top-color: #242424; }
.tab-button { color: #666; }
.tab-button.is-active { color: #fff; }
.add-button { color: #000; border-color: #000; background: #fff; box-shadow: 0 12px 30px rgba(255,255,255,.16); }
.add-button:hover { box-shadow: 0 16px 36px rgba(255,255,255,.22); }
.sheet-backdrop, .month-backdrop { background: rgba(0,0,0,.78); }
.entry-sheet, .month-picker-sheet { color: #f5f5f5; background: #080808; box-shadow: 0 -28px 80px rgba(0,0,0,.85); }
.sheet-handle { background: #454545; }
.icon-button { color: #fff; background: #171717; }
.month-option, .year-button, .category-chip { color: #eee; border-color: #2d2d2d; background: #111; }
.month-option:hover, .year-button:hover, .category-chip:hover { border-color: #fff; }
.month-option.is-active, .category-chip.is-active { color: #000; border-color: #fff; background: #fff; }
.month-option.is-current:not(.is-active) { border-color: #777; }
.type-switch { background: #171717; }
.type-option { color: #999; }
.type-option.is-active { color: #000; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.type-option[data-type="expense"].is-active, .type-option[data-type="income"].is-active { color: #000; }
.amount-input-wrap, .form-row input, .form-row select, .note-field input, .sync-field input, .category-add-row input { color: #fff; border-color: #303030; background: #111; }
.amount-input-wrap:focus-within, .form-row input:focus, .form-row select:focus, .note-field input:focus, .sync-field input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.amount-input-wrap input, .form-row input, .form-row select, .note-field input, .sync-field input { color: #fff; }
input::placeholder { color: #666; }
.primary-button { color: #000; background: #fff; box-shadow: 0 12px 30px rgba(255,255,255,.16); }
.primary-button:hover { box-shadow: 0 16px 38px rgba(255,255,255,.22); }
.toast { color: #000; background: rgba(255,255,255,.97); box-shadow: 0 16px 44px rgba(0,0,0,.8); }
.category-manage-chip { color: #eee; border-color: #303030; background: #161616; }
.category-manage-chip button { color: #bbb; background: rgba(255,255,255,.08); }

/* Performance pass: compositor-only motion */
:root {
  --motion-fast: 130ms;
  --motion-base: 210ms;
  --motion-slow: 280ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-smooth: cubic-bezier(.2, .8, .2, 1);
}
button, input, select, .quick-item, .category-chip, .month-option, .filter-chip, .tab-button, .transaction-item {
  transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.view { animation: view-enter var(--motion-slow) var(--ease-out) both; }
@keyframes view-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.card { transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.card:hover { transform: none; box-shadow: var(--shadow-soft); }
.topbar, .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar { background: rgba(0, 0, 0, .96); }
.tabbar { background: rgba(0, 0, 0, .98); }
.sheet-backdrop, .month-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
.entry-sheet, .month-picker-sheet { transition: transform var(--motion-slow) var(--ease-out), visibility 0s linear var(--motion-slow); }
.bar-fill { animation-duration: .52s; }
.transaction-item { animation-duration: .3s; }
.transaction-list li:nth-child(n+7) .transaction-item { animation-delay: 0ms; }
.admin-card, .admin-user { transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.admin-card:hover, .admin-user:hover { transform: none; box-shadow: var(--shadow-soft); }
::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none !important; }
@media (hover: none) {
  .quick-item:hover, .admin-user:hover, .admin-card:hover, .card:hover, .primary-button:hover, .add-button:hover { transform: none; }
}

/* Light / dark appearance switch */
.theme-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-top: 14px; border-radius: 15px; background: #e5e5e5; }
.theme-option { height: 43px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-weight: 800; }
.theme-option.is-active { color: #000; background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.09); }
html[data-theme="dark"] .theme-switch { background: #171717; }
html[data-theme="dark"] .theme-option { color: #999; }
html[data-theme="dark"] .theme-option.is-active { color: #000; background: #fff; }

html[data-theme="light"] {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-soft: #eeeeee;
  --ink: #090909;
  --muted: #737373;
  --line: #dedede;
  --brand: #111111;
  --brand-dark: #000000;
  --brand-soft: #eeeeee;
  --danger: #4a4a4a;
  --danger-soft: #eeeeee;
  --shadow: 0 18px 48px rgba(0,0,0,.075);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.055);
  color-scheme: light;
}
html[data-theme="light"] body, html[data-theme="light"] .app-shell { color: #090909; background: #f4f4f2; }
html[data-theme="light"] .topbar { background: rgba(244,244,242,.96); border-bottom-color: #e4e4e4; }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .summary-label, html[data-theme="light"] .section-label, html[data-theme="light"] .amount-field > span, html[data-theme="light"] .form-row label > span, html[data-theme="light"] .note-field > span, html[data-theme="light"] .sync-field > span { color: #737373; }
html[data-theme="light"] .month-button { color: #090909; border-color: #dedede; background: #fff; }
html[data-theme="light"] .card, html[data-theme="light"] .settings-card { color: #090909; border-color: #e3e3e3; background: #fff; box-shadow: var(--shadow-soft); }
html[data-theme="light"] .summary-card { color: #fff; border-color: #2b2b2b; background: linear-gradient(145deg, #000, #171717 58%, #303030); }
html[data-theme="light"] .text-button { color: #111; }
html[data-theme="light"] .text-button.danger { color: #555; }
html[data-theme="light"] .quick-item { color: #090909; border-color: #e3e3e3; background: #fff; }
html[data-theme="light"] .quick-icon, html[data-theme="light"] .transaction-icon { background: #eeeeee; color: #111; }
html[data-theme="light"] .quick-icon, html[data-theme="light"] .transaction-icon, html[data-theme="light"] .category-chip .emoji, html[data-theme="light"] .category-manage-chip { filter: none !important; }
html[data-theme="light"] .transaction-item { color: #090909; background: #fff; border-bottom-color: #e6e6e6; }
html[data-theme="light"] .transaction-item:hover { background: #f5f5f5; }
html[data-theme="light"] .transaction-title, html[data-theme="light"] .transaction-amount.income, html[data-theme="light"] .transaction-amount.expense { color: #090909; }
html[data-theme="light"] .transaction-note { color: #737373; }
html[data-theme="light"] .filter-chip { color: #333; border-color: #dedede; background: #fff; }
html[data-theme="light"] .filter-chip.is-active { color: #fff; border-color: #111; background: #111; }
html[data-theme="light"] .stat-tile { color: #090909; border-color: #e3e3e3; background: #fff; box-shadow: var(--shadow-soft); }
html[data-theme="light"] .stat-tile span { color: #737373; }
html[data-theme="light"] .stat-tile.expense strong, html[data-theme="light"] .stat-tile.income strong { color: #090909; }
html[data-theme="light"] .today-expense-card { color: #090909; border-color: #dedede; background: linear-gradient(145deg, #fff, #eeeeee); }
html[data-theme="light"] .today-expense-label, html[data-theme="light"] .today-expense-meta { color: #737373; }
html[data-theme="light"] .today-expense-amount { color: #090909; }
html[data-theme="light"] .bar-track { background: #e5e5e5; }
html[data-theme="light"] .bar-fill { background: linear-gradient(90deg, #090909, #666); }
html[data-theme="light"] .bar-fill.income { background: linear-gradient(90deg, #888, #bdbdbd); }
html[data-theme="light"] .sync-account { color: #fff; border-color: #111; background: #111; }
html[data-theme="light"] .sync-status { background: #eeeeee; color: #555; }
html[data-theme="light"] .sync-status.is-synced { background: #111; color: #fff; }
html[data-theme="light"] .sync-status.is-pending, html[data-theme="light"] .sync-status.is-syncing { background: #e3e3e3; color: #222; }
html[data-theme="light"] .sync-status.is-error { background: #333; color: #fff; }
html[data-theme="light"] .secondary-button, html[data-theme="light"] .ghost-button { color: #111; border-color: #dedede; background: #fff; }
html[data-theme="light"] .ghost-button.danger { color: #444; border-color: #cfcfcf; background: #eeeeee; }
html[data-theme="light"] .tabbar { background: rgba(255,255,255,.98); border-top-color: #e4e4e4; }
html[data-theme="light"] .tab-button { color: #a0a0a0; }
html[data-theme="light"] .tab-button.is-active { color: #090909; }
html[data-theme="light"] .add-button { color: #fff; border-color: #fff; background: #090909; box-shadow: 0 12px 26px rgba(0,0,0,.22); }
html[data-theme="light"] .sheet-backdrop, html[data-theme="light"] .month-backdrop { background: rgba(0,0,0,.48); }
html[data-theme="light"] .entry-sheet, html[data-theme="light"] .month-picker-sheet { color: #090909; background: #f7f7f5; box-shadow: 0 -24px 70px rgba(0,0,0,.18); }
html[data-theme="light"] .sheet-handle { background: #bdbdbd; }
html[data-theme="light"] .icon-button { color: #111; background: #eeeeee; }
html[data-theme="light"] .month-option, html[data-theme="light"] .year-button, html[data-theme="light"] .category-chip { color: #222; border-color: #dedede; background: #fff; }
html[data-theme="light"] .month-option.is-active, html[data-theme="light"] .category-chip.is-active { color: #fff; border-color: #111; background: #111; }
html[data-theme="light"] .type-switch { background: #e5e5e5; }
html[data-theme="light"] .type-option { color: #777; }
html[data-theme="light"] .type-option.is-active { color: #000; background: #fff; }
html[data-theme="light"] .amount-input-wrap, html[data-theme="light"] .form-row input, html[data-theme="light"] .form-row select, html[data-theme="light"] .note-field input, html[data-theme="light"] .sync-field input, html[data-theme="light"] .category-add-row input { color: #090909; border-color: #dedede; background: #fff; }
html[data-theme="light"] input::placeholder { color: #999; }
html[data-theme="light"] .primary-button { color: #fff; background: #090909; }
html[data-theme="light"] .toast { color: #fff; background: rgba(0,0,0,.96); }
html[data-theme="light"] .category-manage-chip { color: #222; border-color: #dedede; background: #f1f1f1; }
html[data-theme="light"] .category-manage-chip button { color: #666; background: rgba(0,0,0,.07); }

/* Amount input contrast fix */
html[data-theme="light"] .amount-input-wrap input {
  color: #090909 !important;
  -webkit-text-fill-color: #090909;
  caret-color: #090909;
}
html[data-theme="dark"] .amount-input-wrap input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}
html[data-theme="light"] .amount-input-wrap input::placeholder { color: #999999; -webkit-text-fill-color: #999999; }
html[data-theme="dark"] .amount-input-wrap input::placeholder { color: #666666; -webkit-text-fill-color: #666666; }