:root {
  --accent: #0f6e56;
  --accent-strong: #0b5342;
  --bg: #f7f6f2;
  --surface: #ffffff;
  --text: #1f1f1d;
  --muted: #6b6a64;
  --border: #e6e4dc;
  --ok-bg: #e1f5ee;
  --ok-text: #0f6e56;
  --bad-bg: #fcebeb;
  --bad-text: #a32d2d;
  --warn: #ba7517;
  --warn-bg: #faeeda;
  --warn-text: #854f0b;
  --radius: 12px;
  --wrap: 900px;
}

/* Dark palette, shared by the system preference and the manual data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --accent: #1d9e75;
    --accent-strong: #5dcaa5;
    --bg: #17181a;
    --surface: #202225;
    --text: #f1f0ea;
    --muted: #a2a29b;
    --border: #33343a;
    --ok-bg: #10352c;
    --ok-text: #5dcaa5;
    --bad-bg: #3a1b1b;
    --bad-text: #f09595;
    --warn: #ef9f27;
    --warn-bg: #3a2c10;
    --warn-text: #fac775;
  }
}

/* Manual override: force dark regardless of system preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #1d9e75;
  --accent-strong: #5dcaa5;
  --bg: #17181a;
  --surface: #202225;
  --text: #f1f0ea;
  --muted: #a2a29b;
  --border: #33343a;
  --ok-bg: #10352c;
  --ok-text: #5dcaa5;
  --bad-bg: #3a1b1b;
  --bad-text: #f09595;
  --warn: #ef9f27;
  --warn-bg: #3a2c10;
  --warn-text: #fac775;
}
/* Manual override: force light regardless of system preference (base palette above). */
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
/* The `hidden` attribute must always win, even over author display rules
   (.field/.btn/.menu set display, which would otherwise defeat [hidden]). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.auth-wrap { width: 100%; max-width: 380px; margin: 0 auto; padding: 56px 20px 40px; }

/* Header + nav */
.app-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.app-header .topbar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); text-decoration: none; font-size: 16px; }
.brand img { display: block; border-radius: 7px; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.cur-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cur-toggle button { font: inherit; font-size: 13px; font-weight: 600; border: none; background: var(--surface); color: var(--muted); padding: 6px 12px; cursor: pointer; }
.cur-toggle button.on { background: var(--accent); color: #fff; }

.nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.active { color: var(--accent); background: var(--ok-bg); }

.app-main { padding-top: 24px; padding-bottom: 28px; }
.app-footer { color: var(--muted); font-size: 13px; padding-bottom: 32px; }

/* Typography helpers */
.hero { margin-bottom: 24px; }
.hero h1 { font-size: 28px; margin: 10px 0 8px; letter-spacing: -0.01em; }
.hero .big { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--ok-bg); padding: 4px 10px; border-radius: 999px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
a { color: var(--accent); }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.section-title h1 { font-size: 24px; margin: 0; }

/* Cards + grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.card-label { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.card-value { font-size: 26px; font-weight: 600; margin: 0; }
.form-card { margin-bottom: 22px; }

/* Buttons */
.btn { appearance: none; font: inherit; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 10px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; display: inline-block; transition: transform 0.05s ease, background 0.15s ease; }
.btn:hover { background: var(--bg); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { border-color: var(--border); background: transparent; }
.btn:disabled { opacity: 0.55; cursor: default; }
.link-btn { font: inherit; font-size: 13px; font-weight: 600; background: none; border: none; color: var(--accent); cursor: pointer; padding: 6px 8px; text-decoration: none; }
.link-btn.danger { color: var(--bad-text); }

/* Forms */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 13px; color: var(--muted); font-weight: 500; }
input[type=text], input[type=number], input[type=password], select { font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); width: 100%; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { cursor: pointer; line-height: 0; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid transparent; }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }

/* Rows / lists */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.row:first-child { border-top: none; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 600; }
.row .sub { color: var(--muted); font-size: 13px; }
.row .amount { font-weight: 600; text-align: right; white-space: nowrap; }
.row .amount .sub { font-weight: 400; }

.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex: none; }
.pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--accent); }
.pill.muted { background: var(--border); color: var(--muted); }

/* Flash + empty */
.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 10px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flash.ok { background: var(--ok-bg); color: var(--ok-text); }
.flash.bad { background: var(--bad-bg); color: var(--bad-text); }
.empty { text-align: center; padding: 40px 20px; }
.empty h2 { margin-top: 0; }

