:root {
  color-scheme: light;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f0f0f2;
  --elevated: #f5f5f7;
  --elevated-2: #fafafb;
  --border: #e2e2e6;
  --border-strong: #cacad0;

  --text: #1a1a1e;
  --text-2: #5c5c66;
  --text-3: #8a8a94;

  --accent: #3d6b5e;
  --accent-muted: #e8f0ed;
  --accent-hover: #2f5549;

  --income: #2d7a52;
  --income-bg: #edf5f0;
  --expense: #a85c42;
  --expense-bg: #f8f0ec;
  --warn: #9a7b3c;
  --warn-bg: #f7f3e8;
  --danger: #b04a4a;
  --danger-bg: #f9eded;
  --locked: #6b7280;
  --locked-bg: #eef0f3;

  --chart-income: #3dba7d;
  --chart-expense: #e88b74;
  --chart-net: #82c4f0;

  --mix-base: #f7f7f8;
  --fill-pressed: rgba(0, 0, 0, 0.04);
  --fill-subtle: rgba(0, 0, 0, 0.03);
  --accent-ring: rgba(61, 107, 94, 0.28);
  --accent-fill: rgba(61, 107, 94, 0.08);
  --card-glow-spot: #4fd68f;
  --card-glow-spot-bright: #b0ffd4;
  --card-glow-alpha-core: 68%;
  --card-glow-alpha-mid: 28%;
  --card-glow-alpha-bright-core: 82%;
  --card-glow-alpha-bright-mid: 32%;
  --card-glow-blur-a: 18px;
  --card-glow-blur-b: 11px;
  --card-glow-surface-border: 28%;
  --card-glow-surface-shadow: 22%;
  --card-glow-surface-fill: 54%;
  --card-glow-glass-mix: 66%;
  --backdrop: rgba(245, 245, 247, 0.36);
  --on-accent-muted: rgba(255, 255, 255, 0.92);
  --cal-range-fill: rgba(255, 255, 255, 0.45);
  --panel-line: rgba(0, 0, 0, 0.06);
  --scrim: rgba(0, 0, 0, 0.28);
  --tx-scrim: var(--scrim);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.12);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  --on-accent: #ffffff;
  --switch-thumb: #ffffff;
  --overlay-border: rgba(0, 0, 0, 0.07);

  --radius: 6px;
  --radius-lg: 8px;

  --font: "Inter", system-ui, sans-serif;
  --header-h: 52px;
  --nav-h: 56px;
  --nav-fab: 52px;
  --max-w: 480px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121214;
  --surface: #1c1c1f;
  --surface-2: #26262b;
  --elevated: #222228;
  --elevated-2: #2a2a31;
  --border: #32323a;
  --border-strong: #44444f;

  --text: #f2f2f4;
  --text-2: #b0b0b8;
  --text-3: #7a7a85;

  --accent: #5a9d8a;
  --accent-muted: #1e2f2a;
  --accent-hover: #6eb5a0;

  --income: #4caf7a;
  --income-bg: #1a2e24;
  --expense: #d4846a;
  --expense-bg: #2e221e;
  --warn: #c9a85c;
  --warn-bg: #2a261a;
  --danger: #d66a6a;
  --danger-bg: #2e1a1a;
  --locked: #8b919c;
  --locked-bg: #252830;

  --chart-income: #3dba7d;
  --chart-expense: #e88b74;
  --chart-net: #82c4f0;

  --mix-base: #121214;
  --fill-pressed: rgba(255, 255, 255, 0.06);
  --fill-subtle: rgba(255, 255, 255, 0.04);
  --accent-ring: rgba(90, 157, 138, 0.32);
  --accent-fill: rgba(90, 157, 138, 0.12);
  --card-glow-spot: var(--accent);
  --card-glow-spot-bright: var(--accent);
  --card-glow-alpha-core: 48%;
  --card-glow-alpha-mid: 16%;
  --card-glow-alpha-bright-core: 62%;
  --card-glow-alpha-bright-mid: 22%;
  --card-glow-blur-a: 11px;
  --card-glow-blur-b: 7px;
  --card-glow-surface-border: 28%;
  --card-glow-surface-shadow: 10%;
  --card-glow-surface-fill: 70%;
  --card-glow-glass-mix: 80%;
  --backdrop: rgba(18, 18, 20, 0.72);
  --on-accent-muted: rgba(255, 255, 255, 0.92);
  --cal-range-fill: rgba(255, 255, 255, 0.14);
  --panel-line: rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.55);
  --tx-scrim: var(--scrim);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);
  --on-accent: #ffffff;
  --switch-thumb: #ffffff;
  --overlay-border: rgba(255, 255, 255, 0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.app {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}