:root {
  color-scheme:light dark;
  --bg:light-dark(#f6f2ea,#0b0c0f);
  --bg-2:light-dark(#efe9de,#101217);
  --surface:light-dark(#fffdf8,#13151a);
  --raised:light-dark(#efe8dc,#1b1e24);
  --ink:light-dark(#1c1a16,#f4efe5);
  --sub:light-dark(#5f594e,#9b968c);
  --faint:light-dark(#6b6458,#8c867b);
  --line:light-dark(rgb(28 26 22 / .09),rgb(244 239 229 / .08));
  --line-accent:light-dark(rgb(122 93 44 / .32),rgb(214 185 135 / .28));
  --gold:light-dark(#7a5d2c,#d6b987);
  --fill-top:light-dark(#2a2620,#e2c898);
  --fill-bottom:light-dark(#14120f,#c3a06a);
  --on-fill:light-dark(#f6f2ea,#17130c);
  --pay:light-dark(#9a5719,#e5ae7c);
  --receive:light-dark(#2c6a47,#a6d1b4);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme=light] {
  color-scheme:light;
}
:root[data-theme=dark] {
  color-scheme:dark;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  color:var(--ink);
  background:radial-gradient(ellipse at 90% 10%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 55%),linear-gradient(var(--bg),var(--bg-2));
  font:14px/1.5 var(--sans);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a {
  color:var(--gold);
  text-underline-offset:3px;
}
a,button,summary,input,select,textarea {
  touch-action:manipulation;
}
button,input,select,textarea {
  font:inherit;
  color:var(--ink);
}
button,a,summary {
  -webkit-tap-highlight-color:transparent;
}
button,summary {
  cursor:pointer;
}
a,button,summary {
  min-height:44px;
}
button {
  border:1px solid var(--line-accent);
  border-radius:12px;
  background:var(--raised);
  padding:10px 16px;
}
button:hover,a:hover {
  filter:brightness(1.08);
}
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
h1,h2,h3,.trip-title {
  font-family:var(--serif);
  font-weight:500;
  line-height:1.15;
}
h1 {
  font-size:36px;
  margin:0 0 8px;
}
h2 {
  font-size:21px;
  margin:0 0 8px;
}
h3 {
  font-size:19px;
  margin:0 0 8px;
}
p {
  margin:8px 0;
  color:var(--sub);
}
strong {
  font-weight:500;
}
small {
  font-size:12px;
  color:var(--sub);
}
input,select,textarea {
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:44px;
  background:var(--bg-2);
  border:1px solid var(--line-accent);
  border-radius:12px;
  padding:10px 12px;
}
select {
  border-radius:999px;
  text-overflow:ellipsis;
}
input[type=file] {
  overflow:hidden;
}
input[type=checkbox] {
  width:20px;
  min-height:20px;
  flex-shrink:0;
  accent-color:var(--gold);
}
textarea {
  min-height:100px;
  resize:vertical;
}
label {
  display:block;
  min-width:0;
  color:var(--sub);
  font-size:12px;
  margin-bottom:16px;
}
label input,label select,label textarea {
  display:block;
  margin-top:6px;
}
fieldset {
  min-width:0;
  border:1px solid var(--line-accent);
  border-radius:14px;
  padding:12px;
}
fieldset.plain-fields {
  border:0;
  margin:0;
  padding:0;
}
legend {
  color:var(--sub);
}
summary {
  padding:10px 0;
}
summary::-webkit-details-marker {
  display:none;
}
a,span,p,strong,small,dt,dd,h1,h2,h3,summary {
  overflow-wrap:anywhere;
}
form {
  min-width:0;
}
dialog::backdrop {
  background:rgb(0 0 0 / .65);
  backdrop-filter:blur(5px);
}
.app {
  max-width:1500px;
  margin:auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
}
.sidebar {
  position:sticky;
  top:0;
  height:100dvh;
  border-right:1px solid var(--line);
  padding:28px 20px;
}
.brand {
  font:24px var(--serif);
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.brand i {
  color:var(--gold);
}
.sidebar nav {
  margin-top:48px;
  display:grid;
  gap:8px;
}
.sidebar nav a {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  color:var(--sub);
  text-decoration:none;
}
.sidebar nav a[aria-current] {
  color:var(--gold);
  background:var(--raised);
}
.nav-count {
  font:11px var(--sans);
  color:inherit;
}
.main-shell {
  min-width:0;
}
.topbar {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:16px 28px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3;
}
.header-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  width:100%;
}
.header-link,.header-menu>summary {
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--sub);
  font-size:12px;
  list-style:none;
}
.header-menu {
  position:relative;
}
.header-menu[open]>summary {
  color:var(--gold);
  border-color:var(--line-accent);
}
.menu-content {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:4;
  width:280px;
  max-width:calc(100vw - 32px);
  padding:16px;
  background:var(--surface);
  border:1px solid var(--line-accent);
  border-radius:18px;
  box-shadow:0 20px 50px rgb(0 0 0 / .25);
}
.menu-content a {
  display:flex;
  align-items:center;
}
.menu-content p {
  font-size:12px;
}
.menu-content details+details {
  border-top:1px solid var(--line);
}
.theme-form button {
  width:100%;
}
.mobile-brand,.mobile-nav {
  display:none;
}
main {
  max-width:1050px;
  margin:auto;
  padding:28px;
}
.trip-heading {
  margin:0 0 28px;
}
.eyebrow {
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:8px;
}
.trip-title {
  font-size:38px;
  color:var(--ink);
  margin:0 0 8px;
  overflow-wrap:anywhere;
}
.trip-meta {
  font-size:12px;
}
.date-pill {
  display:inline-block;
  border:1px solid var(--line-accent);
  border-radius:999px;
  color:var(--gold);
  padding:6px 12px;
  font-size:12px;
}
.page-heading {
  margin-bottom:20px;
}
.page-heading p {
  font-size:12.5px;
}
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  min-width:0;
  margin:28px 0;
}
.panel-heading {
  margin-bottom:8px;
}
.panel-heading p,.blank-note,.balance-footer,.settle-household {
  font-size:12px;
  color:var(--sub);
}
.primary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 20px;
  border:0;
  border-radius:14px;
  background:linear-gradient(var(--fill-top),var(--fill-bottom));
  color:var(--on-fill);
  font-weight:600;
  text-decoration:none;
  box-shadow:0 10px 24px -14px var(--gold);
  margin:16px 0;
}
.primary:disabled {
  opacity:0.45;
  cursor:not-allowed;
  box-shadow:none;
}
.primary svg {
  width:18px;
}
.section-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
  margin:20px 0;
}
.section-toolbar label {
  margin:0;
  flex:1;
  min-width:140px;
}
.toolbar-note {
  font-size:12px;
  flex-basis:100%;
  margin:0;
}
.hero {
  background:linear-gradient(150deg,var(--surface),var(--raised));
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  margin:28px 0;
}
.hero span {
  color:var(--sub);
  font-size:12px;
}
.hero strong {
  display:block;
  font:26px var(--serif);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  overflow-wrap:normal;
  margin:8px 0;
}
.total-stat>strong {
  font-size:52px;
}
.hero p {
  font-size:12px;
}
.hero-secondary {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  margin-top:20px;
  border-top:1px solid var(--line);
}
.hero-secondary a {
  display:inline-flex;
  align-items:center;
}
.hero-average {
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.hero-average strong {
  font-size:20px;
}
.hero-average p {
  margin:0;
}
.quick-links,.secondary-nav {
  display:flex;
  gap:8px 16px;
  flex-wrap:wrap;
}
.quick-links a,.secondary-nav a,.panel-heading>a {
  display:inline-flex;
  align-items:center;
}
.secondary-nav {
  margin-top:20px;
}
.balance-row+.balance-row,.share-person+.share-person {
  border-top:1px solid var(--line);
}
.balance-row>summary,.share-person>summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 16px;
  gap:12px;
  align-items:center;
  list-style:none;
  padding:16px 0;
}
.lead {
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
}
.person-info {
  min-width:0;
}
.person-info strong,.person-info small {
  display:block;
}
.avatar {
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--raised);
  border:1px solid var(--line-accent);
  font:14px var(--serif);
  color:var(--gold);
}
.balance-number {
  text-align:right;
  min-width:0;
}
.balance-number strong {
  display:block;
  font:22px var(--serif);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  overflow-wrap:normal;
}
.balance-number small {
  display:block;
}
.to-pay small::before {
  content:"↑ ";
}
.to-receive small::before {
  content:"↓ ";
}
.to-pay strong {
  color:var(--pay);
}
.to-receive strong {
  color:var(--receive);
}
.chevron {
  width:16px;
  height:16px;
  transition:transform .2s;
}
.balance-row[open] .chevron,.share-person[open] .chevron {
  transform:rotate(180deg);
}
.share-number {
  text-align:right;
  min-width:0;
}
.share-number small {
  display:block;
}
.share-owed {
  display:block;
  font:22px var(--serif);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  overflow-wrap:normal;
}
.balance-breakdown {
  margin:0 0 16px 48px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:12px;
}
.balance-breakdown>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  margin-bottom:8px;
}
.balance-breakdown dd {
  margin:0;
  white-space:nowrap;
  overflow-wrap:normal;
  font-variant-numeric:lining-nums tabular-nums;
}
.balance-footer {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.settle-group+.settle-group {
  border-top:1px solid var(--line);
  margin-top:16px;
  padding-top:16px;
}
.settle-from {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.settle-from>span:last-child {
  font:22px var(--serif);
  white-space:nowrap;
  overflow-wrap:normal;
}
.transfer {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  align-items:center;
  padding:14px 0;
}
.transfer strong,.expense-line>strong,.share-row strong,.payment-row>strong,.share-expense>strong {
  white-space:nowrap;
  overflow-wrap:normal;
  font-variant-numeric:lining-nums tabular-nums;
}
.record-transfer {
  grid-column:1/-1;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:1px solid var(--line-accent);
  border-radius:999px;
  padding:8px 14px;
  text-decoration:none;
}
.expense-line,.share-row,.payment-row,.share-expense,.household-share {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
}
.payment-row>span {
  min-width:0;
  overflow-wrap:anywhere;
}
.expense-line+.expense-line,.share-row+.share-row,.payment-row+.payment-row,.share-expense+.share-expense,.household-share+.household-share {
  border-top:1px solid var(--line);
}
.payment-footnote {
  font-size:12px;
  color:var(--sub);
}
.payment-summary {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:var(--sub);
}
.payment-summary strong {
  color:var(--ink);
  white-space:nowrap;
}
.payment-suggestion p {
  margin:8px 0;
}
.expense-line small,.receipt-row small,.payment-row small,.leg-spend small,.share-expense small,.household-share small {
  display:block;
}
.shares-total {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.shares-total>strong {
  font:32px var(--serif);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  overflow-wrap:normal;
}
.share-scope {
  display:block;
  font-size:12px;
  color:var(--sub);
}
.share-breakdown {
  margin:0 0 16px 48px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.share-breakdown-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.shares-explanation,.shares-rounding,.shares-context {
  color:var(--sub);
}
.shares-reconciled strong {
  font-variant-numeric:lining-nums tabular-nums;
}
.expense-line a {
  display:inline-flex;
  align-items:center;
  max-width:100%;
}
.expense-main {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:12px;
  align-items:start;
  min-width:0;
}
.expense-main strong,.card-title h3,.person-card h3,.itinerary-art span {
  overflow-wrap:anywhere;
  min-width:0;
}
.receipt-mark {
  display:inline-flex;
  align-items:center;
}
.receipt-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:4px 0 12px;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.search-form {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
  margin:8px 0 16px;
}
.search-label {
  flex:1 1 12rem;
  margin:0;
}
.legs-grid,.people-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));
  gap:16px;
}
.itinerary-art {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  min-height:88px;
  margin-bottom:12px;
  padding:16px;
  border-radius:14px;
  background:var(--raised);
  color:var(--ink);
  font:32px var(--serif);
}
.itinerary-art [lang=ja] {
  font-family:var(--sans);
}
.card-title {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.leg-pill,.neutral-badge {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  font:11px var(--sans);
  letter-spacing:.08em;
  white-space:nowrap;
}
.itinerary-total {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.itinerary-total strong {
  white-space:nowrap;
  overflow-wrap:normal;
  font-variant-numeric:lining-nums tabular-nums;
}
.info-strip {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.info-strip strong {
  color:var(--ink);
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:8px 12px;
  border-radius:12px;
  color:var(--ink);
  text-decoration:none;
}
.receipt-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
  gap:16px;
}
.receipt-row {
  min-width:0;
  padding:0;
}
.receipt-row>.receipt-name {
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}
.receipt-preview {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:88px;
  margin-bottom:8px;
  padding:12px;
  border-radius:14px;
  background:var(--raised);
  color:var(--sub);
  text-align:center;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.receipt-preview img,img.receipt-viewer {
  width:100%;
  max-height:240px;
  object-fit:contain;
}
.itinerary-row {
  padding:14px 0;
}
.itinerary-row+.itinerary-row {
  border-top:1px solid var(--line);
}
.drop-zone {
  border:1px dashed var(--line-accent);
  border-radius:16px;
  padding:16px;
  margin:0 0 12px;
}
.drop-zone h3,
.drop-zone p {
  margin:0 0 12px;
}
.drop-zone h3 {
  font-size:1rem;
}
form[data-receipt-upload] label {
  display:flex;
  align-items:center;
  min-height:44px;
  min-width:0;
}
form[data-receipt-upload] input[type="file"] {
  min-width:0;
  max-width:100%;
}
.receipt-frame {
  width:100%;
  height:min(60dvh,480px);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--raised);
}
.trip-list {
  display:grid;
  gap:8px;
}
.trip-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:60px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.stack {
  max-width:500px;
}
.trip-banner {
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--sub);
  font-size:11.5px;
  margin:0 0 28px;
}
.mirror-banner::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:50%;
  background:var(--pay);
}
.instance-name {
  display:block;
  color:var(--ink);
}
.mirror-warning {
  margin:12px 0;
}
.error {
  color:var(--pay);
  padding:12px;
  border:1px solid var(--line-accent);
  border-radius:12px;
}
.modal .attempt {
  margin:16px 0;
  padding:14px 16px;
}
.modal .attempt h3 {
  margin:0 0 8px;
  font-size:15px;
}
.modal .attempt dl {
  display:grid;
  gap:8px;
  margin:0;
}
.modal .attempt div {
  display:grid;
  gap:2px;
}
.modal .attempt dt {
  color:var(--sub);
  font-size:12px;
}
.modal .attempt dd {
  margin:0;
}
.modal {
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-accent);
  border-radius:24px;
  padding:24px;
  width:min(600px,calc(100% - 48px));
  max-height:calc(100dvh - 48px);
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .55);
  overscroll-behavior:contain;
}
.modal-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:20px;
}
.modal-heading a {
  display:flex;
  align-items:center;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
}
.amount-input input {
  font:36px var(--serif);
  font-variant-numeric:lining-nums tabular-nums;
}
.applies-field {
  margin:8px 0 16px;
}
.applies-field label {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  margin:0;
}
.applies-field input {
  margin:0;
}
.chips {
  display:grid;
  gap:4px;
}
.form-actions {
  position:sticky;
  bottom:-24px;
  padding:8px 0;
  background:var(--surface);
  border-top:1px solid var(--line);
  margin-top:16px;
}
.form-actions .primary {
  width:100%;
  margin:0;
}
.danger-button {
  width:100%;
  color:var(--pay);
  margin:16px 0;
}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  z-index:10;
  background:var(--surface);
  border:1px solid var(--line-accent);
  border-radius:24px;
  padding:12px 20px;
  animation:enter .25s ease;
}
.toast::before {
  content:"●";
  color:var(--gold);
  margin-right:8px;
}
.skip-link {
  position:fixed;
  top:-100px;
  z-index:20;
  background:var(--surface);
  padding:12px;
}
.skip-link:focus {
  top:8px;
}
footer {
  color:var(--faint);
  font-size:12px;
  padding:28px 0;
  margin-top:28px;
  border-top:1px solid var(--line);
}
.auth-page {
  display:grid;
  place-items:center;
  min-height:80dvh;
  padding:28px 20px;
}
.auth-card {
  width:100%;
  max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
}
.auth-card button {
  width:100%;
}
.signin-methods {
  list-style:none;
  padding:0;
  margin:20px 0;
  display:grid;
  gap:12px;
}
.signin-method {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line-accent);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
}
.signin-google {
  background:#fff;
  color:#1f1f1f;
  border-color:#747775;
}
.google-mark {
  stroke:none;
}
.auth-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:var(--sub);
}
.auth-divider::before,.auth-divider::after {
  content:"";
  flex:1;
  border-top:1px solid var(--line);
}
.auth-page .mirror-banner {
  margin-top:20px;
}
@keyframes enter {
  from {
    opacity:0;
    translate:0 4px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}
@media(max-width:760px) {
  .app {
    display:block;
  }
  .sidebar {
    display:none;
  }
  .topbar {
    display:block;
    padding:calc(16px + env(safe-area-inset-top)) 16px 16px;
  }
  .mobile-brand {
    display:inline-flex;
    margin-bottom:12px;
  }
  .header-controls {
    gap:6px;
  }
  .header-link,.header-menu>summary {
    font-size:11.5px;
    padding:10px;
  }
  .header-menu {
    position:static;
  }
  .menu-content {
    left:16px;
    right:16px;
    top:100%;
    width:auto;
    max-width:none;
  }
  main {
    padding:20px 16px calc(108px + env(safe-area-inset-bottom));
  }
  .mobile-nav {
    position:fixed;
    z-index:5;
    bottom:0;
    left:0;
    right:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    background:color-mix(in srgb,var(--bg-2) 90%,transparent);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    min-height:56px;
    font-size:10px;
    white-space:nowrap;
    text-decoration:none;
    color:var(--faint);
  }
  .mobile-nav a[aria-current] {
    color:var(--gold);
  }
  .mobile-nav a[aria-current]::before {
    content:"";
    position:absolute;
    top:-4px;
    width:24px;
    height:2px;
    border-radius:2px;
    background:var(--gold);
  }
  .nav-count {
    position:absolute;
    top:2px;
    right:2px;
    font-size:9px;
    line-height:1;
    background:var(--raised);
    border-radius:6px;
    padding:2px 3px;
  }
  .total-stat>strong {
    font-size:clamp(30px,10.7vw,52px);
  }
  .trip-title {
    font-size:36px;
  }
  .panel {
    padding:16px;
  }
  .balance-row>summary,.share-person>summary {
    gap:8px;
  }
  .balance-number strong {
    font-size:20px;
  }
  .balance-breakdown {
    margin-left:0;
  }
  .settle-from {
    grid-template-columns:36px minmax(0,1fr);
  }
  .settle-from>span:last-child {
    grid-column:2;
  }
  .modal {
    position:fixed;
    inset:0;
    margin:0;
    width:100%;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    border-radius:20px 20px 0 0;
    padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y:auto;
    scroll-padding-bottom:100px;
  }
  .modal::before {
    content:"";
    display:block;
    width:36px;
    height:4px;
    background:var(--line-accent);
    border-radius:4px;
    margin:0 auto 16px;
  }
  body:has(dialog[open]) {
    overflow:hidden;
  }
  body:has(dialog[open]) .mobile-nav {
    visibility:hidden;
  }
  .form-actions {
    bottom:calc(-20px - env(safe-area-inset-bottom));
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .form-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .toast {
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .large-figure>strong {
    font-size:clamp(22px,6.8vw,52px);
  }
  .person-info small {
    font-size:11.5px;
  }
  .lead {
    gap:8px;
  }
  .avatar {
    width:32px;
    height:32px;
  }
}
.spend-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
}
.spend-grid>.panel {
  min-width:0;
}
.place-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 16px;
}
.place-chip {
  display:flex;
  gap:8px;
  align-items:baseline;
  max-width:100%;
  margin:0;
  padding:8px 12px;
  border-radius:999px;
  background:var(--raised);
}
.place-chip span,.leg-spend strong,.category-row span {
  overflow-wrap:anywhere;
  min-width:0;
}
.leg-spend {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin:12px 0;
}
.leg-spend>div {
  min-width:0;
}
.leg-spend>strong,.category-row>strong {
  white-space:nowrap;
  overflow-wrap:normal;
}
.leg-index {
  color:var(--sub);
  font-variant-numeric:lining-nums tabular-nums;
}
.bar-track {
  display:block;
  height:6px;
  margin-top:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--raised);
}
.bar-track>span {
  display:block;
  height:6px;
  border-radius:999px;
  background:var(--gold);
  max-width:100%;
}
.category-row {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 12px;
  align-items:center;
  margin:12px 0;
}
.onboarding-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.onboarding-actions a {
  display:inline-flex;
  align-items:center;
}
@media(min-width:761px) {
  .spend-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
  }
  .category-row {
    grid-template-columns:minmax(0,8rem) auto minmax(0,1fr) auto;
  }
}
@media(max-width:350px) {
  .balance-row>summary,.share-person>summary {
    grid-template-columns:minmax(0,1fr) 16px;
  }
  .balance-row .lead,.share-person .lead {
    grid-column:1/-1;
  }
  .share-number {
    text-align:left;
    margin-left:40px;
  }
  .balance-number {
    text-align:left;
    margin-left:40px;
  }
  .balance-number strong {
    font-size:18px;
  }
  .settle-from>span:last-child {
    grid-column:1/-1;
    text-align:right;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
.export-options {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.export-options a,
.export-options label,
.export-options button {
  display:grid;
  min-height:44px;
  min-width:0;
  justify-items:start;
  text-align:start;
  overflow-wrap:anywhere;
}
.export-options span {
  color:var(--sub);
}
.view-only {
  margin:0 0 16px;
  padding:12px 16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.share-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.share-row,
.share-row form {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.invite-link,
.invite-email,
.account-email {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
.share-expense-wrap+.share-expense-wrap {
  border-top:1px solid var(--line);
}
.split-math summary {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  cursor:pointer;
}
.split-math p {
  margin:0 0 12px;
  color:var(--sub);
}
.expense-preview {
  margin:8px 0 16px;
}
.expense-preview[hidden] {
  display:none;
}
.expense-preview p {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin:0;
  padding:8px 0;
}