/* Phase 2: ledger + entry form */
.section-title h2 { font-size: 18px; margin: 0; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; padding: 9px 18px; font-weight: 600; font-size: 14px; color: var(--muted); background: var(--surface); border-left: 1px solid var(--border); }
.seg label:first-child span { border-left: none; }
.seg input:checked + span { background: var(--accent); color: #fff; }

input[type=date] { font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); width: 100%; }
input[type=date]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.tico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.tico.income { background: var(--ok-bg); color: var(--ok-text); }
.tico.expense { background: var(--border); color: var(--text); }
.tico.transfer { background: var(--ok-bg); color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.chip { font-size: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

.amount.income { color: var(--ok-text); }
.amount.transfer { color: var(--muted); }

/* Phase 3: dashboard + reports */
.alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 10px; }
.alert.over { background: var(--bad-bg); color: var(--bad-text); }
.alert.warn { background: var(--warn-bg); color: var(--warn-text); }

.bar-row { margin-bottom: 16px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.bar { height: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar-fill.warn { background: var(--warn); }
.bar-fill.over { background: var(--bad-text); }
.bar-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }

.stat-line { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.stat-line:first-of-type { border-top: none; }
.stat-line span:last-child { color: var(--text); }
.stat-line span.strong { font-weight: 600; }

.month-nav { display: flex; align-items: center; gap: 12px; }
.month-nav .btn { padding: 6px 12px; }
.month-nav strong { min-width: 120px; text-align: center; }

/* Phase 4: projects */
textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill.status-planning { background: var(--border); color: var(--muted); }
.pill.status-active { background: var(--ok-bg); color: var(--ok-text); }
.pill.status-on_hold { background: var(--warn-bg); color: var(--warn-text); }
.pill.status-done { background: var(--border); color: var(--text); }

/* Phase 5: controls, filters, impact */
.flash.warn { background: var(--warn-bg); color: var(--warn-text); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.filters input[type=text], .filters select, .filters input[type=month] { width: auto; flex: 0 1 auto; min-width: 120px; padding: 7px 10px; }
.filters input[type=text] { flex: 1 1 180px; }

input[type=month] { font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); }
input[type=file] { font: inherit; color: var(--text); max-width: 100%; }

.impact { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin: 0 0 16px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.impact[hidden] { display: none; }
.impact-label { color: var(--muted); font-weight: 600; }
.impact-item { padding: 2px 9px; border-radius: 999px; font-size: 13px; }
.impact-item.ok { background: var(--ok-bg); color: var(--ok-text); }
.impact-item.warn { background: var(--warn-bg); color: var(--warn-text); }
.impact-item.bad { background: var(--bad-bg); color: var(--bad-text); }

/* v2 Phase 1: theme button, FAB, mobile bottom nav + More sheet */
.icon-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.icon-btn:hover { color: var(--text); background: var(--bg); }

/* Floating action button */
.fab { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.22); text-decoration: none; transition: transform 0.06s ease, background 0.15s ease; }
.fab:hover { background: var(--accent-strong); }
.fab:active { transform: scale(0.94); }

/* Bottom nav (mobile only) */
.bottom-nav { display: none; }
.bottom-nav a, .bottom-nav .more-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; }
.bottom-nav a.active, .bottom-nav .more-btn[aria-expanded="true"] { color: var(--accent); }
.bottom-nav svg { display: block; }

/* More sheet */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; }
.more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surface); border-top-left-radius: 18px; border-top-right-radius: 18px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,0.25); animation: sheet-up 0.18s ease; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 6px auto 12px; }
.sheet-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sheet-links a { padding: 13px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; background: var(--bg); }
.sheet-links a.active { color: var(--accent); background: var(--ok-bg); }

@media (max-width: 720px) {
  .app-header .nav { display: none; }            /* replace top scroll strip with bottom nav */
  .app-header > .wrap:last-child { display: none; }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(150%) blur(8px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .app-main { padding-bottom: 92px; }            /* clear the fixed bottom nav */
  .app-footer { display: none; }
  .fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 18px; }
}

@media (max-width: 380px) {
  .brand-text { display: none; }                 /* keep the top bar from crowding */
}

