/* EquiSplit Precision applied to the existing Bill Splitter controls.
   Source: stitch/codebase-redesign-design.json. All fonts are local assets. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0b1c30;
  --muted: #565e74;
  --line: #d9e3ed;
  --paper: #f8f9ff;
  --card: #ffffff;
  --green: #006948;
  --mint: #e8f7f0;
  --coral: #ba1a1a;
  --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --stitch-sky: #00628d;
  --stitch-surface: #eff4ff;
  --stitch-accent: #059669;
  --stitch-radius: 16px;
  --stitch-mono: "JetBrains Mono", ui-monospace, monospace;
}

body, button, input, select, textarea { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
body { background: var(--paper); color: var(--ink); }
h1, h2, h3, .brand { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
h1, h2, h3 { letter-spacing: -.025em; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--stitch-accent); }
:focus-visible, .payer-option input:focus-visible + .payer-card { outline: 3px solid #10b981; outline-offset: 2px; }
button:active:not(:disabled) { transform: scale(.985); }
.primary-button, .share-button { background: var(--stitch-accent); color: #fff; border-radius: 12px; }
.primary-button:hover, .share-button:hover { background: var(--green); }
.ghost-button { border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--green); }
.icon-button { background: var(--stitch-surface); color: var(--ink); }
.app-shell { max-width: 980px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.topbar { min-height: 66px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: -.05em; }
.brand-mark { background: var(--stitch-accent); border-radius: 11px; }
.brand-mark svg { display: block; width: 30px; height: 30px; }
.brand > span:last-child { color: var(--stitch-accent); }
.screen { padding-top: 18px; }
.screen-heading h1 { font-size: clamp(25px, 4vw, 32px); }
.panel, .summary-panel, .balance-card, .profile-card { border: 1px solid var(--line); border-radius: var(--stitch-radius); background: #fff; box-shadow: var(--shadow); }
.balance-card { border-color: #bce9d3; background: linear-gradient(140deg, #f4fff9, #e9f8f1); }
.balance-card strong, .analytics-metric strong, .analytics-group-row b, .analytics-transfer b, .group-row b, .activity-row b { font-family: var(--stitch-mono); font-variant-numeric: tabular-nums; }
.compact-section .section-heading h2, .section-label { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.group-row, .activity-row { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.group-card-icon { border-radius: 13px; background: #dff6ea; }
.group-row b { color: var(--green); }
.group-row b.debt { color: var(--coral); }
.filter-pills button, .view-switch button { border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; font-weight: 700; }
.filter-pills button[aria-pressed=true], .view-switch button[aria-pressed=true] { border-color: var(--green); background: var(--green); color: #fff; }
.date-heading { background: var(--paper); color: var(--muted); }
.activity-row .activity-icon { background: #e6f7ed; color: var(--green); }
.activity-row small, .ledger-copy small, .group-row small { color: var(--muted); }
.analytics-metric.share { border-color: #bce9d3; background: #effaf4; }
.cloud-sync-status { border-bottom: 1px solid var(--line); background: var(--paper); }
.draft-banner { border: 1px solid #bce9d3; border-radius: 14px; background: #effaf4; }

/* Group overview: Stitch's title, summary card, member ledger and activity stack. */
#groupDetail { max-width: 760px; margin-inline: auto; }
.detail-hero { padding-bottom: 20px; }
.detail-title-row { align-items: flex-start; }
.detail-heading { min-width: 0; }
.detail-title-row .icon-button { flex: none; background: #fff; border: 1px solid var(--line); }
.detail-title-row h1 { font-size: clamp(27px, 5vw, 36px); font-weight: 800; letter-spacing: -.04em; }
.member-summary { color: var(--stitch-sky); font-weight: 700; }
.ledger-context { border-color: #bce9d3; border-radius: 999px; background: #effaf4; color: var(--green); }
.group-tabs { padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--stitch-surface); }
.group-tabs button { border: 0; border-radius: 10px; background: transparent; }
.group-tabs button[aria-pressed=true] { background: #fff; color: var(--green); box-shadow: var(--shadow); }
.detail-total-card { margin: 18px 0 22px; padding: 20px; border: 1px solid #bce9d3; border-radius: 20px; background: linear-gradient(135deg, #f3fff8, #e6f8ee); box-shadow: var(--shadow); }
.detail-ledger > .detail-total-card:first-child { margin: 0 0 14px; }
.section-label { margin: 2px 0 10px; }
.detail-summary { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.detail-balance { min-height: 65px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; box-shadow: var(--shadow); }
.detail-balance .avatar { background: #dcf6e8; color: var(--green); }
.detail-balance strong { font-family: var(--stitch-mono); font-size: 11px; font-weight: 600; color: var(--coral); }
.group-tools { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 28px; }
.group-tools button { min-height: 48px; }
#groupOverview > h2:not(.section-label) { margin: 0 0 10px; font-size: 17px; }
.detail-ledger { padding: 12px; border-radius: 18px; }
.detail-ledger .items-list { margin-top: 0; }
.ledger-row { min-height: 66px; grid-template-columns: 58px minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: none; }
.ledger-type { border-radius: 999px; background: #fff0ed; color: var(--coral); }
.ledger-row b { color: var(--coral); font: 600 12px var(--stitch-mono); }
.payment-card .ledger-type { background: #e4f7ed; color: var(--green); }
.payment-card b { color: var(--green); }
.ledger-copy strong { font-size: 13px; }

/* Itemized bill: full-page draft workspace and receipt-style calculation panel. */
.bill-editor { max-width: 760px; padding-top: 0; }
.bill-editor-header { grid-template-columns: 80px 1fr 80px; min-height: 62px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.bill-editor-header h1 { font-size: 19px; font-weight: 800; }
.bill-editor-header .back-button { color: var(--muted); }
.draft-pill { justify-self: end; padding: 5px 10px; border-radius: 999px; background: #e5f7ed; color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.bill-fields { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.bill-fields label { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.bill-fields input, .bill-fields select { margin-top: 4px; min-height: 46px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.item-table-panel { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.item-table-head { padding: 8px 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
#itemsList { display: grid; gap: 9px; }
.item-table-row { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.item-table-row:first-child { border-top: 1px solid var(--line); }
.item-table-row input { border-radius: 10px; }
.item-table-row [data-row-price] { font-family: var(--stitch-mono); font-size: 14px; }
.shared-by-button { border-radius: 10px; background: #eaf8f0; color: var(--green); font-weight: 700; }
.row-menu summary { color: var(--muted); }
.row-menu button { border: 1px solid var(--line); background: #fff; }
.item-table-actions { gap: 8px; padding: 12px 0; border: 0; }
.item-table-actions button { flex: 1; min-height: 46px; border: 1px dashed #a9d8c0; background: #f4fff9; }
.receipt-scan-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; max-width: 100%; }
.receipt-scan-area * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.receipt-scan-tools:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.receipt-model-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.receipt-model-field label { color: var(--muted); font-size: 12px; font-weight: 700; }
#receiptModelSelect { width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
#scanReceiptButton { width: 100%; min-height: 44px; border: 1px dashed #a9d8c0; background: #f4fff9; }
.receipt-scan-availability, .receipt-scan-notice { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f5f8f6; color: var(--ink); font-size: 13px; line-height: 1.45; }
.receipt-scan-notice[data-kind="warning"] { border-color: #d5a24d; background: #fff8e8; }
.receipt-scan-notice[data-kind="error"] { border-color: #d58b86; background: #fff3f1; }
.receipt-scan-notice strong { display: block; margin-bottom: 4px; }
.receipt-scan-notice ul { margin: 6px 0 0; padding-left: 20px; }
.receipt-scan-area summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: 700; }
.receipt-scan-area summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.receipt-photo-preview:not([hidden]) { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.charges-panel, .bill-summary { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.charges-panel > details > summary, .bill-summary > details > summary { color: var(--ink); font-size: 14px; }
.charge { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.charge > label { color: var(--ink); }
.charge-controls input { font-family: var(--stitch-mono); }
.totals { border-top: 0; padding-top: 0; }
.totals > div { min-height: 28px; color: var(--muted); }
.totals strong, .summary-row strong { color: var(--ink); font-family: var(--stitch-mono); font-variant-numeric: tabular-nums; }
.grand-total { align-items: center; border: 1px solid #bce9d3; border-radius: 13px; background: #ecfbf3; color: var(--green) !important; }
.grand-total strong { color: var(--green); font-size: 20px; }
.bill-summary > details { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.summary-row { border-radius: 10px; }
.bill-footer { border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 22px rgba(11,28,48,.05); }
.bill-footer button { min-height: 48px; }

/* Stitch sheets retain the existing dialog handlers, validation and focus trap. */
.modal-backdrop { background: rgba(11, 28, 48, .48); }
.modal { width: min(560px, 100%); max-height: min(92dvh, 900px); gap: 10px; padding: 24px; border: 1px solid #e4ebf1; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(11,28,48,.18); }
.modal-header { align-items: center; margin-bottom: 7px; }
.modal-header h2 { font-size: 22px; font-weight: 800; }
.modal-header .eyebrow { margin-bottom: 4px; color: var(--green); font-size: 10px; }
.modal > label, .field-label { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.modal > input, .modal > select, .modal > textarea { width: 100%; }
.modal-subheading h3 { margin: 0; font-size: 14px; }
.modal-subheading span { font-size: 11px; }
.modal-note { margin: 0 0 8px; padding: 10px 12px; border: 1px solid #d5e8f4; border-radius: 12px; background: #f0f8fd; color: #295c77; font-size: 12px; }
.person-picker { gap: 8px; }
.payer-card { min-height: 52px; border: 1px solid var(--line); border-radius: 13px; font-size: 12px; }
.payer-option input:checked + .payer-card { border: 2px solid var(--stitch-accent); background: #e9faf1; color: var(--green); }
.check-person { min-height: 49px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; }
.check-person:has(input:checked) { border-color: #8edbb6; background: #f0fcf5; }
.check-person input { accent-color: var(--stitch-accent); }
.split-feedback { margin: 5px 0; border: 1px solid #bce9d3; border-radius: 12px; background: #effaf4; color: var(--green); font-size: 12px; font-weight: 700; }
.value-grid label { color: var(--muted); }
.value-grid input { font-family: var(--stitch-mono); }
.modal > .primary-button:last-child { position: sticky; bottom: 0; z-index: 1; min-height: 50px; margin-top: 12px; box-shadow: 0 -8px 15px rgba(255,255,255,.9); }
.action-choice { min-height: 60px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.action-choice:hover { border-color: #8edbb6; background: #f6fffa; }
.toast { border-radius: 12px; background: var(--ink); }
.bottom-nav { border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(11,28,48,.12); }
.nav-button { color: var(--muted); }
.nav-button[aria-current=page] { background: #e6f7ee; color: var(--green); }
.nav-center, .floating-add { background: var(--stitch-accent); box-shadow: 0 8px 20px rgba(0,105,72,.24); }

/* Use vector geometry for the compact menu and add controls. */
#manageGroupButton svg { display: block; width: 18px; height: 18px; fill: currentColor; stroke: none; }
#navAdd { display: grid; place-items: center; align-self: center; justify-self: center; padding: 0; line-height: 1; }
#navAdd svg, #floatingAddButton svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
#floatingAddButton { display: grid; place-items: center; padding: 0; line-height: 1; }

/* Keep close glyphs optically and geometrically centered in every dialog. */
.icon-button[aria-label^="Close"], #dismissPushBanner { position: relative; display: grid; place-items: center; padding: 0; overflow: hidden; font-size: 0; line-height: 0; }
.icon-button[aria-label^="Close"]::before, .icon-button[aria-label^="Close"]::after, #dismissPushBanner::before, #dismissPushBanner::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
.icon-button[aria-label^="Close"]::before, #dismissPushBanner::before { transform: translate(-50%, -50%) rotate(45deg); }
.icon-button[aria-label^="Close"]::after, #dismissPushBanner::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 600px) {
  .app-shell { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .topbar { min-height: 58px; padding: 8px 0; }
  .screen { padding-top: 14px; }
  .detail-title-row { flex-direction: row; align-items: flex-start; gap: 10px; }
  .detail-name-row { align-items: flex-start; }
  .detail-title-row h1 { font-size: 27px; }
  .ledger-context { margin: 0 !important; }
  .detail-summary { grid-template-columns: 1fr; }
  .detail-balance { min-height: 58px; }
  .detail-total-card { margin-top: 15px; }
  .bill-editor-header { grid-template-columns: 72px 1fr 58px; }
  .bill-editor-header h1 { font-size: 17px; }
  .bill-fields { grid-template-columns: 1fr 1fr; }
  .bill-fields label:first-child, .bill-fields label:last-of-type { grid-column: 1 / -1; }
  .item-table-head, .item-table-row { grid-template-columns: minmax(0,1.05fr) minmax(68px,.7fr) minmax(82px,.8fr); }
  .charge-grid { grid-template-columns: 1fr; }
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { width: 100%; max-height: calc(var(--visual-height, 100dvh) - 12px); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  #expenseModal .modal::before, #paymentModal .modal::before, #itemModal .modal::before, #actionModal .modal::before { content: ""; justify-self: center; width: 42px; height: 5px; margin: -7px 0 5px; border-radius: 99px; background: #cbd5e1; }
  .modal > .primary-button:last-child { bottom: calc(-18px - env(safe-area-inset-bottom)); }
  .bottom-nav { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .ledger-row { grid-template-columns: 48px minmax(0,1fr) auto; gap: 5px; padding-inline: 7px; }
  .ledger-row b { font-size: 11px; }
  .group-tools { gap: 6px; }
  .group-tools button { padding-inline: 8px; }
}

/* Short opacity and transform motion keeps the existing dialog and alert layouts stable. */
:root {
  --ui-motion-duration: 200ms;
  --ui-motion-distance: 12px;
  --ui-dialog-motion-distance: 14px;
}
@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes modal-panel-enter {
  from { opacity: 0; transform: translateY(var(--ui-dialog-motion-distance)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-panel-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(var(--ui-dialog-motion-distance)); }
}
@keyframes transient-enter {
  from { opacity: 0; transform: translateY(var(--ui-motion-distance)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes transient-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(var(--ui-motion-distance)); }
}
@keyframes centered-transient-enter {
  from { opacity: 0; transform: translate(-50%, var(--ui-motion-distance)); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes centered-transient-exit {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, var(--ui-motion-distance)); }
}

.modal-backdrop:not([hidden]) {
  animation: modal-backdrop-enter var(--ui-motion-duration) cubic-bezier(.2,.75,.25,1) both;
}
.modal-backdrop:not([hidden]) > .modal {
  animation: modal-panel-enter var(--ui-motion-duration) cubic-bezier(.2,.75,.25,1) both;
}
.modal-backdrop.is-closing {
  pointer-events: auto;
  animation: modal-backdrop-exit var(--ui-motion-duration) ease-in both;
}
.modal-backdrop.is-closing > .modal {
  pointer-events: none;
  animation: modal-panel-exit var(--ui-motion-duration) ease-in both;
}
.toast.show { visibility: visible; }
.toast.is-entering, .push-banner.is-entering {
  animation: centered-transient-enter var(--ui-motion-duration) cubic-bezier(.2,.75,.25,1) both;
}
.toast.is-closing, .push-banner.is-closing {
  visibility: visible;
  pointer-events: none;
  animation: centered-transient-exit var(--ui-motion-duration) ease-in both;
}
.undo-button.is-entering {
  animation: transient-enter var(--ui-motion-duration) cubic-bezier(.2,.75,.25,1) both;
}
.undo-button.is-closing {
  pointer-events: none;
  animation: transient-exit var(--ui-motion-duration) ease-in both;
}
@media (max-width: 600px) {
  .modal-backdrop { --ui-dialog-motion-distance: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-motion-duration: 1ms;
    --ui-motion-distance: 0px;
    --ui-dialog-motion-distance: 0px;
  }
}

/* Settings appearance selector. Native radios preserve keyboard and screen-reader behavior. */
.appearance-settings { display: grid; gap: 8px; margin-bottom: 20px; }
.appearance-settings h3 { margin: 0; }
.appearance-settings p { margin: 0; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.appearance-option { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 46px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 700; }
.appearance-option input[type="radio"] { width: 18px; height: 18px; min-height: 18px; flex: none; margin: 0; padding: 0; accent-color: var(--stitch-accent); }
.appearance-option:has(input:checked) { border-color: var(--stitch-accent); background: var(--stitch-surface); }
.appearance-option:focus-within { outline: 3px solid var(--stitch-accent); outline-offset: 2px; }

/* Stitch dark-mode palette adapted to the existing app components and layouts. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e2e8f0;
  --muted: #a8b5c7;
  --line: #334155;
  --paper: #0f172a;
  --card: #1e293b;
  --green: #34d399;
  --mint: #153c31;
  --coral: #fca5a5;
  --shadow: 0 4px 18px rgba(0, 0, 0, .24);
  --stitch-sky: #7dd3fc;
  --stitch-surface: #17263b;
  --stitch-accent: #10b981;
  --stitch-radius: 16px;
  --surface-input: #111c2f;
  --surface-top: #26364a;
  --surface-positive: #153c31;
  --surface-negative: #39252b;
  --surface-warning: #3a321c;
  --text-positive: #6ee7b7;
}
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { border-color: var(--line); background: var(--surface-input); color: var(--ink); color-scheme: dark; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #94a3b8; opacity: 1; }
:root[data-theme="dark"] :focus-visible,
:root[data-theme="dark"] .payer-option input:focus-visible + .payer-card { outline-color: #fbbf24; }
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .share-button,
:root[data-theme="dark"] .nav-center,
:root[data-theme="dark"] .nav-add,
:root[data-theme="dark"] .floating-add { background: #047857; color: #fff; }
:root[data-theme="dark"] .ghost-button { border-color: var(--line); background: var(--card); color: #6ee7b7; }
:root[data-theme="dark"] .icon-button { border-color: var(--line); background: var(--stitch-surface); color: var(--ink); }
:root[data-theme="dark"] .primary-button:hover,
:root[data-theme="dark"] .share-button:hover,
:root[data-theme="dark"] .nav-center:hover,
:root[data-theme="dark"] .floating-add:hover { background: #059669; }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .summary-panel,
:root[data-theme="dark"] .profile-card,
:root[data-theme="dark"] .group-card-large,
:root[data-theme="dark"] .group-row,
:root[data-theme="dark"] .activity-row,
:root[data-theme="dark"] .analytics-controls,
:root[data-theme="dark"] .analytics-metric,
:root[data-theme="dark"] .detail-balance,
:root[data-theme="dark"] .ledger-row,
:root[data-theme="dark"] .bill-fields,
:root[data-theme="dark"] .item-card,
:root[data-theme="dark"] .item-table-row,
:root[data-theme="dark"] .charges-panel,
:root[data-theme="dark"] .bill-summary,
:root[data-theme="dark"] .summary-row,
:root[data-theme="dark"] .action-choice,
:root[data-theme="dark"] .payer-card,
:root[data-theme="dark"] .check-person,
:root[data-theme="dark"] .method-row,
:root[data-theme="dark"] .receiving-card,
:root[data-theme="dark"] .settings-links button,
:root[data-theme="dark"] .member-editor { border-color: var(--line); background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .balance-card { border-color: #74464c; background: var(--surface-negative); }
:root[data-theme="dark"] .detail-total-card,
:root[data-theme="dark"] .personal-balance,
:root[data-theme="dark"] .analytics-metric.share,
:root[data-theme="dark"] .draft-banner,
:root[data-theme="dark"] .account-panel,
:root[data-theme="dark"] .ledger-context,
:root[data-theme="dark"] .split-feedback,
:root[data-theme="dark"] .rounding-note { border-color: #28634f; background: var(--surface-positive); color: #bbf7d0; }
:root[data-theme="dark"] .personal-balance-label,
:root[data-theme="dark"] .grand-total strong { color: #6ee7b7; }
:root[data-theme="dark"] .group-tabs button[aria-pressed="true"] { border-color: #28634f; background: #173d32; color: #bbf7d0; }
:root[data-theme="dark"] .group-tabs { border-color: var(--line); background: var(--stitch-surface); }
:root[data-theme="dark"] .group-tabs button { color: var(--muted); }
:root[data-theme="dark"] .detail-title-row .icon-button,
:root[data-theme="dark"] .filter-pills button,
:root[data-theme="dark"] .view-switch button,
:root[data-theme="dark"] .group-card-icon,
:root[data-theme="dark"] .activity-row .activity-icon,
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .profile-avatar,
:root[data-theme="dark"] .shared-by-button,
:root[data-theme="dark"] .suggestion,
:root[data-theme="dark"] .payer-option input:checked + .payer-card,
:root[data-theme="dark"] .check-person:has(input:checked) { border-color: #28634f; background: #173d32; color: #a7f3d0; }
:root[data-theme="dark"] .filter-pills button[aria-pressed="true"],
:root[data-theme="dark"] .view-switch button[aria-pressed="true"] { border-color: #047857; background: #047857; color: #fff; }
:root[data-theme="dark"] .ledger-type { border-color: #74464c; background: #39252b; color: #fca5a5; }
:root[data-theme="dark"] .payment-card .ledger-type { border-color: #28634f; background: #153c31; color: #6ee7b7; }
:root[data-theme="dark"] .draft-pill,
:root[data-theme="dark"] .shared-by-button,
:root[data-theme="dark"] .item-table-actions button,
:root[data-theme="dark"] #scanReceiptButton,
:root[data-theme="dark"] .nav-button[aria-current="page"] { border-color: #28634f; background: #173d32; color: #a7f3d0; }
:root[data-theme="dark"] .date-heading,
:root[data-theme="dark"] .cloud-sync-status { border-color: var(--line); background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .modal { border-color: var(--line); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .46); }
:root[data-theme="dark"] .modal-header { border-color: var(--line); background: var(--card); }
:root[data-theme="dark"] .modal-backdrop { background: rgba(2, 6, 23, .72); }
:root[data-theme="dark"] .modal-note,
:root[data-theme="dark"] .receipt-scan-availability,
:root[data-theme="dark"] .receipt-scan-notice { border-color: #315873; background: #142b3b; color: #bae6fd; }
:root[data-theme="dark"] .receipt-scan-notice[data-kind="warning"],
:root[data-theme="dark"] .remote-change-notice,
:root[data-theme="dark"] .analytics-notice { border-color: #8b6b27; background: var(--surface-warning); color: #fde68a; }
:root[data-theme="dark"] .receipt-scan-notice[data-kind="error"],
:root[data-theme="dark"] .error { border-color: #85464b; background: var(--surface-negative); color: #fecaca; }
:root[data-theme="dark"] .charge,
:root[data-theme="dark"] .share-preview,
:root[data-theme="dark"] .person-chip { border-color: var(--line); background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .grand-total,
:root[data-theme="dark"] .share-total { border-color: #047857; background: #047857; color: #fff; }
:root[data-theme="dark"] .bill-footer,
:root[data-theme="dark"] .bottom-nav { border-color: var(--line); background: rgba(15, 23, 42, .96); box-shadow: 0 8px 28px rgba(0, 0, 0, .42); }
:root[data-theme="dark"] .nav-button { color: #a7f3d0; }
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .undo-button { background: #e2e8f0; color: #0f172a; }
:root[data-theme="dark"] .push-offer,
:root[data-theme="dark"] .push-banner { border-color: #475569; background: #26364a; color: var(--ink); }
:root[data-theme="dark"] .archived-badge { background: var(--surface-top); color: #cbd5e1; }
:root[data-theme="dark"] .home-empty { border-color: #28634f; background: rgba(30, 41, 59, .72); }
:root[data-theme="dark"] .floating-add { box-shadow: 0 8px 20px rgba(0, 0, 0, .42); }
:root[data-theme="dark"] .appearance-option:has(input:checked) { border-color: #10b981; background: #173d32; color: #bbf7d0; }
:root[data-theme="dark"] .google-button { border-color: #94a3b8; background: #f8fafc; color: #172033; }
:root[data-theme="dark"] .qr-expand,
:root[data-theme="dark"] .qr-viewer,
:root[data-theme="dark"] #qrViewport,
:root[data-theme="dark"] .payment-qr,
:root[data-theme="dark"] .receipt-photo-preview:not([hidden]) { background: #fff; }

@media (max-width: 380px) {
  .appearance-options { gap: 5px; }
  .appearance-option { gap: 4px; font-size: 11px; }
}