/* Constrain the content itself rather than masking overflow on the body. */
.home-empty-state { display: grid; align-items: center; min-height: max(440px,calc(100svh - 260px)); padding: 12px 0 40px; }
.home-empty-state .empty-inline { flex-direction: column; justify-content: center; width: 100%; max-width: 580px; margin-inline: auto; padding: 20px 12px; gap: 12px; text-align: center; border: 0; background: transparent; overflow: visible; }
html[data-theme="dark"] .home-empty-state .empty-inline { background: transparent; }
.home-empty-state .empty-inline .mascot { box-sizing: border-box; width: clamp(180px,25vh,240px); height: auto; padding: 20px; margin: 0; }
.home-empty-state .empty-inline > div { width: 100%; }
.home-empty-state .empty-inline h2 { max-width: 460px; margin: 0 auto 14px; font-size: clamp(23px,5vw,30px); line-height: 1.4; }
.home-empty-state .empty-inline p { max-width: 410px; margin: 0 auto 28px; font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.home-empty-state .empty-group-action { display: flex; justify-content: center; }
.home-empty-state .empty-group-action .button { min-height: 54px; max-width: 100%; padding: 14px 22px; border-radius: 18px; line-height: 1.5; white-space: normal; box-shadow: var(--shadow); }
.group-form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; }
.group-form-actions .button { width: 100%; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 12px; }
.group-icon-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; border: 0; padding: 12px 0; }
.group-icon-picker label { position: relative; }
.group-icon-picker input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.group-icon-picker span { display: grid; place-items: center; min-height: 48px; font-size: 25px; border: 2px solid var(--border); border-radius: 14px; }
.group-icon-picker input:checked + span { border-color: var(--primary); background: var(--blue-soft); }
.group-icon-picker input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.currency-settings { display: grid; gap: 16px; border-radius: 22px; padding: 20px; background: var(--background); margin-top: 20px; }
.currency-settings h3,.currency-settings p { margin: 0; }
.currency-settings p,.currency-settings small { color: var(--text-secondary); line-height: 1.7; }
.currency-settings a { color: var(--primary); text-decoration: underline; }
#exchange-fields:not([hidden]) { display: grid; gap: 14px; border-top: 1px solid var(--border); padding-top: 18px; }
.group-status-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 5px; gap: 5px; background: var(--background); border: 1px solid var(--border); border-radius: 16px; }
.group-status-tabs a { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 46px; padding: 10px 6px; font-size: 13px; font-weight: 600; border-radius: 12px; color: var(--text-secondary); }
.group-status-tabs a[aria-current="page"] { background: var(--primary); color: white; box-shadow: var(--shadow); }
.group-start-button { text-align: center; white-space: normal; }
.group-start-dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%,520px); max-width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 24px calc(28px + env(safe-area-inset-bottom)); border: 1px solid var(--border); border-bottom: 0; border-radius: 30px 30px 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -16px 64px rgb(0 0 0 / 18%); }
.group-start-dialog[open] { animation: group-sheet-in 280ms cubic-bezier(.2,.8,.2,1); }
.group-start-dialog::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.group-start-dialog[open]::backdrop { animation: group-overlay-in 220ms ease-out; }
.group-sheet-handle { width: 38px; height: 4px; border-radius: 8px; background: var(--border); margin: 0 auto; }
.group-start-close { position: absolute; top: 20px; right: 20px; }
.group-start-close .icon-button { width: 36px; height: 36px; border-radius: 50%; background: var(--background); color: var(--text-secondary); font-size: 24px; }
.group-sheet-intro { text-align: center; padding: 14px 12px 12px; }
.group-sheet-intro img { object-fit: contain; }
.group-start-dialog h2 { margin: 10px 0; font-size: 24px; line-height: 1.4; }
.group-start-dialog p { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.7; font-size: 14px; }
.group-start-option { display: flex; align-items: center; gap: 12px; padding: 18px 16px; margin-top: 12px; border: 1px solid var(--primary); border-radius: 18px; min-height: 86px; text-decoration: none; }
.group-start-option > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.group-start-option strong { font-size: 15px; line-height: 1.5; }
.group-start-option > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; font-size: 26px; background: rgb(255 255 255 / 16%); }
.group-start-option small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; }
.group-start-primary { background: var(--primary); color: white; box-shadow: 0 6px 18px rgb(36 92 200 / 18%); }
.group-start-primary small { color: #000; }
.group-start-secondary { background: var(--surface); color: var(--primary); }
.group-start-secondary small { color: var(--text-secondary); }
.group-start-secondary > span { background: var(--background); }
.group-start-option:hover { filter: brightness(.96); }
.group-start-dialog :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
html.group-sheet-open { overflow: hidden; }
@keyframes group-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes group-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .group-start-dialog[open],.group-start-dialog[open]::backdrop { animation: none; } }
@media (max-width: 360px) { .group-start-dialog { padding-inline: 16px; } .group-start-option { padding-inline: 12px; gap: 10px; } .group-start-option > b { display: none; } }
.app-shell,.page,.app-header { width: 100%; min-width: 0; }
.page :is(section,article,form,fieldset,div,label,details,nav) { min-width: 0; }
.page :is(h1,h2,h3,p,b,small,summary,a,label) { overflow-wrap: anywhere; }
.page :is(input,select,textarea) { min-width: 0; max-width: 100%; }
.page fieldset { margin-inline: 0; }
.page img { max-width: 100%; }
.mascot-full { max-width: calc(100% - 48px) !important; }
.two-cols,.metric-grid,.card-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stack > .filter-row { grid-column: 1 / -1; }
.card-actions .button { width: 100%; padding-inline: 10px; }
.member-card { flex-wrap: wrap; }
.member-card > .grow { flex-basis: 120px; min-width: 0; }
.member-card > details { flex-basis: 100%; width: 100%; }
.member-card details form { display: grid; gap: 10px; }
.member-card details input,.member-card details select { width: 100%; }
.segmented-four { grid-template-columns: repeat(auto-fit,minmax(76px,1fr)); }
.member-grid { grid-template-columns: repeat(auto-fit,minmax(64px,1fr)); overflow: visible; }
.filter-row { flex-wrap: wrap; overflow: visible; }
.nav-create { display: none; }
@media (max-width: 759px) {
  body { min-width: 0; }
  .app-header { padding-inline: 16px; gap: 12px; height: auto; min-height: 64px; flex-wrap: wrap; }
  .auth-actions { gap: 8px; flex-wrap: wrap; }
  .page { padding: 8px 16px 24px; }
  .app-shell { padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
  .bottom-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; width: 100%; height: auto; min-height: calc(72px + env(safe-area-inset-bottom,0px)); padding: 6px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px)); }
  .bottom-nav .nav-item { display: flex; justify-content: center; min-width: 0; min-height: 52px; padding: 4px 2px; font-size: 11px; gap: 4px; }
  .bottom-nav .nav-item > span:last-child { white-space: nowrap; }
  .nav-create .nav-icon { background: #245cc8; color: white; border-radius: 12px; width: 36px; height: 32px; display: grid; place-items: center; }
  .fab { display: none; }
  .page-title,.section-heading { flex-wrap: wrap; gap: 12px; }
  .page-title > div,.section-heading > div { flex: 1 1 180px; }
  .group-strip { grid-template-columns: minmax(0,1fr); }
  .group-card { min-height: 0; }
  .group-form,.auth-page,.expense-form { grid-template-columns: minmax(0,1fr); }
  .group-identity { grid-template-columns: 64px minmax(0,1fr); }
  .form-card input:not([type=checkbox]):not([type=radio]),.form-card select,.auth-card input,textarea { font-size: 16px; }
  .member-grid { grid-template-columns: repeat(auto-fit,minmax(64px,1fr)); overflow: visible; }
  .member-choice { justify-content: flex-start; }
  .expense-row { flex-wrap: wrap; gap: 10px; }
  .expense-row .expense-main { flex-basis: calc(100% - 60px); }
  .expense-main b { white-space: normal; }
  .expense-amount { flex-basis: 100%; align-items: flex-end; }
  .settlement-card { flex-wrap: wrap; }
  .settlement-action { flex-basis: 100%; }
  .profile-card { flex-wrap: wrap; }
  .profile-card > div { flex: 1 1 160px; min-width: 0; }
  .hero-card { flex-wrap: wrap; }
  .hero-copy { flex-basis: 100%; width: 100%; }
  .hero-card > .mascot { margin-inline: auto; }
  .balance-hero { flex-wrap: wrap; }
  .balance-hero > div { flex-basis: 100%; }
  .balance-hero .mascot { margin-inline: auto; }
}
@media (max-width: 420px) {
  .two-cols,.add-member-fields { grid-template-columns: minmax(0,1fr); }
  .summary-card { grid-template-columns: minmax(0,1fr); }
  .metric-grid b { font-size: 13px; }
}