.sb-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10030;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  color: var(--sb-ink);
  font-family: "DM Sans", sans-serif;
}
.sb-workspace {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  background: var(--sb-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.sb-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: var(--sb-bg);
  border-bottom: 1px solid var(--sb-line);
}
.sb-header > div {
  flex: 1;
  min-width: 0;
}
.sb-header h1 {
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.15;
  margin: 5px 0 0;
}
.sb-header > button {
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  font-size: 25px;
}
.sb-kicker {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--sb-muted);
}
.sb-body {
  padding: 24px 22px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sb-body h2 {
  font-family: Fraunces, serif;
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 14px;
}
.sb-body p {
  margin: 0;
}
.sb-intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--sb-muted);
}
.sb-overlay button,
.sb-overlay a,
.sb-overlay input,
.sb-overlay select,
.sb-overlay textarea {
  font: inherit;
  box-sizing: border-box;
}
.sb-overlay button,
.sb-overlay a {
  touch-action: manipulation;
}
.sb-overlay button {
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  min-height: 44px;
  background: var(--sb-paper);
  color: var(--sb-ink);
  padding: 10px 15px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.sb-overlay button:disabled {
  opacity: 0.45;
  cursor: default;
}
.sb-overlay button:focus-visible,
.sb-overlay a:focus-visible,
.sb-overlay input:focus-visible,
.sb-overlay select:focus-visible,
.sb-overlay textarea:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 3px;
}
.sb-overlay .sb-primary {
  background: var(--sb-accent);
  color: #1d132b;
  border-color: transparent;
  font-weight: 700;
}
.sb-overlay a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--sb-ink);
  font-size: 13px;
}
.sb-overlay label {
  font-size: 13px;
  color: var(--sb-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sb-overlay input,
.sb-overlay select,
.sb-overlay textarea {
  min-height: 46px;
  border: 1px solid var(--sb-line);
  border-radius: 10px;
  background: var(--sb-paper);
  color: var(--sb-ink);
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
  font-size: 15px;
}
.sb-overlay input[type="checkbox"] {
  width: 21px;
  height: 21px;
  min-height: 21px;
  flex-shrink: 0;
  accent-color: #ab83e3;
}
.sb-overlay input:disabled,
.sb-overlay select:disabled {
  opacity: 0.65;
}
.sb-overlay input[type="date"] {
  min-width: 0;
  max-width: 100%;
}
.sb-overlay textarea {
  line-height: 1.7;
  resize: vertical;
}
.sb-start-grid,
.sb-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sb-start-grid > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 18px;
  text-align: left;
  min-height: 155px;
}
.sb-start-grid > button > span {
  font-size: 32px;
}
.sb-start-grid > button > strong {
  font-family: Fraunces, serif;
  font-size: 23px;
  font-weight: 500;
}
.sb-start-grid > button > small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.sb-start-grid .sb-scan-card {
  background: #fae7af;
  color: #302117;
  border: 0;
}
.sb-start-grid .sb-manual-card {
  background: #d6c3f1;
  color: #271834;
  border: 0;
}
.sb-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sb-section-heading h2 {
  margin: 0;
}
.sb-section-heading button {
  font-size: 12px;
  padding: 7px 11px;
  flex-shrink: 0;
}
.sb-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-history button {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
}
.sb-history strong {
  display: block;
  font-size: 16px;
}
.sb-history small {
  display: block;
  font-size: 12px;
  color: var(--sb-muted);
  font-weight: 400;
  margin-top: 7px;
}
.sb-hint,
.sb-empty {
  font-size: 12px;
  line-height: 1.7;
  color: var(--sb-muted);
}
.sb-body .sb-hint {
  margin-top: 12px;
}
.sb-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--sb-line);
  border-radius: 14px;
}
.sb-avatar {
  background: rgba(177, 143, 231, 0.2);
  color: var(--sb-ink);
  border-radius: 50%;
  height: 36px;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}
