/* Tokens */
:root {
  --bg: #f3f2f8;
  --surface: #ffffff;
  --surface-2: #f7f6fb;
  --text: #1d1b2c;
  --text-muted: #6b6880;
  --accent: #5b45e0;
  --accent-hover: #4c37cf;
  --accent-soft: #ece9fd;
  --accent-ink: #ffffff;
  --line: #e3e1ec;
  --line-strong: #cfcce0;
  --danger: #d93f5c;
  --danger-soft: #fdecef;
  --warning: #a35d00;
  /* Chart series: a validated categorical order (light), slot 1 first */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --series-other: #8b8a86;
  --shadow-panel: 0 1px 2px rgba(29, 27, 44, 0.05), 0 8px 24px rgba(29, 27, 44, 0.05);
  --shadow-float: 0 18px 48px rgba(29, 27, 44, 0.18);
  --radius: 14px;
  --radius-sm: 10px;
  --rail-w: 264px;
  --rail-nav-h: 17.5rem;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #121119;
  --surface: #1c1a26;
  --surface-2: #24222f;
  --text: #eceaf5;
  --text-muted: #9d9ab2;
  --accent: #9a8cff;
  --accent-hover: #ada1ff;
  --accent-soft: #2b2747;
  --accent-ink: #14121f;
  --line: #2e2b3b;
  --line-strong: #403c52;
  --danger: #f2708a;
  --danger-soft: #3a1f29;
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.6);
  --warning: #f0b43c;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #7a7975;
  color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

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

h1, h2, h3 { letter-spacing: -0.01em; }

.gradient-text { color: var(--accent); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.icon-btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn:disabled { opacity: 0.35; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 1.25rem;
}

.panel-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.field-label {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Header (mobile) */
.app-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-header h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-open-btn { border-color: transparent; background: transparent; }

main { padding: 1rem; }

/* Folder chips */
.folder-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin: 0 -1rem 1rem;
  padding: 0 1rem 0.125rem;
  scrollbar-width: none;
}

.folder-tabs::-webkit-scrollbar { display: none; }

.folder-tab {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.folder-tab:hover { border-color: var(--line-strong); }

.folder-tab.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.folder-tab.add-folder {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text-muted);
}

.folder-tab.add-folder:hover { color: var(--accent); border-color: var(--accent); }

/* Add screen layout */
.add-layout {
  display: grid;
  gap: 1rem;
}

/* New expense form */
.date-field {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.875rem;
  padding: 0 0.875rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

.date-field svg { color: var(--accent); flex: 0 0 auto; }
.date-field:hover { border-color: var(--line-strong); }
.date-field-chevron { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; }
#date-field-label { flex: 1; }

.add-rows-head,
.add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem 6.5rem 2.75rem;
  gap: 0.375rem;
  align-items: center;
}

.add-rows-head {
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.add-rows-head span:first-child { grid-column: 1 / 3; }
.add-rows-head span:last-child { grid-column: 3 / 4; }

.add-row { margin-bottom: 0.5rem; }

.add-row select,
.amount-field {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.add-row select {
  padding: 0 0.625rem;
  font-size: 0.9375rem;
}

.amount-field {
  display: flex;
  align-items: center;
  padding-left: 0.625rem;
}

.amount-field:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.amount-prefix { color: var(--text-muted); font-weight: 600; }

.amount-field input {
  width: 100%;
  min-width: 0;
  min-height: 2.625rem;
  padding: 0 0.5rem 0 0.25rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
}

.add-row.invalid select, .add-row.invalid .amount-field { border-color: var(--danger); }

.row-add-store,
.row-remove {
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 1.125rem;
  line-height: 1;
}

.row-add-store { color: var(--accent); }
.row-add-store:hover { border-color: var(--accent); }
.row-remove { color: var(--text-muted); }
.row-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

#add-rows .add-row:only-child .row-remove { visibility: hidden; }

.add-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.add-actions button {
  min-height: 3rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
}

#add-row-btn {
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--text);
}

#add-row-btn:hover { border-color: var(--accent); color: var(--accent); }

#save-all-btn {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
}

#save-all-btn:hover:not(:disabled) { background: var(--accent-hover); }
#save-all-btn:disabled { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); }

/* Receipt: monthly total + expense list */
.receipt {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 1px 1px rgba(29, 27, 44, 0.06)) drop-shadow(0 6px 14px rgba(29, 27, 44, 0.05));
}