/* Live amount readback under the entry form's amount field */
.field-hint { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* Reports charts — inline SVG, no external libraries */
.chart { width: 100%; height: auto; display: block; }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.line-income { stroke: var(--ok-text); }
.line-expense { stroke: var(--bad-text); }
.area { stroke: none; opacity: 0.13; }
.area-income { fill: var(--ok-text); }
.area-expense { fill: var(--bad-text); }
.chart-label { fill: var(--muted); font-size: 13px; }
.chart-key { display: inline-flex; gap: 14px; font-size: 12px; font-weight: 700; }
.chart-key .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-key .key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.key-income { color: var(--ok-text); }
.key-expense { color: var(--bad-text); }

.donut-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.donut { width: 190px; height: 190px; flex: none; }
.donut-track { stroke: var(--bg); }
.donut-center { fill: var(--text); font-size: 17px; font-weight: 700; }
.donut-sub { fill: var(--muted); font-size: 11px; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.legend .dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend .grow { flex: 1; }

.delta { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.delta.good { background: var(--ok-bg); color: var(--ok-text); }
.delta.bad { background: var(--bad-bg); color: var(--bad-text); }
.delta.flat { background: var(--border); color: var(--muted); }

/* Reminders */
.reminders-banner { margin-bottom: 20px; }
.reminders-banner .alert { margin-bottom: 8px; }
.remind-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.remind-dot.bad { background: var(--bad-text); }
.remind-dot.warn { background: var(--warn); }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--bad-text); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }

/* Header reminders bell + account menu */
.icon-btn.bell { position: relative; text-decoration: none; }
.icon-btn.bell.active { color: var(--accent); border-color: var(--accent); }
.icon-btn.bell .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; box-shadow: 0 0 0 2px var(--bg); }
.account-menu { min-width: 200px; }
.account-menu .account-id { padding: 4px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
.account-menu .account-id .sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.account-menu #theme-btn { display: flex; align-items: center; gap: 8px; }

/* Manage hub cards */
.manage-card { text-decoration: none; color: inherit; display: block; transition: border-color 0.12s ease; }
.manage-card:hover { border-color: var(--accent); }
.manage-card .name { font-weight: 600; }
.manage-card .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* Print / Save-as-PDF — force a clean light layout regardless of screen theme */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --text: #1a1a18; --muted: #555;
    --border: #cfcfc8; --ok-text: #0f6e56; --bad-text: #a32d2d; --accent: #0f6e56;
  }
  .app-header, .bottom-nav, .fab, .app-footer, .no-print, .month-nav a { display: none !important; }
  body { background: #fff; }
  .app-main { padding: 0; max-width: 100%; }
  .card { box-shadow: none; border-color: #cfcfc8; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Split-across-categories */
.split-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 12px; cursor: pointer; }
#split-section { margin-bottom: 6px; }
.split-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.split-row .split-cat { flex: 1; min-width: 0; }
.split-row .split-amt { width: 140px; flex: none; }
.split-remove { flex: none; width: 36px; height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.split-remove:hover { color: var(--bad-text); }
#add-split { margin-bottom: 8px; }

/* Ledger pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.pager [aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* Savings goals — contribute/withdraw row */
.goal-contrib { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.goal-contrib input { width: 150px; }

/* Tags */
.tag-chip { text-decoration: none; color: var(--accent); background: var(--ok-bg); border-color: transparent; }
.tag-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Receipts */
.receipt-chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); text-decoration: none; }
.receipt-current { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.receipt-current label { display: inline-flex; align-items: center; gap: 5px; }

/* Small layout utilities (replace repeated inline styles) */
.mt-sm { margin-top: 8px; }
.actions.center { justify-content: center; }
.row.row-flush { border: none; padding: 0 0 10px; }

/* Overflow (⋯) row-action menu */
.row-menu { position: relative; flex: none; }
.icon-btn.menu-toggle { font-size: 20px; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 150px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.menu[hidden] { display: none; }   /* author display:flex above would otherwise defeat [hidden] */
.menu a, .menu button { font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; color: var(--text); background: none; border: none; padding: 9px 12px; border-radius: 7px; cursor: pointer; width: 100%; }
.menu a:hover, .menu button:hover { background: var(--bg); }
.menu .danger { color: var(--bad-text); }

/* Undo toast — delete is reversible, so no scary confirm() */
.flash.undo { background: var(--text); color: var(--bg); }
.flash-action { font: inherit; font-weight: 700; background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0 2px; white-space: nowrap; }