.sb-person > label {
  flex: 1;
  min-width: 0;
}
.sb-person > input {
  width: 35%;
  font-size: 12px;
}
.sb-person input {
  border: 0;
  background: transparent;
  padding: 4px;
  min-height: 32px;
}
.sb-person small {
  font-size: 10px;
}
.sb-person > button {
  min-height: 32px;
  padding: 2px 8px;
  border: 0;
  background: transparent;
  font-size: 22px;
}
.sb-add-person {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.sb-add-person input {
  flex: 1;
}
.sb-add-person button {
  flex-shrink: 0;
}
.sb-item {
  border: 1px solid var(--sb-line);
  background: var(--sb-paper);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.sb-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sb-item-head > input {
  border: 0;
  background: transparent;
  padding: 5px;
  font-weight: 600;
  flex: 1;
}
.sb-item-head > button {
  min-height: 32px;
  border: 0;
  font-size: 22px;
  padding: 2px 8px;
}
.sb-item-number {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  color: var(--sb-muted);
}
.sb-assignees {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sb-assignees button {
  border-radius: 24px;
  font-size: 12px;
  padding: 8px 14px;
  min-height: 38px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sb-assignees button[aria-pressed="true"] {
  background: #b691ee;
  color: #21142f;
  border-color: #b691ee;
}
.sb-money-input {
  display: flex;
  align-items: center;
  background: var(--sb-paper);
  border: 1px solid var(--sb-line);
  border-radius: 10px;
  min-width: 0;
}
.sb-money-input > span {
  padding-left: 12px;
  font-family: Fraunces, serif;
  font-size: 19px;
}
.sb-money-input input {
  background: transparent;
  border: 0;
  font-weight: 600;
}
.sb-weights {
  margin-top: 12px;
  font-size: 12px;
  color: var(--sb-muted);
}
.sb-weight-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sb-weight-grid label {
  width: 80px;
  font-size: 11px;
}
.sb-weight-grid input {
  font-size: 13px;
}
.sb-warning {
  display: block;
  color: #b56d28;
  font-size: 11px;
  margin-top: 12px;
}
.sb-wide {
  width: 100%;
}
.sb-card {
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  background: var(--sb-paper);
  padding: 20px;
}
.sb-card > label,
.sb-card > .sb-two {
  margin-top: 16px;
}
.sb-card > button {
  margin-top: 16px;
}
.sb-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--sb-line);
  margin-top: 18px;
  padding-top: 18px;
}
.sb-total strong {
  font:
    500 29px Fraunces,
    serif;
}
.sb-alert,
.sb-notice,
.sb-progress {
  font-size: 13px;
  line-height: 1.65;
  padding: 14px 16px;
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.sb-alert {
  background: rgba(220, 136, 74, 0.13);
  border: 1px solid rgba(220, 136, 74, 0.35);
}
.sb-alert button {
  display: block;
  margin-top: 10px;
}
.sb-notice {
  background: rgba(137, 173, 122, 0.15);
  border: 1px solid rgba(137, 173, 122, 0.3);
}
.sb-progress {
  background: rgba(177, 143, 231, 0.16);
}
.sb-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  position: sticky;
  bottom: -1px;
  background: var(--sb-bg);
  padding: 16px 0;
  border-top: 1px solid var(--sb-line);
}
.sb-footer > button {
  flex: 1;
}
.sb-scan-pick {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sb-scan-pick .sb-camera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 38px 18px;
  border: 2px dashed var(--sb-muted);
}
.sb-camera > span {
  font-size: 48px;
}
.sb-camera > strong {
  font-family: Fraunces, serif;
  font-size: 30px;
  font-weight: 500;
}
.sb-camera > small {
  font-size: 13px;
  font-weight: 400;
}
.sb-review-hero {
  text-align: center;
  padding: 24px 8px;
  background: radial-gradient(
    ellipse at top,
    rgba(177, 143, 231, 0.18),
    transparent 75%
  );
  border-radius: 20px;
}
.sb-review-hero h2 {
  font-size: 34px;
  margin: 12px 0;
}
.sb-review-hero > strong {
  display: block;
  font:
    500 40px Fraunces,
    serif;
  overflow-wrap: anywhere;
}
.sb-review-hero > span:last-child {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--sb-muted);
}
.sb-breakdown {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 4px;
}
.sb-breakdown > div,
.sb-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--sb-muted);
  line-height: 1.5;
}
.sb-person-total {
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  padding: 18px;
  background: var(--sb-paper);
}
.sb-person-total > header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-person-total > header > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sb-person-total > header strong {
  font-size: 16px;
}
.sb-person-total > header small {
  display: block;
  color: var(--sb-muted);
  font-size: 11px;
  margin-top: 4px;
}
.sb-person-total > header > b {
  font-family: Fraunces, serif;
  font-size: 23px;
  font-weight: 500;
  white-space: nowrap;
}
.sb-person-total details {
  font-size: 12px;
  color: var(--sb-muted);
  margin: 16px 0;
}
.sb-person-total summary,
.sb-weights summary {
  cursor: pointer;
  min-height: 32px;
}
.sb-person-total .sb-line {
  margin-top: 9px;
}
.sb-person-total > .sb-primary,
.sb-person-total > button {
  margin: 8px 8px 0 0;
  font-size: 12px;
}
.sb-share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sb-check {
  flex-direction: row !important;
  align-items: flex-start;
  line-height: 1.65;
}
.sb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.catatu-split-bill-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--ct-line, #6b6079);
  border-radius: 15px;
  padding: 17px 18px;
  background: rgba(177, 143, 231, 0.12);
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  font-family: "DM Sans", sans-serif;
  min-height: 76px;
}
.catatu-split-bill-entry > span:first-child {
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d6c3f1;
  color: #291c38;
  border-radius: 12px;
  font-size: 24px;
  flex-shrink: 0;
}
.catatu-split-bill-entry > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.catatu-split-bill-entry strong {
  font:
    500 23px Fraunces,
    serif;
}
.catatu-split-bill-entry small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 5px;
  line-height: 1.4;
}
.catatu-split-bill-entry:focus-visible {
  outline: 3px solid #b691ee;
  outline-offset: 3px;
}
@media (min-width: 768px) {
  .sb-overlay {
    padding: 24px;
  }
  .sb-workspace {
    border-radius: 22px;
  }
  .sb-body {
    padding: 28px 36px 32px;
  }
  .sb-header {
    padding: 22px 30px;
  }
}
@media (max-width: 360px) {
  .sb-header {
    padding: 16px 14px;
    gap: 8px;
  }
  .sb-header h1 {
    font-size: 24px;
  }
  .sb-body {
    padding: 20px 14px 28px;
  }
  .sb-start-grid {
    gap: 10px;
  }
  .sb-start-grid > button {
    padding: 18px 12px;
  }
  .sb-start-grid > button > strong {
    font-size: 21px;
  }
  .sb-card {
    padding: 16px;
  }
  .sb-person {
    flex-wrap: wrap;
  }
  .sb-person > input {
    width: 45%;
    margin-left: 45px;
  }
  .sb-person-total > header > b {
    font-size: 20px;
  }
  .sb-overlay .sb-two {
    gap: 10px;
  }
  .sb-overlay select {
    font-size: 13px;
  }
  .sb-footer > button {
    font-size: 12px;
    padding: 10px;
  }
}