/* Torn-paper edge at the bottom of the receipt */
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background:
    linear-gradient(135deg, var(--surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}

.month-summary {
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px dashed var(--line);
}

.month-summary-folder {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.monthly-total-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.monthly-total {
  margin: 0.125rem 0 0;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.list-header h2 { margin: 0; font-size: 1rem; font-weight: 700; }

#sort-toggle-btn {
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

#sort-toggle-btn:hover { color: var(--text); border-color: var(--line-strong); }

.day-block { margin-bottom: 1rem; }
.day-block:last-child { margin-bottom: 0; }

.day-block-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.day-block-total { font-variant-numeric: tabular-nums; }

.entry-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.25rem 0;
}

.entry-main {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.entry-store {
  min-width: 3rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dotted leader between store and amount, like a till receipt */
.entry-main::after {
  content: "";
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted var(--line-strong);
  transform: translateY(-0.25rem);
}

.entry-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry-actions { display: flex; gap: 0.125rem; }

/* A note sits on its own line under the store; recurring expenses carry a small repeat mark */
.entry-note {
  flex-basis: 100%;
  margin: -0.375rem 0 0.375rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.entry-recurring {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--accent);
}

/* Optional note under a row of the add form */
.row-note-toggle {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: -0.125rem;
  padding: 0.125rem 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.row-note-toggle:hover { text-decoration: underline; }

.row-note {
  grid-column: 1 / -1;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
}

.entry-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
}

.entry-actions .edit-btn:hover { background: var(--accent-soft); color: var(--accent); }
.entry-actions .delete-btn:hover { background: var(--danger-soft); color: var(--danger); }

.empty-state {
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
}

.empty-state-title { margin: 0 0 0.25rem; font-weight: 600; }
.empty-state-hint { margin: 0; color: var(--text-muted); font-size: 0.875rem; }

/* Manage stores */
.screen-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.screen-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }

.manage-stores-panel { padding: 0.5rem 1.25rem 1.25rem; }

.manage-store-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--line);
}

.manage-store-row span { font-weight: 500; }

.manage-store-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
}

.manage-store-row button:hover { background: var(--danger-soft); color: var(--danger); }

#manage-stores-empty { padding: 1rem 0 0; }

.dashed-btn {
  width: 100%;
  min-height: 2.875rem;
  margin-top: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.dashed-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Reports */
.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.report-mode-switch {
  display: flex;
  flex: 1 1 100%;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.report-mode-btn {
  flex: 1;
  min-height: 2.375rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.report-mode-btn.selected {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(29, 27, 44, 0.12);
}

:root[data-theme="dark"] .report-mode-btn.selected { background: var(--accent-soft); color: var(--accent); }

.report-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 1 1 auto;
}

#report-period-label {
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: center;
  flex: 1;
}

.report-period-pickers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 100%;
}

.report-period-pickers .date-field { margin-bottom: 0; flex: 1; justify-content: center; font-size: 0.875rem; padding: 0 0.5rem; }
.period-dash { color: var(--text-muted); }

.print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.print-btn:hover { border-color: var(--accent); color: var(--accent); }

.report-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 600;
}

.report-grand-total span {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.folder-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.folder-report-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 1rem 1.125rem;
}

.folder-report-table {
  width: 100%;
  border-collapse: collapse;
}

.folder-report-table th {
  padding: 0;
  vertical-align: baseline;
  text-align: left;
}

.folder-report-name { font-weight: 600; }

