/* GSR: plum, coral, jade and warm cream. All assets remain local. */
[hidden] { display: none !important; }
:root {
  --ink: #32223d;
  --muted: #6d5b76;
  --plum: #542363;
  --coral: #b93850;
  --jade: #11635b;
  --line: #eadde9;
  --cream: #fff8f1;
  color: var(--ink);
  background: var(--cream);
}
body {
  background: radial-gradient(ellipse at 0 12%, #f4d9e9 0, transparent 48%),
    radial-gradient(ellipse at 100% 45%, #def2eb 0, transparent 45%), #fff8f1;
  background-attachment: fixed;
  color: var(--ink);
}
body header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #421650 0%, #6f2f78 58%, #a83259 100%);
  padding: 30px 22px 32px;
  box-shadow: 0 8px 26px #54236325;
}
body header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  border: 42px solid #ffffff12;
  border-radius: 50%;
  right: -100px;
  top: -120px;
  pointer-events: none;
}
body header small { opacity: 1; color: #ffebf5; letter-spacing: .045em; }
body header small:first-child { font-size: 10px; font-weight: 750; letter-spacing: .18em; }
body h1 { font-size: 27px; letter-spacing: -.8px; margin: 9px 0; }
body h2 { color: var(--plum); letter-spacing: -.3px; }
body main { padding: 18px 14px; }
body .panel, body .stat {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 5px 18px #54236308;
}
body .panel { padding: 18px; }
body .stats { gap: 12px; }
body .stat { padding: 18px 14px; border: 0; position: relative; overflow: hidden; }
body .stat::after {
  content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%;
  background: #ffffff50; top: -25px; right: -25px; pointer-events: none;
}
body .stat:nth-child(1) { background: linear-gradient(130deg, #f2dcf6, #f9eefa); color: #542363; }
body .stat:nth-child(2) { background: linear-gradient(130deg, #d3efe6, #eaf8f2); color: #11635b; }
body .stat:nth-child(3) { background: linear-gradient(130deg, #ffe6c6, #fff3df); color: #794717; }
body .stat:nth-child(4) { background: linear-gradient(130deg, #fbd6df, #fff0f3); color: #97314c; }
body .stat small { color: inherit; font-weight: 650; font-size: 12px; }
body .stat strong { font-size: clamp(23px, 6vw, 30px); letter-spacing: -.8px; }
body button {
  background: linear-gradient(120deg, #a82f4b, #bd3a53);
  color: white;
  border-radius: 12px;
  box-shadow: 0 3px 8px #b9385018;
  min-height: 42px;
  transition: filter .15s ease, box-shadow .15s ease;
}
body button:hover:not(:disabled) { filter: brightness(.96); box-shadow: 0 4px 12px #54236320; }
body button:active:not(:disabled) { filter: brightness(.89); }
body button.secondary { color: #542363; background: #f2e7f6; box-shadow: none; }
body button.danger { color: #a2253d; background: #ffe3e7; box-shadow: none; }
body button:disabled { opacity: .55; box-shadow: none; }
body button:focus-visible, body a:focus-visible { outline: 3px solid #11635b; outline-offset: 3px; }
body label { color: #5c4368; font-weight: 650; }
body input, body select, body textarea {
  color: var(--ink); background: #fffcff; border-color: #ddcede; border-radius: 12px;
  font-size: 16px; min-width: 0;
}
body input:focus, body select:focus, body textarea:focus {
  border-color: #9255a3; outline: 3px solid #9255a322; outline-offset: 0;
}
body input::placeholder, body textarea::placeholder { color: #806e87; opacity: 1; }
body input[type="checkbox"] { width: 21px; height: 21px; accent-color: #a82f4b; }
body input[type="file"] { background: #faf3fc; color: #542363; }
body input[type="file"]::file-selector-button {
  border: 0; padding: 9px 12px; margin-right: 8px; border-radius: 8px;
  background: #542363; color: white; font: inherit; font-size: 13px;
}
body .muted { color: var(--muted); }
body .item, body .ledger-item, body .snapshot-row { border-color: var(--line); }
body .tag { color: #11635b; background: #def3e9; padding: 5px 9px; font-weight: 600; }
body .warn { color: #794717; background: #fff0cf; }
body .notice { color: #6c4218; background: #fff0d8; border: 1px solid #f0d5aa; border-radius: 14px; }
body .notice button { margin-top: 6px; }
body a, body #receiptLinks a { color: #763386; }
body .tabs {
  background: #fffafdf5;
  border-top: 1px solid #e4cfe4;
  box-shadow: 0 -5px 20px #5423630c;
  gap: 3px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body .tabs button {
  color: #735c7c; background: transparent; box-shadow: none; border-radius: 12px;
  font-weight: 650; padding: 9px 2px; min-width: 0;
}
body .tabs button.active { color: #542363; background: #efddf3; box-shadow: inset 0 2px 0 #9e5fac; }
body .expense-open { color: var(--ink); background: transparent; box-shadow: none; }
body .expense-open:hover:not(:disabled) { background: #fbf4fc; box-shadow: none; }
body .camera-controls { background: #f4e8f8; border: 1px solid #e2c9eb; border-radius: 16px; }
body .ocr-suggestions { border-color: #c3e1d4; background: #f0fbf5; border-radius: 16px; }
body .split-row { background: #faf1fb; border: 1px solid #ebd9ef; }
body .review-warning { background: #fff0d8; color: #6c4218; border-left: 4px solid #c28a31; }
body .needs-review { border-color: #b57515 !important; background: #fff8e9 !important; }
body .receipt-thumb { background: #f1e6f5 !important; color: #542363; }
body .receipt-comparison { background: #fffcff; border-color: #dcbbe6; box-shadow: 0 5px 18px #54236310; }
body .receipt-compare-content { background: #f1e8f4; border-radius: 9px; }
body .import-preview { background: #fffafd; color: var(--ink); }
body #importPreviewDialog {
  width: calc(100% - 24px);
  max-width: 620px;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #ead8ec;
  border-radius: 22px;
  box-shadow: 0 20px 70px #32123d35;
}
body #importPreviewDialog[open] { display: flex; flex-direction: column; }
body #importPreviewDialog .import-header {
  flex: 0 0 auto;
  padding: 20px 18px 14px;
  background: #faf0fd;
  border-bottom: 1px solid #ead8ec;
}
body #importPreviewDialog .import-header h2 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; }
body #importPreviewDialog .import-header p { margin: 0; font-size: 13px; line-height: 1.4; }
body #importPreviewDialog .import-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 18px; font-size: 14px; line-height: 1.45;
}
body #importPreviewDialog .import-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
body #importPreviewDialog .import-summary-card { background: #f2e5f7; padding: 12px; border-radius: 12px; min-width: 0; }
body #importPreviewDialog .import-summary-card:nth-child(2) { background: #def3e9; color: #11635b; }
body #importPreviewDialog .import-summary-card:nth-child(3) { background: #fde5ec; color: #97314c; }
body #importPreviewDialog .import-summary-card:nth-child(4) { background: #fff0d3; color: #794717; }
body #importPreviewDialog .import-summary-card small { display: block; font-size: 12px; margin-bottom: 4px; }
body #importPreviewDialog .import-summary-card strong { font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
body #importPreviewDialog .import-details { display: grid; grid-template-columns: minmax(0,1fr) minmax(70px,.8fr); gap: 0 12px; margin: 16px 0 0; }
body #importPreviewDialog .import-details dt,
body #importPreviewDialog .import-details dd { padding: 10px 0; border-bottom: 1px solid #eadde9; margin: 0; overflow-wrap: anywhere; }
body #importPreviewDialog .import-details dt { color: #6d5b76; }
body #importPreviewDialog .import-details dd { text-align: right; font-weight: 650; }
body #importPreviewDialog .notice { font-size: 13px; line-height: 1.5; padding: 12px; margin-bottom: 0; }
body #importPreviewDialog .import-footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 18px max(14px,env(safe-area-inset-bottom));
  background: #fffafd; border-top: 1px solid #ead8ec; flex: 0 0 auto;
}
body #importPreviewDialog .import-footer button { width: 100%; font-size: 14px; min-height: 46px; padding: 11px 8px; margin: 0; }
body #importPreviewDialog .import-footer button:focus-visible { outline-width: 2px; outline-offset: 1px; }
@media (max-width: 350px) {
  body #importPreviewDialog .import-header, body #importPreviewDialog .import-body { padding-left: 12px; padding-right: 12px; }
  body #importPreviewDialog .import-summary-card strong { font-size: 20px; }
}
/* The phone preview scrolls with the form instead of covering its fields. */
@media (max-width: 899px) {
  body .receipt-comparison { position: static; z-index: auto; padding: 12px; }
  body .receipt-comparison h2 { font-size: 17px; }
  body .receipt-comparison button { font-size: 13px; margin: 4px 6px 0 0; padding: 9px 12px; }
  body .receipt-compare-content { max-height: 24dvh; }
  body .receipt-comparison:not(.receipt-expanded) .receipt-compare-content { display: none; }
  body .receipt-comparison p { font-size: 12px; }
  body input[type="date"] { max-width: 100%; width: 100%; min-height: 46px; box-sizing: border-box; }
}
body dialog::backdrop { background: #32123dc4; }
body #receiptViewer[open] { background: #f7eef9; }
body .receipt-toolbar { background: #542363; border-bottom-color: #783c88; color: white; }
body .receipt-toolbar h2 { color: white; }
body .receipt-toolbar button { background: #fbe1e8; color: #542363; box-shadow: none; }
body .receipt-tools { background: #f3e5f7; border-bottom: 1px solid #e2cce8; align-items: center; }
body .receipt-status { color: #63496e; background: #fdf8ff; }
body .receipt-page-label { color: #6d5b76; }
body #cashSummary { border-top: 4px solid #3d9a84; }
body .tool-grid button { color: #542363; background: #f1e1f6; }
body .tool-grid button:nth-child(2) { color: #11635b; background: #dcf2e8; }
body .tool-grid button:nth-child(3) { color: #97314c; background: #fbe1e8; }
body .tool-grid button:nth-child(4) { color: #794717; background: #fff0d3; }
@media (prefers-reduced-motion: reduce) { body button { transition: none; } }
/* Shared sizing and spacing across forms, ledgers, tools and recovery. */
body main, body main > section, body .panel, body form { min-width: 0; }
body .row { flex-wrap: wrap; align-items: center; gap: 10px; }
body .row h2 { margin-bottom: 0; flex: 1 1 130px; }
body .row strong:last-child { white-space: nowrap; }
body .row span { min-width: 0; overflow-wrap: anywhere; }
body .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
body .actions > button { flex: 1 1 140px; margin: 0; }
body .actions > input { flex: 1 1 180px; }
body button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; touch-action: manipulation; }
body .ledger-item > strong, body .snapshot-row small { display: block; }
body .ledger-item > .actions, body .snapshot-row > .actions { margin-top: 10px; }
body input, body select, body textarea { max-width: 100%; }
body textarea { resize: vertical; line-height: 1.45; }
body input[type="date"] { display: block; width: 100%; min-width: 0; min-height: 46px; -webkit-appearance: none; }
body input[type="checkbox"] { display: block; min-height: 21px; margin: 8px 0 12px; }
body input[type="file"] { overflow: hidden; font-size: 14px; }
body .optional-controls { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fdf9ff; min-width: 0; }
body .optional-controls > summary { cursor: pointer; color: var(--plum); font-weight: 650; line-height: 1.4; min-height: 24px; }
body .optional-controls[open] > summary { margin-bottom: 12px; }
body .reporting-controls > summary { color: var(--plum); cursor: pointer; font-weight: 650; padding: 4px 0; }
body .reporting-controls[open] > summary { margin-bottom: 12px; }
body #expenseForm > .expense-workspace { margin-top: 14px; }
body .expense-workspace:has(.receipt-comparison[hidden]) { grid-template-columns: minmax(0,1fr); }
body .expense-fields > .panel:first-of-type { margin-top: 0; }
body #ocrSuggestions { margin-top: 12px; }
body #ocrSuggestions > .panel { border: 0; box-shadow: none; padding: 0; background: transparent; }
body #ocrSuggestions .review-warning { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body #ocrSuggestions .review-warning span { flex: 1 1 180px; font-size: 13px; }
body #ocrSuggestions .review-warning button { margin: 0; font-size: 13px; }
body #ocrSuggestions h2 { font-size: 16px; }
body #ocrText { min-height: 160px; font-size: 13px; }
body #readReceiptAgain { width: 100%; margin-top: 8px; }
body .camera-controls.compact-camera { background: transparent; border: 0; padding: 0; margin: 12px 0 0; }
body .receipt-pickers > button { flex: 1 1 110px; }
body #expenseForm .expense-fields > .actions { margin-top: 18px; }
body .page-heading { margin-bottom: 14px; }
body .page-heading button { font-size: 13px; }
body #backup > .panel:first-child > .actions { margin-bottom: 12px; }
body .receipt-comparison { overflow-wrap: anywhere; }
body .receipt-comparison > button { margin: 6px 6px 0 0; }
body .receipt-toolbar { flex-wrap: wrap; gap: 8px; }
body .receipt-toolbar h2 { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
body .receipt-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body .receipt-tools button { min-width: 44px; font-size: 13px; }
body .receipt-status { line-height: 1.4; }
body .filter-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
body .tool-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 450px) {
  body main { padding: 12px; }
  body .panel { padding: 14px; }
  body .actions > button { flex-basis: 125px; }
  body .receipt-comparison > button { display: block; width: 100%; margin: 8px 0 0; }
  body #receiptLinks .actions { align-items: center; }
  body #receiptLinks .actions > button:first-of-type { flex-basis: calc(100% - 75px); text-align: left; }
  body #receiptLinks .actions > button:last-child { flex-basis: 100%; }
  body .tabs { padding-left: 5px; padding-right: 5px; gap: 2px; }
  body .tabs button { font-size: 11px; }
  body #importPreviewDialog .import-footer { grid-template-columns: minmax(0,1fr); }
}
@media print {
  :root, body { color: #111; background: white; }
  body #printReport { background: white; color: #111; }
  body #printReport h1 { color: #111; }
}