.sb-body h2,
.sb-review-hero > strong,
.sb-total strong {
  overflow-wrap: anywhere;
  min-width: 0;
}
.sb-person-total > header {
  flex-wrap: wrap;
}
.sb-person-total > header > b {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  margin-left: auto;
}
.sb-total {
  gap: 12px;
}
.sb-total strong {
  text-align: right;
}
/* Receipt editor: one paper surface, with progressive detail controls. */
.sb-receipt-workspace .sb-body {
  gap: 16px;
  padding-top: 18px;
}
.sb-receipt-workspace .sb-header h1 {
  font-size: 30px;
}
.sb-header > button {
  min-width: 44px;
  min-height: 44px;
}
.sb-participant-intro {
  min-width: 0;
}
.sb-participant-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: thin;
}
.sb-overlay .sb-participant-tile {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 0 58px;
  min-width: 58px;
  max-width: 100px;
  padding: 0 2px;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
}
.sb-participant-tile > span:last-child {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
.sb-participant-tile .sb-avatar {
  width: 46px;
  height: 46px;
  color: #231b2c;
  font-size: 22px;
}
.sb-avatar-0 {
  background: #b797ed;
  color: #231b2c;
}
.sb-avatar-1 {
  background: #f6b6aa;
  color: #231b2c;
}
.sb-avatar-2 {
  background: #b3e4b7;
  color: #231b2c;
}
.sb-avatar-3 {
  background: #f5d974;
  color: #231b2c;
}
.sb-participant-add .sb-avatar {
  background: var(--sb-paper);
  color: var(--sb-muted);
  border: 1px solid var(--sb-line);
}
.sb-participant-intro > p {
  color: var(--sb-muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  padding-top: 4px;
}
.sb-people-editor {
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  background: var(--sb-paper);
}
.sb-people-editor > summary,
.sb-receipt-adjustments > summary,
.sb-payout > summary,
.sb-my-share > summary,
.sb-receipt-merchant > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
}
.sb-people-editor > summary::-webkit-details-marker,
.sb-receipt-adjustments > summary::-webkit-details-marker,
.sb-payout > summary::-webkit-details-marker,
.sb-my-share > summary::-webkit-details-marker,
.sb-receipt-merchant > summary::-webkit-details-marker {
  display: none;
}
.sb-people-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--sb-muted);
}
.sb-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}
.sb-people-editor > .sb-detail-body {
  padding: 8px 14px 16px;
}
.sb-people-editor .sb-section-heading {
  margin-bottom: 0;
}
.sb-people-editor .sb-section-heading h2 {
  font-size: 20px;
}
.sb-people-editor .sb-add-person {
  margin-top: 0;
}
.sb-person > input,
.sb-person input,
.sb-person > button,
.sb-weights summary,
.sb-person-total summary {
  min-height: 44px;
}
.sb-receipt {
  --sb-paper: #f8f0df;
  --sb-bg: #f8f0df;
  --sb-ink: #29241f;
  --sb-muted: #655f58;
  --sb-line: rgba(84, 70, 51, .25);
  position: relative;
  background-color: #f8f0df;
  background-image: url("/design-assets/split-bill/receipt-paper-texture.webp");
  background-size: 320px 320px;
  color: var(--sb-ink);
  padding: 18px 20px 24px;
  border-radius: 19px 19px 8px 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.sb-receipt::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 15px;
  background-image: url("/design-assets/split-bill/receipt-paper-edge.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sb-receipt-merchant > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px 17px;
}
.sb-receipt-mascot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-bottom: 2px;
}
.sb-receipt-merchant > summary > strong {
  font: 600 29px/1.12 Fraunces, serif;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sb-merchant-address {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 7px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.sb-merchant-date {
  color: var(--sb-muted);
  margin-top: 7px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sb-merchant-edit-label {
  font-size: 10px;
  color: #7652aa;
  margin-top: 8px;
}
.sb-edit-mark {
  color: #8960c1;
  font-size: 21px;
  line-height: 1;
  font-family: "DM Sans", sans-serif;
}
.sb-receipt-merchant > .sb-detail-body {
  border-top: 1px dashed var(--sb-line);
  padding-bottom: 18px;
}
.sb-receipt-merchant .sb-two {
  gap: 10px;
}
.sb-receipt textarea {
  line-height: 1.4;
}
.sb-receipt-items > .sb-section-heading {
  border-top: 1px dashed var(--sb-line);
  border-bottom: 1px dashed var(--sb-line);
  padding: 8px 0;
  gap: 8px;
  margin: 0;
}
.sb-receipt-items > .sb-section-heading h2 {
  font: 500 12px/1.4 "DM Sans", sans-serif;
}
.sb-receipt-items > .sb-section-heading button {
  padding: 6px 10px;
  font-size: 10px;
  background: transparent;
  max-width: 55%;
  white-space: normal;
}
.sb-receipt .sb-item {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.sb-overlay .sb-item-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  min-height: 66px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--sb-line);
  border-radius: 0;
  text-align: left;
  color: var(--sb-ink);
}
.sb-item-brief {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.sb-item-brief > strong {
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.sb-owner-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.sb-owner-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 15px;
  font-size: 10px;
  line-height: 1.25;
  background: rgba(61, 48, 33, .07);
  padding-right: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sb-owner-label .sb-avatar {
  width: 20px;
  height: 20px;
  font-size: 10px;
}
.sb-owner-unassigned {
  color: #8a4c21;
  font-size: 11px;
}
.sb-item-price {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  max-width: 45%;
  overflow-wrap: anywhere;
  line-height: 1.4;
  flex-shrink: 0;
}
.sb-item-summary > .sb-edit-mark {
  font-size: 19px;
  flex-shrink: 0;
}
.sb-receipt-items > .sb-wide {
  margin-top: 10px;
  border-style: dashed;
  background: transparent;
  font-size: 12px;
}
.sb-receipt-subtotal,
.sb-receipt-adjustments > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--sb-muted);
  font-size: 13px;
  line-height: 1.5;
}
.sb-receipt-subtotal {
  margin-top: 17px;
  border-top: 1px solid var(--sb-line);
  padding-top: 15px;
}
.sb-receipt-subtotal strong,
.sb-receipt-adjustments > summary > strong {
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.sb-receipt-adjustments > summary > span {
  flex: 1;
}
.sb-receipt-adjustments .sb-detail-body {
  padding: 8px 0 14px;
}
.sb-receipt-adjustments h2 {
  font-size: 21px;
  margin: 0;
}
.sb-receipt-adjustments .sb-hint {
  margin-top: 0;
}
.sb-receipt-total {
  margin-top: 0;
  padding-top: 14px;
  gap: 10px;
}
.sb-receipt-total > span {
  font: 600 20px/1.2 Fraunces, serif;
}
.sb-receipt-total > strong {
  font-size: 32px;
  line-height: 1.15;
}
.sb-my-share,
.sb-payout {
  padding: 0 16px;
  border-radius: 17px;
}
.sb-my-share > summary,
.sb-payout > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
}
.sb-my-share > summary > strong {
  font: 500 21px/1.3 Fraunces, serif;
  flex: 1;
}
.sb-my-share > summary > b {
  font: 500 24px/1.3 Fraunces, serif;
  text-align: right;
  max-width: 55%;
  overflow-wrap: anywhere;
}
.sb-my-share > summary > span {
  font-size: 23px;
  color: var(--sb-muted);
}
.sb-my-share > .sb-detail-body,
.sb-payout > .sb-detail-body {
  padding: 0 0 18px;
}
.sb-payout-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(177, 143, 231, .18);
  color: #af8bdf;
  font-size: 22px;
  flex-shrink: 0;
}
.sb-payout > summary > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sb-payout > summary strong {
  font-size: 14px;
  font-weight: 500;
}
.sb-payout > summary small {
  display: block;
  font-size: 11px;
  color: var(--sb-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.sb-summary-edit {
  color: #ab81df;
  font-size: 12px;
  max-width: 34%;
  overflow-wrap: anywhere;
}
.sb-receipt-workspace .sb-edit-footer {
  z-index: 4;
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
  gap: 10px;
  padding: 13px 0 max(13px, env(safe-area-inset-bottom));
}
.sb-edit-footer > .sb-primary {
  font: 600 18px/1.25 Fraunces, serif;
  min-height: 52px;
}
.sb-edit-footer > button:first-child {
  font-size: 12px;
  background: transparent;
}
.sb-allocation-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10040;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sb-allocation-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 92%;
  background: var(--sb-bg);
  border: 1px solid var(--sb-line);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  outline: none;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, .22);
}
.sb-allocation-sheet > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--sb-line);
  flex-shrink: 0;
}
.sb-allocation-sheet > header > div {
  flex: 1;
  min-width: 0;
}
.sb-allocation-sheet h2 {
  font: 500 26px/1.15 Fraunces, serif;
  margin: 6px 0 0;
}
.sb-allocation-sheet > header > button {
  font-size: 23px;
  min-width: 44px;
  padding: 5px;
}
.sb-allocation-content {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.sb-allocation-sheet .sb-item-head {
  margin: 0;
  align-items: flex-end;
}
.sb-allocation-sheet .sb-item-head > label {
  flex: 1;
}
.sb-allocation-sheet .sb-item-head > button {
  font-size: 12px;
  min-height: 44px;
  padding: 8px;
  background: transparent;
  color: var(--sb-muted);
}
.sb-allocation-hint,
.sb-allocation-status {
  font-size: 12px;
  color: var(--sb-muted);
  line-height: 1.6;
  margin: 0;
}
.sb-allocation-sheet .sb-assignees {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.sb-allocation-sheet .sb-assignees > button,
.sb-allocation-sheet .sb-counted-person > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 58px;
  text-align: left;
  background: var(--sb-paper);
  color: var(--sb-ink);
}
.sb-allocation-sheet .sb-assignees > button[aria-pressed="true"],
.sb-allocation-sheet .sb-counted-person > button[aria-pressed="true"] {
  border-color: #b691ee;
  background: rgba(177, 143, 231, .13);
}
.sb-allocation-sheet .sb-assignees .sb-avatar {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.sb-allocation-sheet .sb-assignees > button > span:nth-child(2),
.sb-allocation-sheet .sb-counted-person > button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sb-person-portion {
  font-size: 13px;
  text-align: right;
  max-width: 40%;
  overflow-wrap: anywhere;
}
.sb-selection-mark {
  color: #b691ee;
  font-size: 18px;
  flex-shrink: 0;
}
.sb-allocation-sheet .sb-warning {
  margin: 0;
}
.sb-allocation-sheet .sb-weights {
  margin-top: 0;
}
.sb-allocation-sheet > footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sb-line);
  flex-shrink: 0;
  background: var(--sb-bg);
}
.sb-allocation-sheet > footer > button:first-of-type {
  flex: .65;
}
.sb-allocation-sheet > footer > .sb-primary {
  flex: 1.35;
}
.sb-overlay summary:focus-visible {
  outline: 3px solid var(--sb-accent);
  outline-offset: 3px;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .sb-receipt-workspace .sb-body {
    padding-right: 40px;
    padding-left: 40px;
  }
  .sb-participant-strip {
    justify-content: center;
  }
  .sb-receipt {
    padding: 22px 32px 28px;
  }
  .sb-item-brief > strong,
  .sb-item-price {
    font-size: 17px;
  }
  .sb-receipt-merchant > summary > strong {
    font-size: 35px;
  }
  .sb-allocation-overlay {
    align-items: center;
    padding: 24px;
  }
  .sb-allocation-sheet {
    max-width: 520px;
    border-radius: 24px;
    max-height: 95%;
  }
}
@media (max-width: 360px) {
  .sb-receipt-workspace .sb-header h1 {
    font-size: 25px;
  }
  .sb-receipt-workspace .sb-body {
    padding: 14px 12px 26px;
    gap: 14px;
  }
  .sb-participant-strip {
    gap: 5px;
  }
  .sb-participant-tile .sb-avatar {
    width: 42px;
    height: 42px;
  }
  .sb-overlay .sb-participant-tile {
    min-width: 50px;
    flex-basis: 50px;
    font-size: 11px;
  }
  .sb-receipt {
    padding: 16px 14px 22px;
  }
  .sb-receipt-merchant > summary > strong {
    font-size: 26px;
  }
  .sb-item-brief > strong,
  .sb-item-price {
    font-size: 14px;
  }
  .sb-item-summary {
    gap: 6px;
  }
  .sb-receipt-total > strong {
    font-size: 28px;
  }
  .sb-my-share > summary > strong {
    font-size: 19px;
  }
  .sb-my-share > summary > b {
    font-size: 21px;
  }
  .sb-edit-footer > .sb-primary {
    font-size: 15px;
  }
  .sb-allocation-content {
    padding: 15px 14px 18px;
  }
  .sb-allocation-sheet > header,
  .sb-allocation-sheet > footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-receipt-mascot svg,
  .sb-receipt-mascot svg * {
    animation: none !important;
  }
}

