:root {
  --ink: #2a414f;
  --muted: #60737e;
  --line: #e0e7ea;
  --orange: #ed8634;
  --blue: #1b95d1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: #f5f7f8;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.wrap { max-width: 1080px; padding: 0 32px; margin: auto; }
header { background: #fff; border-bottom: 1px solid var(--line); }
.mast { height: 86px; display: flex; justify-content: space-between; align-items: center; }
.mast img { width: 168px; height: 56px; object-fit: contain; }
.mast span { color: var(--muted); font-size: 13px; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
.layout { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.paper, .summary { border-radius: 16px; background: #fff; overflow: hidden; }
.paper { padding: 30px; border: 1px solid var(--line); }
h2 { color: var(--ink); font: 600 27px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: -.04em; margin: 0; }
.paper-head p { margin: 7px 0 24px; font-size: 14px; color: var(--muted); }
fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
.fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px 14px; }
.wide { grid-column: 1 / -1; }
label { display: block; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; }
input, select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px;
  margin-top: 7px;
  border: 1px solid #d5dfe4;
  border-radius: 10px;
  background: #f9fbfc;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
select { padding-right: 25px; }
textarea { min-height: 88px; resize: vertical; }
::placeholder { color: #82929d; opacity: 1; }
button:focus-visible, input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.money { position: relative; }
.money span { position: absolute; top: 13px; left: 13px; font-size: 16px; color: var(--muted); font-weight: 400; }
.money input { padding-left: 30px; }
.attachments { margin: 22px 0 18px; }
.attachtitle { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.attachtitle small { font-size: 12px; font-weight: 400; color: var(--muted); }
.uploadrow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }
.uploadrow button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  gap: 7px;
  border: 1px dashed #c2d0d7;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.uploadrow span { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
button svg { width: 18px; height: 18px; flex: none; }
#attachment { font-size: 13px; overflow-wrap: anywhere; margin-top: 10px; }
#remove { padding: 8px; min-height: 44px; background: none; border: 0; text-decoration: underline; color: var(--ink); }
.primary {
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 11px;
  background: #2a414f;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.primary:hover { background: #345567; }
.primary:disabled { opacity: .6; }
.note { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: #f2f5f7; color: var(--muted); font-size: 12px; }
#message, #reviewStatus { font-size: 14px; }
#message:empty, #reviewStatus:empty { display: none; }
.summary { border: 1px solid var(--line); }
.photo { height: 170px; background: linear-gradient(0deg,#233945aa,transparent 80%),url(auburn-home.webp) center/cover; display: flex; align-items: flex-end; padding: 20px; color: #fff; font-size: 14px; }
.summarybody { padding: 24px; }
.eyebrow { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.eyebrow i { width: 18px; height: 3px; background: var(--orange); }
.summary h2 { font-size: 20px; }
#sumAmount { font-size: 36px; font-weight: 600; margin: 16px 0; }
.summary dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.summary dt { font-size: 12px; color: var(--muted); }
.summary dd { margin: 3px 0 14px; font-size: 14px; }
footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin: 24px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
@media (max-width: 800px) {
  .wrap { padding: 0 20px; }
  .layout { grid-template-columns: 1fr; }
  .layout aside { display: none; }
}
@media (max-width: 560px) {
  body { background: #fff; }
  .wrap { padding: 0 20px; }
  .mast { height: 76px; }
  .mast img { width: 144px; height: 48px; }
  .mast span { font-size: 12px; }
  .paper { padding: 0 0 24px; border: 0; border-radius: 0; }
  .paper-head p { margin-bottom: 22px; }
  .fields label:has(#vendor), .fields label:has(#category) { grid-column: 1 / -1; }
  footer { display: none; }
}

nav {
  display: flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  margin: 24px 0;
  border-radius: 12px;
  background: #e9eef1;
}
nav button {
  min-height: 44px;
  padding: 10px 24px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #536975;
  font-size: 14px;
  font-weight: 600;
}
nav button[aria-current] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px #23394512;
}
.layout { margin-top: 0; }
.mast span { max-width: 210px; text-align: right; }
.filters { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; }
.totals {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0;
  padding: 18px;
  background: #f2f5f7;
  border-radius: 12px;
}
.totals small, .totals b { display: block; }
.totals small { font-size: 12px; color: var(--muted); }
.totals b { font-size: 24px; }
.row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.row strong { font-size: 14px; overflow-wrap: anywhere; }
.row a { color: #12658a; }
@media (max-width: 560px) {
  nav { width: 100%; margin: 20px 0 26px; }
  nav button { flex: 1; padding: 10px 5px; }
  .mast span { max-width: 135px; font-size: 12px; line-height: 1.4; }
  .filters { grid-template-columns: 1fr; }
  .totals { padding: 14px; }
  .totals small { font-size: 11px; }
}

.syncbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.syncbar p { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: 13px; }

#refreshExpenses {
  padding: 10px 14px; min-height: 44px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px;
}
#refreshExpenses:disabled { opacity: .6; cursor: wait; }
#confirmation {
  width: min(440px, calc(100% - 28px)); max-height: calc(100% - 32px);
  border: 0; padding: 0; border-radius: 22px; background: #fff;
  color: var(--ink); box-shadow: 0 24px 80px #11293640;
}
#confirmation::backdrop { background: #122d3b80; backdrop-filter: blur(4px); }
.confirmation-card { padding: 32px; position: relative; text-align: center; }
.close-confirmation {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--muted); font-size: 28px;
}
.success-mark {
  display: grid; place-items: center; margin: 0 auto 18px;
  width: 62px; height: 62px; border-radius: 50%;
  background: #e8f4ef; color: #257655; font-size: 30px; font-weight: 600;
}
#confirmation h2 { font-size: 27px; }
#confirmationText { margin: 10px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.confirmed-amount { font-size: 42px; font-weight: 650; letter-spacing: -.04em; }
.confirmed-details {
  text-align: left; background: #f4f7f8; padding: 18px;
  border-radius: 12px; margin: 22px 0; display: grid;
  grid-template-columns: 76px minmax(0,1fr); gap: 12px; font-size: 13px;
}
.confirmed-details dt { color: var(--muted); }
.confirmed-details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.secondary { width: 100%; padding: 12px; min-height: 46px; background: #fff; border: 0; color: var(--ink); font-size: 14px; }
@media(max-width:560px) { .confirmation-card { padding: 30px 22px 20px; } }
@media(prefers-reduced-motion:no-preference) {
  #confirmation[open] .success-mark { animation: confirmed .22s ease-out; }
  @keyframes confirmed { from { transform: scale(.85); } to { transform: scale(1); } }
}

/* Calm, readable monthly cards. */
#review { color: #354852; }
#review .paper-head h2 { color: #344e5c; }
#review .paper-head p, #review label, #review .syncbar p { color: #5c6d76; }
#review .totals { background: #f0f5f4; border: 1px solid #e0e9e6; }
#review .totals b { color: #31594f; font-weight: 600; font-variant-numeric: tabular-nums; }
#rows { display: grid; gap: 14px; }
#review .row { display: block; padding: 20px; border: 1px solid #dfe7e9; border-radius: 14px; background: #fcfdfd; }
.row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 9px; }
.row-heading strong { color: #344e5c; font-size: 15px; font-weight: 600; line-height: 1.5; }
.row-heading b { color: #31594f; font-size: 19px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#review .row .row-details { color: #64747d; font-size: 12px; line-height: 1.65; }
#review .row .row-description { color: #455862; font-size: 14px; margin-top: 12px; line-height: 1.65; }
#review .row .row-meta { color: #64747d; font-size: 12px; margin-top: 12px; }
.row-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e8edef; }
.receipt-button { min-height: 44px; padding: 8px 12px; border: 1px solid #dbe7e9; border-radius: 9px; color: #325e6a; background: #eef5f6; font-size: 13px; font-weight: 600; }
.receipt-button:hover { background: #e2eef0; }
.missing-receipt { color: #69767d; font-size: 12px; }
.trash-button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid transparent; border-radius: 9px; color: #98635d; background: transparent; }
.trash-button:hover { color: #8e423c; background: #fbefed; border-color: #f0dad6; }
#receiptDialog, #deleteDialog { padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px #11293640; max-height: calc(100dvh - 28px); }
#receiptDialog::backdrop, #deleteDialog::backdrop { background: #122d3b99; backdrop-filter: blur(4px); }
#receiptDialog { width: min(850px, calc(100% - 24px)); }
.receipt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.receipt-header h2 { font-size: 20px; }
#receiptName { margin: 5px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.icon-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #4c626d; background: #edf2f4; font-size: 28px; }
.receipt-content { background: #f4f6f7; display: flex; justify-content: center; padding: 12px; }
.receipt-content:empty { display: none; }
.receipt-content img { display: block; max-width: 100%; max-height: 68dvh; width: auto; height: auto; object-fit: contain; }
.receipt-content iframe { display: block; width: 100%; height: 65dvh; border: 0; background: #fff; }
#receiptMessage { margin: 14px 22px; font-size: 14px; color: var(--muted); }
#receiptMessage:empty, #deleteError:empty { display: none; }
.receipt-download { display: inline-block; padding: 12px 0; margin: 0 22px 10px; color: #325e6a; font-size: 13px; }
#deleteDialog { width: min(440px, calc(100% - 28px)); }
.delete-card { padding: 26px; }
.delete-card h2 { font-size: 23px; }
#deleteText { color: var(--muted); font-size: 14px; margin: 12px 0 20px; }
.delete-summary { background: #f4f7f8; padding: 16px; border-radius: 12px; }
.delete-summary strong { font-size: 24px; color: #344e5c; }
.delete-summary p { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
#deleteVendor { color: var(--muted); }
.delete-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.delete-actions .secondary { border: 1px solid var(--line); border-radius: 10px; }
.danger { padding: 12px; min-height: 48px; border: 0; border-radius: 10px; background: #a44940; color: #fff; font-size: 14px; font-weight: 600; }
.danger:hover { background: #8b3c34; }
.danger:disabled, .delete-actions .secondary:disabled { opacity: .6; cursor: wait; }
#deleteError { color: #923f37; font-size: 13px; }
@media(max-width:560px) {
  #review .row { padding: 16px; }
  .row-heading { gap: 12px; }
  .row-heading strong { font-size: 14px; }
  .row-heading b { font-size: 17px; }
  .receipt-header { padding: 16px; }
  .delete-card { padding: 24px 20px; }
  #receiptDialog { max-height: calc(100dvh - 16px); }
}