:root {
  color-scheme: dark;
  --bg: #090714;
  --panel: rgba(21, 16, 40, 0.88);
  --panel-strong: #171129;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f8f7ff;
  --muted: #aba5bd;
  --purple: #7c3aed;
  --purple-dark: #38106d;
  --cyan: #22d3ee;
  --cyan-dark: #0891b2;
  --green: #22c55e;
  --red: #fb4f64;
  --amber: #f59e0b;
  --radius: 22px;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.30);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.24), transparent 35%),
    radial-gradient(circle at 100% 25%, rgba(34, 211, 238, 0.14), transparent 32%),
    var(--bg);
}

button, input, select { font: inherit; }

button { cursor: pointer; }

.background-glow {
  position: fixed;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.26;
  pointer-events: none;
}

.glow-one { background: var(--purple); top: 18%; left: -110px; }
.glow-two { background: var(--cyan); right: -120px; bottom: 10%; }

.app-shell {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin: 8px 2px 18px;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(1.55rem, 7vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

h2 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 0.70rem;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.top-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-button, .status-badge {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 0 12px;
  font-weight: 750;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
}

.status-badge.online { color: #86efac; }
.status-badge.offline { color: #fca5a5; }

.summary-card, .form-card, .history-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(30, 22, 55, 0.94), rgba(15, 12, 29, 0.94));
  box-shadow: var(--shadow);
  backdrop-filter: blur(15px);
}

.summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: var(--radius);
}

.summary-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.summary-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1.55rem;
}

.summary-side { text-align: right; }
.summary-side strong { color: var(--amber); }

.form-card, .history-card {
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,0.055);
  padding: 4px;
  border-radius: 15px;
  margin-bottom: 18px;
}

.segment {
  border: 0;
  border-radius: 12px;
  min-height: 47px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  transition: 160ms ease;
}

.segment.active.expense {
  background: linear-gradient(135deg, #c81e45, var(--red));
  color: white;
  box-shadow: 0 8px 25px rgba(251,79,100,.24);
}

.segment.active.income {
  background: linear-gradient(135deg, #15803d, var(--green));
  color: white;
  box-shadow: 0 8px 25px rgba(34,197,94,.24);
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field > span {
  color: #ddd9ec;
  font-size: 0.80rem;
  font-weight: 750;
}

.field small { color: var(--muted); }

input, select {
  width: 100%;
  min-height: 49px;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 0 13px;
  color: var(--text);
  background: rgba(255,255,255,0.055);
  outline: none;
}

input:focus, select:focus {
  border-color: rgba(34,211,238,.75);
  box-shadow: 0 0 0 3px rgba(34,211,238,.11);
}

.amount-field { margin-bottom: 16px; }

.money-input {
  display: flex;
  align-items: center;
  border: 1px solid rgba(124,58,237,.45);
  border-radius: 16px;
  padding: 0 16px;
  background: rgba(124,58,237,.08);
}

.money-input span {
  color: var(--cyan);
  font-size: 1.25rem;
  font-weight: 900;
}

.money-input input {
  min-height: 64px;
  border: 0;
  background: transparent;
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  box-shadow: none;
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 9px;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #e9e6f2;
  padding: 10px 13px;
  font-size: .80rem;
  font-weight: 750;
}

.chip.active {
  border-color: var(--cyan);
  color: #07151a;
  background: var(--cyan);
}

.full-select { min-height: 46px; }

.flags {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: .82rem;
  margin: 2px 1px 17px;
}

.flags label { display: flex; align-items: center; gap: 7px; }
.flags input { width: 18px; min-height: 18px; accent-color: var(--cyan); }

.save-button, .secondary-button {
  width: 100%;
  min-height: 55px;
  border: 0;
  border-radius: 15px;
  font-weight: 900;
}

.save-button {
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--cyan-dark));
  box-shadow: 0 12px 30px rgba(124,58,237,.24);
}

.save-button.expense-state { background: linear-gradient(135deg, #c81e45, var(--red)); }
.save-button.income-state { background: linear-gradient(135deg, #15803d, var(--green)); }

.save-button:disabled { opacity: .58; cursor: wait; }

.secondary-button {
  margin-top: 9px;
  color: #e9e6f2;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 800;
}

.history-list { display: grid; gap: 9px; }

.history-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.history-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-weight: 900;
}

.history-icon.expense { color: #fecdd3; background: rgba(251,79,100,.15); }
.history-icon.income { color: #bbf7d0; background: rgba(34,197,94,.15); }

.history-main strong, .history-main span { display: block; }
.history-main strong { font-size: .91rem; }
.history-main span { color: var(--muted); font-size: .72rem; margin-top: 3px; }

.history-value { text-align: right; font-weight: 900; font-size: .88rem; }
.history-value.expense { color: #fda4af; }
.history-value.income { color: #86efac; }
.sync-state { display: block; margin-top: 3px; color: var(--amber); font-size: .66rem; }

.empty-state { color: var(--muted); text-align: center; padding: 16px 8px; }

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translate(-50%, 25px);
  width: min(calc(100% - 30px), 510px);
  padding: 13px 16px;
  border-radius: 14px;
  color: white;
  background: #242033;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: 180ms ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.success { background: #14532d; }
.toast.error { background: #7f1d1d; }
.toast.warning { background: #78350f; }

.modal {
  width: min(calc(100% - 28px), 420px);
  border: 1px solid var(--border);
  border-radius: 21px;
  padding: 20px;
  color: var(--text);
  background: #171129;
  box-shadow: var(--shadow);
}

.modal::backdrop { background: rgba(3, 2, 10, .78); backdrop-filter: blur(4px); }
.modal p:not(.eyebrow) { color: var(--muted); line-height: 1.45; }
.modal-actions { display: grid; gap: 8px; margin-top: 16px; }

.hidden { display: none !important; }

@media (max-width: 390px) {
  .two-columns { grid-template-columns: 1fr; gap: 0; }
  .topbar { align-items: center; }
  .status-badge { display: none; }
}

@media (display-mode: standalone) {
  .app-shell { padding-top: max(24px, env(safe-area-inset-top)); }
  #installButton { display: none !important; }
}