.sb-review-address {
  font-size: 12px;
  color: var(--sb-muted);
  line-height: 1.5;
  margin: 0 auto 12px !important;
  max-width: 480px;
  overflow-wrap: anywhere;
}
/* Keep the receipt's merchant identity prominent without spending a full screen on it. */
.sb-receipt-workspace .sb-header {
  padding-top: 12px;
  padding-bottom: 12px;
}
.sb-receipt-workspace .sb-body {
  padding-top: 14px;
}
.sb-receipt-mascot {
  min-height: 48px;
  margin-bottom: 0;
}
.sb-receipt-mascot > svg {
  width: 48px;
  height: 48px;
}
.sb-receipt-merchant > summary {
  padding-bottom: 13px;
}
.sb-merchant-edit-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.sb-overlay .sb-item-summary {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 56px;
}
.sb-item-brief {
  gap: 4px;
}
.sb-owner-label .sb-avatar {
  width: 18px;
  height: 18px;
}

.sb-people-editor:not([open]) {
  display: none;
}

/* Final mobile density keeps the six-line reference receipt useful on first open. */
.sb-receipt-tools {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.sb-overlay .sb-receipt-tools > button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  padding: 6px 8px;
  border-style: dashed;
  background: transparent;
}
@media (max-width: 767px) {
  .sb-receipt-workspace .sb-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sb-receipt-workspace .sb-header .sb-kicker {
    display: block;
    font-size: 9px;
    line-height: 1;
  }
  .sb-receipt-workspace .sb-body {
    padding-top: 10px;
    gap: 12px;
  }
  .sb-participant-strip {
    padding-top: 0;
    padding-bottom: 4px;
  }
  .sb-overlay .sb-participant-tile {
    gap: 5px;
    font-size: 12px;
    line-height: 1.3;
  }
  .sb-participant-tile .sb-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .sb-participant-intro > p {
    font-size: 11px;
    line-height: 1.4;
    padding-top: 0;
  }
  .sb-receipt {
    padding-top: 10px;
    padding-bottom: 18px;
  }
  .sb-receipt-mascot {
    min-height: 36px;
  }
  .sb-receipt-mascot > svg {
    width: 36px;
    height: 36px;
  }
  .sb-receipt-merchant > summary {
    padding-bottom: 8px;
  }
  .sb-receipt-merchant > summary > strong {
    font-size: 27px;
    line-height: 1.1;
  }
  .sb-merchant-address {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
  }
  .sb-merchant-date {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
  }
  .sb-receipt-items {
    border-top: 1px dashed var(--sb-line);
  }
  .sb-overlay .sb-item-summary {
    min-height: 48px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .sb-item-brief {
    gap: 2px;
  }
  .sb-item-brief > strong {
    font-size: 14px;
    line-height: 1.3;
  }
  .sb-receipt-subtotal {
    margin-top: 10px;
    padding-top: 10px;
  }
  .sb-receipt-total {
    padding-top: 10px;
  }
  .sb-receipt-total > strong {
    font-size: 28px;
  }
}

.sb-owner-all .sb-avatar {
  background: rgba(89, 81, 101, .18);
  color: #514955;
  font-size: 15px;
}
@media (max-width: 767px) {
  .sb-receipt-workspace .sb-body {
    gap: 10px;
  }
  .sb-receipt-merchant > summary {
    padding-bottom: 6px;
  }
  .sb-receipt-tools {
    margin-top: 2px;
  }
  .sb-receipt-subtotal {
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* Theme ink keeps selection and keyboard focus above 3:1 in both themes. */
.sb-allocation-sheet .sb-selection-mark {
  color: var(--sb-ink);
}
.sb-overlay .sb-allocation-sheet button:focus-visible,
.sb-overlay .sb-allocation-sheet input:focus-visible,
.sb-overlay .sb-allocation-sheet summary:focus-visible {
  outline-color: var(--sb-ink);
}

/* Compact participant editor; fees reuse this bill's existing people. */
.sb-people-editor > .sb-detail-body { gap: 12px; }
.sb-people-editor .sb-section-heading { order: 0; }
.sb-people-editor .sb-section-heading h2 { font-size: 17px; margin: 0; }
.sb-people-editor .sb-add-person { order: 1; gap: 8px; }
.sb-people-editor .sb-people { order: 2; gap: 0; }
.sb-people-editor .sb-detail-body > .sb-hint { order: 3; margin: 0; font-size: 11px; }
.sb-people-editor .sb-person {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(82px, .85fr) 44px;
  gap: 7px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--sb-line); border-radius: 0;
}
.sb-people-editor .sb-person .sb-avatar { width: 30px; height: 30px; font-size: 13px; }
.sb-people-editor .sb-person > label { grid-column: 2; min-width: 0; }
.sb-people-editor .sb-person > label:last-child { grid-column: 2 / 4; }
.sb-people-editor .sb-person > input { grid-column: 3; width: 100%; min-width: 0; margin-left: 0; font-size: 12px; }
.sb-people-editor .sb-person input { min-height: 44px; padding: 4px; border-radius: 6px; }
.sb-people-editor .sb-person input:focus { outline: 2px solid var(--sb-accent); outline-offset: 0; }
.sb-people-editor .sb-person > button { grid-column: 4; min-width: 44px; min-height: 44px; padding: 0; }
.sb-people-editor .sb-section-heading { flex-wrap: wrap; }
.sb-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-contact-actions > button { min-width: 0; font-size: 12px; }
.sb-contact-help { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; color: var(--sb-muted); font-size: 12px; line-height: 1.6; }
.sb-contact-help summary { cursor: pointer; min-height: 32px; padding: 6px 0; color: var(--sb-ink); }
.sb-contact-help details > p { padding: 6px 0; }
.sb-contact-copy { margin: 0; color: var(--sb-muted); font-size: 13px; line-height: 1.6; }
.sb-contact-candidates { display: flex; flex-direction: column; gap: 8px; }
.sb-overlay .sb-contact-candidate { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--sb-line); border-radius: 12px; background: var(--sb-paper); cursor: pointer; text-align: left; }
.sb-contact-candidate > input { flex-shrink: 0; }
.sb-contact-candidate > span { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.sb-contact-candidate strong { font-size: 14px; font-weight: 600; }
.sb-contact-candidate small { color: var(--sb-muted); font-size: 12px; }
.sb-people-editor .sb-sender { order: 4; font-size: 12px; line-height: 1.5; color: var(--sb-muted); }
.sb-sender > summary { min-height: 44px; cursor: pointer; padding: 10px 0; overflow-wrap: anywhere; }
.sb-sender label { margin-top: 8px; }
.sb-receipt-fee-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sb-receipt-adjustments > summary { gap: 12px; }
.sb-receipt-adjustments > summary > .sb-fee-edit { flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; font-size: 12px; }
.sb-receipt-fee-lines > div { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; color: #716852; font-size: 14px; }
.sb-receipt-fee-lines > div > span { min-width: 0; overflow-wrap: anywhere; }
.sb-receipt-fee-lines strong { white-space: nowrap; flex-shrink: 0; font-weight: 500; }
.sb-fee-people { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-fee-people > span { max-width: 100%; border: 1px solid currentColor; border-radius: 16px; padding: 4px 9px; font-size: 12px; overflow-wrap: anywhere; }
.sb-scan-start { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 20px; text-align: center; }
.sb-scan-spinner { width: 28px; height: 28px; border: 3px solid var(--sb-line); border-top-color: var(--sb-accent); border-radius: 50%; animation: catatu-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sb-scan-spinner, .receipt-scan-progress [style*="animation"] { animation: none !important; }
}

.sb-group-share { overflow-wrap: anywhere; }
.sb-group-share > input { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 12px; }
.sb-group-share > .sb-primary { margin-top: 14px; }

/* Counted receipt portions keep their line total separate from relative sharing. */
.sb-item-quantity { display: block; font-size: 11px; line-height: 1.5; color: var(--sb-muted); overflow-wrap: anywhere; }
.sb-allocation-sheet .sb-split-mode select { width: 100%; min-height: 44px; color: var(--sb-ink); background: var(--sb-paper); border: 1px solid var(--sb-line); border-radius: 10px; padding: 10px; font: inherit; }
.sb-quantity-formula { margin: 0; font-size: 13px; line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
.sb-quantity-incomplete { color: var(--sb-ink); font-weight: 600; }
.sb-counted-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 1px solid var(--sb-line); border-radius: 12px; padding: 8px; }
.sb-counted-person > button { width: 100%; min-width: 0; }
.sb-counted-person > label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.sb-counted-person > label > input { width: 76px; min-width: 0; flex-shrink: 0; }
.sb-allocation-sheet > footer { flex-wrap: wrap; }
.sb-footer-quantity-status { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--sb-ink); overflow-wrap: anywhere; }
.sb-allocation-sheet select:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 2px; }