.folder-report-table .folder-report-total {
  text-align: right;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.folder-share-row td { padding: 0; }

.folder-share {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.folder-share-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.folder-share-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.report-line td {
  padding: 0.4375rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.report-line td + td {
  padding-left: 0.75rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.report-line.muted td { color: var(--text-muted); }

.period-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.period-table th,
.period-table td {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  text-align: left;
}

.period-table th {
  border-top: none;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.period-table th:last-child,
.period-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.period-table td:last-child { font-weight: 600; }

@media (max-width: 479px) {
  .period-table { table-layout: fixed; }
  .period-table th, .period-table td { padding: 0.5rem 0.375rem; font-size: 0.75rem; overflow-wrap: anywhere; }
  .period-table th:first-child, .period-table td:first-child { padding-left: 0.625rem; width: 27%; }
  .period-table th:last-child, .period-table td:last-child { padding-right: 0.625rem; width: 25%; }
}

.report-empty {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Bottom tab bar (mobile) */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.rail-brand { display: none; }

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.tab-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-btn svg {
  width: 3.25rem;
  height: 1.875rem;
  padding: 0.25rem 0;
  border-radius: 999px;
}

.tab-btn.selected { color: var(--accent); }
.tab-btn.selected svg { background: var(--accent-soft); }

/* Sidebar drawer (mobile) */
#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 25, 0.45);
  z-index: 1500;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#sidebar-backdrop.open { opacity: 1; }

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 86%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  z-index: 1600;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 250ms ease-out;
}

#sidebar.open { transform: translateX(0); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sidebar-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }

.sidebar-section { margin-bottom: 1.25rem; }

.sidebar-section-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sidebar-option-group {
  display: flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.sidebar-option-btn {
  flex: 1;
  min-height: 2.25rem;
  padding: 0 0.25rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sidebar-option-btn.selected {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(29, 27, 44, 0.12);
}

:root[data-theme="dark"] .sidebar-option-btn.selected { background: var(--accent-soft); color: var(--accent); }

/* Signed-in account in the sidebar */
.sidebar-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.account-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.account-photo { object-fit: cover; background: var(--surface); }

/* The avatar is the button that picks a new photo; a small camera badge says so */
.account-avatar-btn {
  position: relative;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
}

.account-avatar-btn .account-avatar { width: 3rem; height: 3rem; font-size: 1.125rem; }

.account-avatar-edit {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--surface-2);
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
}

.account-avatar-btn:hover .account-avatar { box-shadow: 0 0 0 3px var(--accent-soft); }

.account-text { min-width: 0; }

.account-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.25rem;
}

.account-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.account-link:hover { text-decoration: underline; }
.account-link-muted { color: var(--text-muted); }
.account-link-muted:hover { color: var(--danger); }
.account-link:disabled { opacity: 0.5; cursor: progress; }

.account-photo-error {
  margin: 0.75rem 0 0;
  color: var(--danger);
  font-size: 0.875rem;
  text-align: center;
}

/* Shared in-app dialog */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1850;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 17, 25, 0.5);
}

.dialog {
  width: min(440px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem 1.25rem 1.375rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

@media (prefers-reduced-motion: no-preference) {
  .dialog-backdrop:not([hidden]) .dialog { animation: dialog-in 180ms ease-out; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.dialog-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }

.dialog-message {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.dialog-fields { display: grid; gap: 0.875rem; }

.dialog-field { display: grid; gap: 0.375rem; }

.dialog-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }

.dialog-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

.dialog-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.dialog-input-group { position: relative; }

.dialog-prefix {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.dialog-input-group .dialog-input { padding-left: 2.25rem; }

.dialog-error {
  margin: 0.875rem 0 0;
  color: var(--danger);
  font-size: 0.875rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.dialog-btn {
  min-height: 2.625rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.dialog-btn:hover { background: var(--surface-2); }

.dialog-btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.dialog-btn-primary:hover { background: var(--accent-hover); }

.dialog-btn-primary.danger { border-color: var(--danger); background: var(--danger); color: #ffffff; }
.dialog-btn-primary.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* Profile photo dialog */
.photo-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 17, 25, 0.5);
}

.photo-dialog {
  width: min(420px, 100%);
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.photo-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.photo-dialog-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }

.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.photo-drop:hover { border-color: var(--accent); }

/* A file is being dragged over the zone */
.photo-drop.dragging {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

.photo-drop-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.photo-drop.dragging .photo-drop-icon { background: var(--accent); color: var(--accent-ink); }

.photo-drop-title { font-weight: 600; }
.photo-drop-hint { color: var(--text-muted); font-size: 0.8125rem; }

.photo-dialog-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.photo-dialog-or::before,
.photo-dialog-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.photo-dialog-pick {
  width: 100%;
  min-height: 2.875rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.photo-dialog-pick:hover { background: var(--accent-hover); }
.photo-dialog-pick:disabled { opacity: 0.6; cursor: progress; }
.photo-dialog.busy .photo-drop { opacity: 0.6; pointer-events: none; }

.account-name,
.account-email {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-name { font-weight: 600; }
.account-email { color: var(--text-muted); font-size: 0.8125rem; }

.sidebar-signout {
  margin-top: auto;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
}

.sidebar-signout:hover { color: var(--danger); border-color: var(--danger); }

/* Settings screen */
.settings-grid {
  display: grid;
  gap: 1rem;
}

.settings-card .panel-title { margin-bottom: 0.75rem; }

.settings-hint {
  margin: -0.25rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.settings-card .style-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

.currency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.currency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.currency-btn:hover { border-color: var(--line-strong); }
.currency-btn.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.currency-symbol { min-width: 1.5rem; text-align: center; font-size: 1.0625rem; }

.settings-folders-list {
  display: grid;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.settings-folder-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 3.25rem;
  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
}

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

.settings-folder-text {
  flex: 1;
  display: grid;
  min-width: 0;
}

.settings-folder-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-folder-meta { color: var(--text-muted); font-size: 0.8125rem; }

.settings-folder-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.settings-folder-row .icon-btn { border-color: transparent; }

.settings-recurring-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.settings-empty {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.settings-action {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.settings-action:hover { border-color: var(--accent); color: var(--accent); }

.settings-action-danger { color: var(--danger); }
.settings-action-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

.settings-data-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.settings-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

.settings-legal a { color: var(--accent); }

.landing-footer-links { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.landing-footer-links a { color: var(--text-muted); }
.landing-footer-links a:hover { color: var(--text); }

@media (min-width: 760px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-wide { grid-column: 1 / -1; }
}

/* Calendar sheet */
.calendar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 25, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.calendar-backdrop.open { opacity: 1; }

.calendar-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 250ms ease-out;
  box-shadow: var(--shadow-float);
}

.calendar-backdrop.open .calendar-sheet { transform: translateY(0); }

.calendar-handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--line-strong);
  margin: 0 auto 0.75rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

#cal-month-label { font-weight: 700; font-size: 1.0625rem; text-transform: capitalize; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.cal-day {
  aspect-ratio: 1;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.cal-day:hover:not(:disabled):not(.selected) { background: var(--surface-2); }
.cal-day:disabled { color: var(--text-muted); opacity: 0.35; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day.selected { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-day.blank { visibility: hidden; cursor: default; }

.calendar-close {
  width: 100%;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* Home page: full-screen layer above the app, scrolls on its own.
   Motion lives in landing-motion.js (GSAP); without it every element is simply shown. */
#landing-screen {
  --font-receipt: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
}

#landing-screen [id] { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: no-preference) {
  #landing-screen { scroll-behavior: smooth; }
}

/* Sticky header */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.landing-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 auto 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.landing-brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
}

.landing-nav-links { display: none; gap: 1.75rem; margin-right: 0.75rem; }

.landing-nav-links a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.landing-nav-links a:hover { color: var(--text); }

.landing-lang {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.landing-lang-btn {
  min-height: 1.875rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.landing-lang-btn.selected { background: var(--accent-soft); color: var(--accent); }

/* Buttons */
.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
}

.landing-cta:hover { background: var(--accent-hover); }

.landing-cta-main {
  min-height: 3.5rem;
  padding: 0 1.625rem 0 0.5rem;
  font-size: 1.0625rem;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

.google-g {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius-sm) - 2px);
  background: #ffffff;
}

/* Signed-in users get "Open my expenses" buttons without the Google mark */
#landing-screen.signed-in .google-g { display: none; }
#landing-screen.signed-in .landing-cta-main { padding-left: 1.625rem; }

.landing-link {
  padding-bottom: 0.125rem;
  border-bottom: 2px solid var(--accent);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.landing-link:hover { color: var(--accent); }

/* Hero; clipped sideways so the tilting receipt and the ghost figure never widen the page */
.landing-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: grid;
  gap: 3rem;
  align-items: center;
  width: min(1160px, 100%);
  min-height: calc(100svh - 4.5rem);
  margin: 0 auto;
  padding: 3rem 1rem 5rem;
}

/* The month total as a giant outlined figure behind the hero */
.landing-ghost {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  margin: 0;
  transform: translateX(-50%);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  font-family: var(--font-receipt);
  font-size: clamp(4.5rem, 19vw, 16rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.landing-title {
  max-width: 10ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

/* Words are wrapped by the motion script so each one can rise out of its own mask */
.title-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.title-word-inner { display: inline-block; }

.landing-lead {
  max-width: 31rem;
  margin: 0 0 2.25rem;
  color: var(--text-muted);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.landing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.landing-facts li { display: flex; align-items: center; gap: 0.5rem; }

.landing-facts li::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The receipt comes out of a printer slot, set in a till-receipt typeface */
.landing-demo {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.landing-printer {
  position: relative;
  z-index: 2;
  height: 1.125rem;
  margin: 0 -0.75rem;
  border-radius: 999px;
  background: var(--text);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--bg) 22%, transparent);
}

.landing-paper {
  position: relative;
  z-index: 1;
  margin: -0.5625rem -0.75rem 0;
  padding: 0 1rem 1.25rem;
  overflow: hidden;
}

.landing-paper .receipt {
  margin: 0 0.25rem;
  padding: 2rem 1.75rem;
  font-family: var(--font-receipt);
}

.landing-paper .month-summary-folder { font-family: var(--font); }
.landing-paper .monthly-total { letter-spacing: -0.04em; }
.landing-paper .entry-row { min-height: 2.5rem; }
.landing-paper .entry-store { font-weight: 500; }

/* Without the motion script the receipt still slides out once */
@media (prefers-reduced-motion: no-preference) {
  #landing-screen:not(.motion-ready) .landing-paper .receipt { animation: receipt-print 1.5s cubic-bezier(0.22, 0.7, 0.2, 1) 0.25s both; }
}

@keyframes receipt-print {
  from { transform: translateY(-102%); }
  to { transform: translateY(0); }
}

/* Two till-tape bands crossing each other */
.landing-tape {
  position: relative;
  height: 11rem;
  margin: 0 0 2rem;
  overflow: hidden;
}

.landing-tape-band {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  padding: 0.9375rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.landing-tape-a {
  z-index: 2;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-50%) rotate(-3deg);
}

.landing-tape-b {
  z-index: 1;
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-50%) rotate(2.5deg);
}

.landing-tape-track {
  display: inline-flex;
  will-change: transform;
}

.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  font-family: var(--font-receipt);
  font-size: 1.125rem;
  font-weight: 500;
}

.tape-item::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: 1.25rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.tape-item strong { font-weight: 700; }

/* Sections */
.landing-section {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 4rem 1rem;
}

.landing-section-head { max-width: 40rem; margin-bottom: 2.5rem; }

.landing-section-head h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.landing-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* Features: stacked on phones, a sideways track on wide screens */
.landing-hscroll { padding: 3rem 0 4rem; }

.landing-hscroll .landing-section-head {
  width: min(1160px, 100%);
  max-width: none;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
}

.landing-hscroll .landing-section-head > * { max-width: 40rem; }

.landing-hscroll-track {
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
}

.hpanel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.hpanel h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hpanel p {
  max-width: 26rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

/* Reports panel on the accent colour */
.hpanel-reports {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.hpanel-reports p { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }

.bento-report {
  display: grid;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-receipt);
}

.hpanel-reports .bento-report {
  border-color: color-mix(in srgb, var(--accent-ink) 22%, transparent);
  background: color-mix(in srgb, var(--accent-ink) 9%, transparent);
}

.bento-report-head,
.bento-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}

.bento-report-head { font-size: 1.125rem; font-weight: 700; }
.bento-report-head span { font-family: var(--font); font-weight: 600; opacity: 0.8; }

.bento-bar-label { margin-bottom: 0.375rem; font-size: 0.875rem; }
.bento-bar-label span:first-child { font-family: var(--font); }
.bento-bar-label span:last-child { font-weight: 700; }

.bento-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  overflow: hidden;
}

.bento-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform-origin: left center;
}

.bento-bar-row:nth-child(3) .bento-bar span { opacity: 0.7; }
.bento-bar-row:nth-child(4) .bento-bar span { opacity: 0.45; }

/* Folders panel */
.bento-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bento-chip {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.bento-chip.folder { background: var(--surface-2); font-weight: 600; }
.bento-chip.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.bento-chip.add { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--text-muted); }

/* Sync panel, inverted: a purchase flies from the phone to the laptop */
.hpanel-sync {
  border-color: transparent;
  background: var(--text);
  color: var(--bg);
}

.hpanel-sync p { color: color-mix(in srgb, var(--bg) 72%, transparent); }

.sync-scene {
  position: relative;
  height: 11rem;
}

.sync-phone,
.sync-screen {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  border: 2px solid currentColor;
}

.sync-phone {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 4.25rem;
  height: 8rem;
  padding: 0.875rem 0.5rem;
  border-radius: 1rem;
}

.sync-laptop {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: min(15rem, 58%);
}

.sync-screen {
  height: 8.25rem;
  padding: 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
}

.sync-base {
  height: 0.625rem;
  margin: 0 -1rem;
  border-radius: 0 0 0.75rem 0.75rem;
  background: currentColor;
}

.sync-line {
  display: block;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
}

.sync-line.short { width: 60%; }

.sync-chip {
  position: absolute;
  left: 4%;
  bottom: 9rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-receipt);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Styles panel */
.bento-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Numbered steps joined by a line that fills in as you scroll */
.landing-steps-wrap { position: relative; }

.landing-steps-line {
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 1.5rem;
  bottom: 4rem;
  width: 2px;
  background: var(--line);
}

.landing-steps-line-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top center;
}

.landing-steps {
  position: relative;
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.landing-steps li {
  position: relative;
  padding-left: 4rem;
  counter-increment: step;
}

.landing-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-receipt);
  font-size: 1.125rem;
  font-weight: 700;
}

.landing-steps h3 {
  margin: 0.625rem 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.landing-steps p {
  max-width: 22rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* Closing call to action on the accent colour */
.landing-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1160px, calc(100% - 2rem));
  margin: 2rem auto 3rem;
  padding: 3rem 1.5rem 2.5rem;
  border-radius: calc(var(--radius) + 10px);
  background: var(--accent);
  color: var(--accent-ink);
}

.landing-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--accent-ink) 14%, transparent) 31px 32px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 80%);
  mask-image: linear-gradient(to left, #000, transparent 80%);
}

.landing-final-title {
  max-width: 11ch;
  margin: 0 0 2rem;
  color: inherit;
  font-size: clamp(2.5rem, 8.5vw, 7rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.06em;
  transform-origin: left bottom;
}

.landing-final-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.landing-final-row p {
  margin: 0;
  color: color-mix(in srgb, var(--accent-ink) 80%, transparent);
  font-size: 1.125rem;
}

.landing-cta-inverse {
  background: var(--accent-ink);
  color: var(--accent);
  box-shadow: none;
}

.landing-cta-inverse:hover { background: color-mix(in srgb, var(--accent-ink) 88%, var(--accent)); }

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 1.5rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.landing-brand-small { margin: 0; color: var(--text); font-size: 0.9375rem; }
.landing-footer a { color: var(--accent); font-weight: 600; }

.login-error {
  color: var(--danger);
  font-size: 0.875rem;
  margin: 1rem 0 0;
}

/* The hero button is right below on narrow phones, so the header keeps only the language switch */
@media (max-width: 479px) {
  .landing-nav-cta { display: none; }
}

@media (min-width: 560px) {
  .bento-style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .landing-hscroll-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .landing-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  .landing-steps li { padding-left: 0; padding-top: 4.25rem; }

  /* From the first circle's centre to the third's */
  .landing-steps-line {
    left: 1.5rem;
    right: calc(33.333% - 2.5rem);
    top: calc(1.5rem - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .landing-steps-line-fill { transform-origin: left center; }
}

@media (min-width: 960px) {
  .landing-nav-inner { padding: 0.875rem 1.5rem; }
  .landing-nav-links { display: flex; }

  .landing-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
    padding: 4rem 1.5rem 7rem;
  }

  .landing-section { padding: 6rem 1.5rem; }
  .landing-hscroll { padding: 5rem 0 2rem; }
  .landing-hscroll .landing-section-head { padding: 0 1.5rem; }

  /* A sideways track: scrolled by hand without the motion script, driven by the page scroll with it */
  .landing-hscroll-viewport { overflow-x: auto; }
  #landing-screen.motion-ready .landing-hscroll-viewport { overflow: hidden; }

  .landing-hscroll-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    padding: 0 max(1.5rem, calc((100vw - 1160px) / 2 + 1.5rem)) 1rem;
  }

  .hpanel {
    flex: none;
    width: min(70vw, 640px);
    min-height: min(66vh, 540px);
    padding: 2.5rem;
  }

  .landing-final { padding: 4.5rem 3.5rem 3.5rem; }
  .landing-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Total with the change against the previous period */
.report-total-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

.report-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Report charts */
.report-chart {
  margin: 0 0 1rem;
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.report-chart-title { margin: 0 0 0.875rem; font-size: 1rem; font-weight: 700; }

.share-bar {
  display: flex;
  gap: 2px;
  height: 1.125rem;
  border-radius: 4px;
}

.share-bar span { min-width: 4px; }
.share-bar span:first-child { border-radius: 4px 0 0 4px; }
.share-bar span:last-child { border-radius: 0 4px 4px 0; }
.share-bar span:only-child { border-radius: 4px; }

.share-legend {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.share-legend li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.9375rem; }
.share-legend-name { min-width: 0; overflow-wrap: anywhere; }
.share-legend-value { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.share-swatch {
  flex: none;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
}

.folder-report-name .share-swatch { margin-right: 0.5rem; vertical-align: 0.05em; }

.trend-max { margin: -0.375rem 0 0.75rem; color: var(--text-muted); font-size: 0.8125rem; }

.trend-plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 9rem;
  border-bottom: 1px solid var(--line-strong);
}

.trend-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  height: 100%;
}

.trend-bar {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
}

.trend-col[data-tip]:hover .trend-bar { background: var(--accent-hover); }

.trend-axis { display: flex; gap: 2px; margin-top: 0.375rem; }

.trend-axis span {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-align: center;
  white-space: nowrap;
}

/* Hover tooltip for chart marks; the whole column is the target, not just the bar */
[data-tip] { position: relative; }

[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.trend-col:nth-child(-n+4)[data-tip]:hover::after { left: 0; transform: none; }
.trend-col:nth-last-child(-n+4)[data-tip]:hover::after { left: auto; right: 0; transform: none; }

/* Budget meter: same-ramp track, status in words and an icon */
#budget-meter:not([hidden]) { display: block; margin-top: 0.875rem; }

.budget-meter-track {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  overflow: hidden;
}

.budget-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.budget-warn .budget-meter-fill { background: var(--warning); }
.budget-over .budget-meter-fill { background: var(--danger); }

.budget-meter-text {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.budget-warn .budget-meter-text,
.budget-over .budget-meter-text { color: var(--text); font-weight: 600; }
.budget-warn .budget-meter-text svg { flex: none; color: var(--warning); }
.budget-over .budget-meter-text svg { flex: none; color: var(--danger); }

.folder-budget-row td { padding: 0 0 0.75rem; }

/* Toast above the bottom tab bar */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 1900;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: min(92vw, 440px);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-float);
  font-size: 0.9375rem;
  font-weight: 600;
  transform: translateX(-50%);
}

.toast svg { flex: none; }

.toast-action {
  flex: none;
  margin-left: 0.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bg);
  font-weight: 700;
}

.toast-action:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); }
.toast-warn svg { color: var(--warning); }
.toast-over svg { color: #ff8a8a; }

@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-in 200ms ease-out; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 640px) {
  .share-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .toast { bottom: 2rem; }
  .trend-plot { height: 11rem; }
}

/* Report actions: export menu and print */
.report-actions { display: flex; gap: 0.5rem; }

.export-wrap { position: relative; }

.export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 70;
  display: grid;
  min-width: 13rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.export-menu button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.export-menu button:hover,
.export-menu button:focus-visible { background: var(--surface-2); }

.export-badge {
  min-width: 2.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
}

/* Period view: whole-history shortcut and filters */
.period-all-btn {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.period-all-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Always its own row, after the period controls and the actions */
.report-filters {
  order: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 1 1 100%;
}

.filter-search {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}

.filter-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }

.filter-search input {
  flex: 1;
  min-width: 0;
  min-height: 2.625rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9375rem;
  outline: none;
}

.filter-input {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
}

#filter-folder { grid-column: 1 / -1; }

.filter-reset {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.25rem 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.report-count { margin: -0.5rem 0 1rem; color: var(--text-muted); font-size: 0.875rem; }

.period-note {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.list-header-actions { display: flex; align-items: center; gap: 0.375rem; }
.list-search-btn { min-width: 2.25rem; min-height: 2.25rem; border-radius: 999px; }

@media (min-width: 760px) {
  .report-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto; align-items: center; }
  .filter-search, #filter-folder, .filter-reset { grid-column: auto; }
}

/* Press feedback; respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 120ms ease-out; }
  button:active:not(:disabled) { transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar-backdrop, #sidebar, .calendar-backdrop, .calendar-sheet { transition: none; }
}

/* Tablet */
@media (min-width: 640px) {
  main { max-width: 640px; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; }
  .folder-tabs { margin: 0 0 1.25rem; padding: 0; flex-wrap: wrap; overflow: visible; }
  .folder-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-mode-switch { flex: 0 0 auto; min-width: 18rem; }
  .report-period-pickers { flex: 1 1 auto; }
}

/* Desktop: persistent left rail with navigation and settings */
@media (min-width: 960px) {
  body { padding: 0 0 0 var(--rail-w); }

  .tab-bar {
    top: 0;
    bottom: auto;
    right: auto;
    width: var(--rail-w);
    height: var(--rail-nav-h);
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem 1rem 0.75rem;
    border-top: none;
    border-right: 1px solid var(--line);
  }

  .rail-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
  }

  .rail-brand svg { color: var(--accent); }

  .tab-btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--text);
  }

  .tab-btn svg { width: 22px; height: 22px; padding: 0; background: none !important; color: var(--text-muted); }
  .tab-btn:hover { background: var(--surface-2); }
  .tab-btn.selected { background: var(--accent-soft); color: var(--accent); }
  .tab-btn.selected svg { color: var(--accent); }

  #sidebar-backdrop { display: none !important; }

  #sidebar,
  #sidebar[hidden] {
    display: flex !important;
    top: var(--rail-nav-h);
    width: var(--rail-w);
    max-width: none;
    transform: none;
    box-shadow: none;
    z-index: 60;
    padding: 1.25rem 1.75rem 1.5rem;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }

  #sidebar-close-btn, #sidebar-open-btn { display: none; }

  .sidebar-header { margin-bottom: 1rem; }
  .sidebar-header h2 { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }

  .app-header {
    position: static;
    padding: 2rem 2.5rem 0.5rem;
    background: transparent;
    border-bottom: none;
  }

  .app-header h1 { font-size: 1.75rem; letter-spacing: -0.02em; }

  main { max-width: 760px; margin: 0; padding: 1rem 2.5rem 3rem; }

  .folder-tabs { margin-bottom: 1.5rem; }

  .add-layout { gap: 1.5rem; }

  .entry-form { padding: 1.5rem; }
  .receipt { padding: 1.75rem 2rem 2rem; }
  .monthly-total { font-size: 2.75rem; }

  .entry-actions { opacity: 0.35; transition: opacity 150ms ease-out; }
  .entry-row:hover .entry-actions, .entry-actions:focus-within { opacity: 1; }

  .report-toolbar { gap: 1rem; }
  .report-mode-switch { flex: 0 0 auto; }
  .report-nav { flex: 0 1 22rem; }
  .report-actions { margin-left: auto; }
  .report-period-pickers { flex: 0 1 30rem; }

  .folder-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

  .manage-stores-panel { max-width: 560px; }

  .calendar-backdrop { align-items: center; }
  .calendar-sheet { border-radius: var(--radius); padding: 1.25rem; transform: translateY(12px); }
  .calendar-backdrop.open .calendar-sheet { transform: translateY(0); }
  .calendar-handle { display: none; }
}

/* Wide desktop: form and receipt side by side */
@media (min-width: 1200px) {
  main { max-width: 1160px; }

  .add-layout {
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    align-items: start;
  }

  .entry-form { position: sticky; top: 1.5rem; }
}

/* Onboarding: language picker + guided tour */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 17, 25, 0.6);
  z-index: 3000;
}

.onboarding-card {
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.onboarding-card h2 { margin: 0 0 0.375rem; font-size: 1.375rem; font-weight: 700; }
.onboarding-card p { margin: 0 0 1.25rem; color: var(--text-muted); }

.onboarding-lang-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-lang-btn {
  min-height: 3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.onboarding-lang-btn:hover, .onboarding-lang-btn:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

#tour {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

#tour-spotlight {
  position: fixed;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px rgba(18, 17, 25, 0.6);
  pointer-events: none;
}

#tour-spotlight.no-target {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

#tour-tooltip {
  position: fixed;
  width: calc(100% - 2rem);
  max-width: 360px;
  padding: 1.125rem 1.125rem 0.875rem;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

.tour-progress {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

#tour-title { margin: 0 0 0.375rem; font-size: 1.0625rem; font-weight: 700; }
#tour-text { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); }

.tour-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tour-actions button {
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.tour-actions .tour-skip {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-weight: 500;
}

.tour-actions #tour-next {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  #tour-spotlight { transition: top 200ms ease-out, left 200ms ease-out, width 200ms ease-out, height 200ms ease-out; }
}

/* Print: only the report */
@media print {
  .tab-bar, #add-screen, #manage-stores-screen, #calendar-backdrop, .report-toolbar,
  .app-header, #sidebar, #sidebar-backdrop, #tour, #onboarding-lang, #landing-screen {
    display: none !important;
  }
  body { background: #ffffff; color: #1d1b2c; padding: 0; }
  main { max-width: none; padding: 0; }
  #reports-screen, #report-content { display: block !important; }
  .report-grand-total { background: none; color: #1d1b2c; border: 2px solid #1d1b2c; }
  /* Short cards move whole to the next page; long lists split and repeat their <thead> header. */
  .report-grand-total { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
  .folder-cards { display: block; }
  .folder-report-card { box-shadow: none; margin-bottom: 0.625rem; padding: 0.625rem 0.875rem; }
  .folder-share { margin: 0.375rem 0 0.5rem; }
  .report-line td { padding: 0.25rem 0; font-size: 0.8125rem; }
  .period-table { box-shadow: none; border-radius: 0; overflow: visible; }
  .period-table th, .period-table td { padding: 0.3rem 0.75rem; font-size: 0.8125rem; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .report-chart { box-shadow: none; break-inside: avoid; }
  .share-bar span, .share-swatch, .trend-bar, .budget-meter-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-delta { background: none; border: 1px solid currentColor; }
  #toast { display: none !important; }
}