/* ==========================================================================
   Scrocco "Lime Pop" styles
   Tokens, fonts, shared components, screens. Light only.
   ========================================================================== */

/* ======================
   Fonts (self-hosted, same files Google Fonts serves)
   ====================== */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  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+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  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+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  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: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  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+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  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;
}

/* ======================
   Design tokens
   ====================== */
:root {
  /* Brand palette */
  --ink: oklch(0.2 0.015 255);
  --cream: oklch(0.96 0.015 100);
  --lime: oklch(0.9 0.17 125);
  --violet: oklch(0.85 0.08 300);
  --peach: oklch(0.87 0.09 60);
  --violet-fill: oklch(0.75 0.12 300);
  --peach-fill: oklch(0.8 0.12 60);
  --negative-on-ink: oklch(0.78 0.16 25);

  /* Semantic (light) */
  --bg: var(--cream);
  --card: #ffffff;
  --text: var(--ink);
  --text-muted: oklch(0.5 0.02 255);
  --text-soft: oklch(0.55 0.02 255);
  --text-faint: oklch(0.6 0.02 255);
  --stroke: var(--ink);
  --line: oklch(0.2 0.015 255 / 0.08);
  --line-10: oklch(0.2 0.015 255 / 0.1);
  --line-12: oklch(0.2 0.015 255 / 0.12);
  --line-15: oklch(0.2 0.015 255 / 0.15);
  --line-20: oklch(0.2 0.015 255 / 0.2);
  --line-25: oklch(0.2 0.015 255 / 0.25);
  --scrim: oklch(0.2 0.015 255 / 0.25);
  --scrim-strong: oklch(0.2 0.015 255 / 0.3);
  --negative: oklch(0.55 0.2 25);
  --positive: oklch(0.52 0.14 145);
  --warning: oklch(0.75 0.15 80);
  --info: oklch(0.6 0.12 250);
  --track: oklch(0.93 0.01 100);
  --input-bg: var(--cream);
  --input-bg-alt: #ffffff;
  --inverted-bg: var(--ink);
  --inverted-fg: oklch(0.97 0.005 100);
  --inverted-negative: var(--negative-on-ink);
  --btn-primary-bg: var(--ink);
  --btn-primary-fg: var(--lime);
  --avatar-ink-bg: var(--ink);
  --avatar-ink-fg: var(--lime);
  --tint-lime: var(--lime);
  --tint-violet: oklch(0.85 0.08 300 / 0.6);
  --tint-peach: oklch(0.87 0.09 60 / 0.6);
  --tint-violet-soft: oklch(0.85 0.08 300 / 0.5);
  --skeleton: oklch(0.2 0.015 255 / 0.06);
  --skeleton-shine: oklch(0.2 0.015 255 / 0.12);

  /* Legacy aliases kept so nothing old breaks */
  --primary: var(--ink);
  --primary-hover: var(--ink);
  --danger: var(--negative);
  --danger-hover: oklch(0.48 0.2 25);
  --success: var(--positive);
  --border: var(--line);
  --hover-bg: oklch(0.2 0.015 255 / 0.05);
  --radius: 20px;
  --shadow: none;

  /* Type */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-money: "Space Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, monospace;

  /* Shape */
  --r-card: 20px;
  --r-auth: 24px;
  --r-input: 16px;
  --r-tile: 15px;
  --r-sheet: 28px;
  --shadow-hard-3: 3px 3px 0 var(--stroke);
  --shadow-hard-4: 4px 4px 0 var(--stroke);
  --shadow-hard-5: 5px 5px 0 var(--stroke);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

/* ======================
   Base
   ====================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

html {
  background: #f4f2e6;
  background: var(--bg);
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.money,
.amount,
.currency-balance-line,
.group-card-amount,
.row-amount,
.expense-amount,
.settlement-amount,
.member-chip-balance,
.month-balance,
.percentage-row-value,
.percentage-total,
.stat-value {
  font-family: var(--font-money);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.amount-positive,
.balance.positive,
.positive-text {
  color: var(--positive);
}

.amount-negative,
.balance.negative,
.negative-text {
  color: var(--negative);
}

.balance.zero {
  color: var(--text-soft);
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px calc(110px + env(safe-area-inset-bottom));
}

/* Views */
.view {
  display: none;
}

.view.active {
  display: block;
}

#app-view.view.active {
  display: block;
  transition: opacity 0.3s var(--ease-out);
}

/* Dim the page behind an open sheet */
body:has(.modal-overlay.active) > .view {
  opacity: 0.4;
}

/* Utilities */
.hidden {
  display: none !important;
}

.w-full {
  width: 100%;
}

.flex-1 {
  flex: 1;
}

.text-muted {
  color: var(--text-muted);
}

.text-danger {
  color: var(--negative);
}

.text-error {
  color: var(--negative);
}

.text-small {
  font-size: 13px;
}

.text-center {
  text-align: center;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

/* ======================
   Brand mark
   Vector mark used as a mask so it follows currentColor
   ====================== */
.brand-mark {
  display: inline-block;
  aspect-ratio: 933 / 819;
  background-color: currentColor;
  -webkit-mask: url("/icons/mark.svg") no-repeat center / contain;
  mask: url("/icons/mark.svg") no-repeat center / contain;
  flex: none;
}

/* ======================
   Buttons and pills
   ====================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  text-decoration: none;
  transition:
    transform 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out),
    background-color 0.15s,
    opacity 0.15s;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.btn-primary,
.auth-submit-btn,
.expense-save-btn,
.join-accept-btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover,
.auth-submit-btn:hover,
.expense-save-btn:hover {
  filter: brightness(1.08);
}

.btn-outline,
.btn-secondary,
.auth-alt-btn,
.btn-soft-primary,
.btn-soft {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
}

.btn-outline:hover,
.btn-secondary:hover,
.auth-alt-btn:hover {
  background: var(--hover-bg);
}

.btn-danger,
.btn-error {
  background: transparent;
  color: var(--negative);
  border-color: var(--negative);
}

.btn-danger:hover,
.btn-error:hover {
  background: oklch(0.55 0.2 25 / 0.08);
}

.btn-warning {
  background: var(--warning);
  color: var(--ink);
  border-color: var(--warning);
}

.btn-sm,
.btn-small,
.btn--small {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}

.btn-large {
  height: 54px;
  font-size: 16px;
}

.btn-block {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  font-size: 16px;
}

.btn-link,
.link-btn {
  background: none;
  border: 0;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 14px;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover,
.link-btn:hover {
  color: var(--text);
}

/* Sticker press: shadow shrinks as the element shifts */
.sticker {
  box-shadow: var(--shadow-hard-3);
  transition:
    transform 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out);
}

.sticker:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--stroke);
}

@media (hover: hover) {
  .sticker:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--stroke);
  }
  .sticker:hover:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--stroke);
  }
}

/* Icon circle buttons (header, group actions) */
.circle-btn,
.btn-icon,
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-15);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  flex: none;
  transition: transform 0.12s var(--ease-out);
}

.circle-btn:active,
.btn-icon:active,
.btn-close:active {
  transform: scale(0.94);
}

.circle-btn svg,
.btn-icon svg {
  width: 16px;
  height: 16px;
}

.btn-icon-danger {
  color: var(--negative);
}

.btn-icon-warning {
  color: oklch(0.6 0.15 80);
}

.btn-icon-primary {
  color: var(--text);
}

/* Loading spinner on buttons */
.btn.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-color: var(--btn-primary-fg) transparent var(--btn-primary-fg) transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn-outline.btn-loading::after,
.btn-secondary.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-error.btn-loading::after,
.btn-soft-primary.btn-loading::after {
  border-color: var(--stroke) transparent var(--stroke) transparent;
}

/* Small pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  line-height: 1.4;
  white-space: nowrap;
}

.pill-ink {
  background: var(--inverted-bg);
  color: var(--inverted-fg);
  border-color: var(--inverted-bg);
}

.pill-muted {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--line-20);
}

.pill-danger {
  background: transparent;
  color: var(--negative);
  border-color: var(--negative);
}

/* Segmented control tiles */
.seg {
  display: flex;
  gap: 8px;
}

.seg-tile {
  flex: 1;
  height: 46px;
  border-radius: var(--r-tile);
  background: var(--card);
  border: 2px solid var(--line-12);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    transform 0.12s var(--ease-out);
}

.seg-tile.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}

.seg-tile:active {
  transform: translate(1px, 1px);
}

.seg-tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.seg-cream .seg-tile:not(.active) {
  background: var(--input-bg);
}

/* ======================
   Cards
   ====================== */
.card,
.list-card,
.expense-card,
.expense-split-card,
.profile-section,
.profile-edit-card,
.expense-summary-card:not(:empty),
.home-invitations-card,
.pending-invitations-section,
.invitation-item,
.invite-link-item,
.stat-card,
.settlement-card,
.percentage-card,
.admin-user-item,
.admin-group-item,
.admin-announcement-item,
.admin-event-item {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
}

.card {
  padding: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1.5px dashed var(--line-12);
}

.card-header-actions {
  display: flex;
  gap: 8px;
}

/* Rows inside list cards (dashed dividers) */
.list-card {
  padding: 4px 16px;
}

.list-card .row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1.5px dashed var(--line-12);
  cursor: pointer;
}

.list-card .row:last-child {
  border-bottom: 0;
}

.row-emoji {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex: none;
}

.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.row-title {
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.row-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-amount {
  font-size: 15px;
}

.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: none;
}

.row-delta {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Section titles */
.section-title,
.home-section-title,
.expenses-feed-title,
.members-scroll-title,
.pending-invitations-title,
.profile-section-title,
.invite-links-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: block;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ======================
   Inputs
   ====================== */
.input,
.auth-input-group input,
.form-group input,
.form-group select,
.form-group textarea,
.profile-edit-input-group input,
.expenses-search-input,
.admin-search-input,
select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="datetime-local"],
textarea {
  width: 100%;
  height: 52px;
  border-radius: var(--r-input);
  background: var(--input-bg-alt);
  border: 2px solid var(--line-12);
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-soft);
  font-weight: 500;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--stroke);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
}

.select-wrapper {
  position: relative;
}

/* ======================
   Picker (replaces native selects)
   The <select> stays in the DOM for the app logic; it is visually hidden.
   ====================== */
.picker-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.picker-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 14px 0 16px;
  border-radius: var(--r-input);
  background: var(--input-bg-alt);
  border: 2px solid var(--line-12);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s var(--ease-out);
}

.picker-trigger[aria-expanded="true"],
.picker-trigger:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.picker-trigger:active {
  transform: translate(1px, 1px);
}

.picker-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.picker-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-trigger-label.is-placeholder {
  color: var(--text-soft);
  font-weight: 500;
}

.picker-trigger-chevron {
  flex: none;
  font-size: 15px;
  color: var(--text-muted);
}

.picker-card-trigger {
  cursor: pointer;
}

.picker-card-trigger::after {
  content: "▾";
  flex: none;
  font-size: 15px;
  color: var(--text-muted);
}

.picker-card-trigger:focus-visible {
  outline: none;
  border-color: var(--ink);
}

.picker-sheet {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

.picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.picker-group {
  padding: 10px 6px 2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 15px;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.picker-option:focus-visible {
  outline: none;
  border-color: var(--ink);
}

.picker-option:active {
  transform: translate(1px, 1px);
}

.picker-option.is-selected {
  background: var(--lime);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800;
}

.picker-option.is-selected:active {
  box-shadow: 1px 1px 0 var(--ink);
}

.picker-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.picker-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-check {
  flex: none;
  font-weight: 800;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.form-group label,
.form-label {
  font-size: 13.5px;
  font-weight: 800;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-actions,
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions .btn,
.form-actions .btn {
  flex: 1;
  height: 52px;
  border-radius: 26px;
}

.modal-actions .btn-primary,
.form-actions .btn-primary {
  flex: 2;
}

.modal-actions .btn:only-child {
  flex: 1;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 29px;
  flex: none;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 2px solid var(--line-20);
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--line-25);
  transition: transform 0.2s var(--ease-out), background-color 0.2s, width 0.2s, height 0.2s, top 0.2s, left 0.2s;
}

input:checked + .toggle-slider {
  background: var(--inverted-bg);
  border-color: var(--inverted-bg);
}

input:checked + .toggle-slider::before {
  width: 23px;
  height: 23px;
  top: 1px;
  left: 1px;
  background: var(--inverted-fg);
  transform: translateX(19px);
}

input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

input:focus-visible + .toggle-slider {
  outline: 2px solid var(--stroke);
  outline-offset: 2px;
}

/* ======================
   Avatars
   ====================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  color: var(--ink);
  background: var(--tint-violet);
  flex: none;
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
}

.avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-32 {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.avatar-36 {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.avatar-38 {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.avatar-44 {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.avatar-52 {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.avatar-bordered {
  border: 2px solid var(--ink);
}

.tint-lime {
  background: var(--tint-lime);
  color: var(--ink);
}

.tint-violet {
  background: var(--tint-violet);
}

.tint-peach {
  background: var(--tint-peach);
}

.tint-ink {
  background: var(--avatar-ink-bg);
  color: var(--avatar-ink-fg);
}

/* Fixed rotations (never random) */
.rot-a {
  transform: rotate(-6deg);
}

.rot-b {
  transform: rotate(5deg);
}

.rot-c {
  transform: rotate(-4deg);
}

.rot-d {
  transform: rotate(4deg);
}

/* ======================
   Skeletons and spinners
   ====================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.spinner,
.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line-12);
  border-top-color: var(--stroke);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-small {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.page-loading,
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  color: var(--text-muted);
  font-weight: 600;
}

.loading {
  color: var(--text-muted);
}

.groups-skeleton,
.expenses-skeleton,
.passkeys-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-group-item,
.skeleton-item,
.skeleton-passkey-item {
  position: relative;
  overflow: hidden;
  height: 76px;
  border-radius: var(--r-card);
  background: var(--skeleton);
}

.skeleton-item {
  height: 58px;
}

.skeleton-passkey-item {
  height: 56px;
}

.skeleton-group-item::after,
.skeleton-item::after,
.skeleton-passkey-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: shimmer 1.4s infinite;
}

/* ======================
   Messages
   ====================== */
.message {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
  border: 2px solid var(--line-12);
  background: var(--input-bg);
}

.message.error {
  border-color: var(--negative);
  color: var(--negative);
}

.message.success {
  border-color: var(--positive);
  color: var(--positive);
}

.message.info {
  border-color: var(--line-20);
  color: var(--text);
}

#auth-message:empty,
#register-message:empty {
  display: none;
}

/* ======================
   Bottom sheets (all modals)
   ====================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  border-top: 2.5px solid var(--stroke);
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
  overscroll-behavior: contain;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal.is-dragging {
  transition: none;
}

.modal::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--line-25);
  margin: 0 auto 18px;
}

.modal h2 {
  font-size: 24px;
  margin-bottom: 4px;
}

.modal .modal-sub,
.modal .modal-description {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-header h2 {
  margin-bottom: 0;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal p.text-muted {
  font-size: 14px;
  font-weight: 600;
}

.modal-wide,
.modal-lg {
  max-width: 640px;
}

/* ======================
   Screen header (back + title + actions)
   ====================== */
.screen-header,
.group-header,
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 10px;
  min-height: 62px;
}

.screen-header h2,
.group-header h2,
.profile-header h2,
.screen-title {
  font-size: 21px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-link {
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px 6px 0;
  flex: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.back-link:hover {
  opacity: 0.7;
}

.screen-header-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

/* ======================
   App header (Home only)
   ====================== */
.app-header {
  padding: 18px 0 10px;
}

#app-view:has(main > .view.active:not(#home-view)) .app-header {
  display: none;
}

.app-header .inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}

.app-logo {
  width: auto;
  height: 22px;
}

.app-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  display: none;
}

.hdr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tint-lime);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-6deg);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
  margin-right: 3px;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.hdr-avatar:active {
  transform: rotate(-6deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.hdr-avatar svg {
  width: 100%;
  height: 100%;
}

/* Impersonation banner */
.impersonation-banner {
  max-width: 560px;
  margin: 0 auto 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--warning);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.impersonation-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.impersonation-banner .btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  border-color: var(--ink);
  color: var(--ink);
}

/* ======================
   Hero (Home + Group)
   ====================== */
.hero {
  padding: 20px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hero-greeting {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.hero-amount-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 8px;
  margin-left: -8px;
}

.hero-amount,
.currency-balance-line {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  z-index: 0;
}

.hero-amount::before,
.currency-balance-line::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 55%;
  height: 26px;
  background: var(--lime);
  transform: translateY(-50%) rotate(-1.2deg);
  border-radius: 4px;
  z-index: -1;
}

.hero-amount.hero-amount--group {
  font-size: 48px;
}

.hero-amount.hero-amount--group::before {
  height: 24px;
}

.hero-amount .text-muted,
#total-balance > .text-muted {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text);
}

#total-balance > .text-muted::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 55%;
  height: 18px;
  background: var(--lime);
  transform: translateY(-50%) rotate(-1.2deg);
  border-radius: 4px;
  z-index: -1;
}

#total-balance > .text-muted {
  position: relative;
  display: inline-block;
  z-index: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Amount sign colours only in the small places; hero stays ink */
.hero-amount.amount-positive,
.hero-amount.amount-negative,
.currency-balance-line.amount-positive,
.currency-balance-line.amount-negative {
  color: var(--text);
}

.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.hero-eye-btn .eye-closed {
  display: none;
}

.hero-eye-btn[aria-pressed="true"] .eye-open {
  display: none;
}

.hero-eye-btn[aria-pressed="true"] .eye-closed {
  display: block;
}

/* Privacy mode: blur amounts on the home page and the group list page only.
   Other screens (expense detail, settle plan, admin) are not affected. */
body.amounts-hidden #home-view .currency-balance-line,
body.amounts-hidden #home-view #total-balance > .text-muted,
body.amounts-hidden #home-view .row-amount,
body.amounts-hidden #home-view .group-card-amount,
body.amounts-hidden #group-view .hero-amount,
body.amounts-hidden #group-view .member-avatar-balance,
body.amounts-hidden #group-view .balance-amount,
body.amounts-hidden #group-view .month-balance,
body.amounts-hidden #group-view .expense-amount,
body.amounts-hidden #group-view .expense-user-impact,
body.amounts-hidden #label-filter-summary-total,
body.amounts-hidden #label-filter-summary-myshare,
body.amounts-hidden #label-report-view .hero-amount,
body.amounts-hidden #label-report-view .hero-sub,
body.amounts-hidden #label-report-view .label-member-amount,
body.amounts-hidden #label-report-view .label-category-amount,
body.amounts-hidden #label-report-view .label-day-amount,
body.amounts-hidden #label-compare-view .label-compare-amount,
body.amounts-hidden #label-compare-view .label-compare-myshare {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

/* ===== Expense labels ===== */

.exp-label-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--violet);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  white-space: nowrap;
}

/* Label palette (keep in sync with domain.LabelColors) */
.exp-label-chip[data-color="violet"],
.label-sheet-chip[data-color="violet"],
.label-color-swatch[data-color="violet"] { background: var(--violet); }
.exp-label-chip[data-color="lime"],
.label-sheet-chip[data-color="lime"],
.label-color-swatch[data-color="lime"] { background: var(--lime); }
.exp-label-chip[data-color="peach"],
.label-sheet-chip[data-color="peach"],
.label-color-swatch[data-color="peach"] { background: var(--peach); }
.exp-label-chip[data-color="sky"],
.label-sheet-chip[data-color="sky"],
.label-color-swatch[data-color="sky"] { background: oklch(0.86 0.08 230); }
.exp-label-chip[data-color="mint"],
.label-sheet-chip[data-color="mint"],
.label-color-swatch[data-color="mint"] { background: oklch(0.88 0.09 165); }
.exp-label-chip[data-color="pink"],
.label-sheet-chip[data-color="pink"],
.label-color-swatch[data-color="pink"] { background: oklch(0.86 0.09 350); }
.exp-label-chip[data-color="yellow"],
.label-sheet-chip[data-color="yellow"],
.label-color-swatch[data-color="yellow"] { background: oklch(0.92 0.13 95); }
.exp-label-chip[data-color="grey"],
.label-sheet-chip[data-color="grey"],
.label-color-swatch[data-color="grey"] { background: oklch(0.88 0.01 255); }

.label-color-swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 40px));
  gap: 8px;
  padding: 4px;
}

.label-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.label-color-swatch.is-selected {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink);
}

.label-color-swatch:active {
  transform: scale(0.94);
}

.label-color-swatch:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.exp-label-chip.is-archived {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
}

.exp-label-chip.is-lg {
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 12px;
}

.expense-desc .exp-label-chip {
  flex: none;
  line-height: 1.4;
  padding: 2px 8px;
}

/* Expense form label chip trigger (opens the label picker sheet) */
.label-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.label-chip-add {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 14px;
  border-radius: 17px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px dashed var(--line-20);
  cursor: pointer;
}

.label-chip-add:active {
  transform: translate(1px, 1px);
}

.exp-label-chip.label-chip-selected {
  min-height: 34px;
  font-size: 12.5px;
  padding: 0 5px 0 14px;
  border-radius: 17px;
  gap: 8px;
  cursor: pointer;
}

.label-chip-name {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.label-chip-remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  padding: 0;
  cursor: pointer;
}

.label-active-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.label-field-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px 4px 0;
}

/* Expense label picker sheet */
#label-sheet-search {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.label-sheet-error {
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  margin-top: 10px;
}

.label-sheet-section {
  margin-top: 16px;
}

.label-sheet-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.label-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.label-sheet-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--violet);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.label-sheet-chip.is-archived {
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
}

.label-sheet-chip-tag {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

#label-sheet-remove-btn {
  margin-top: 14px;
  border-top: 1.5px dashed var(--line-12);
}

.label-sheet-create-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1.5px dashed var(--line-20);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* Active label banner */
.active-label-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--lime);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
  padding: 10px 14px;
  margin: 10px 0;
}

.active-label-banner-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.active-label-banner-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-label-banner-off {
  flex: none;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
  cursor: pointer;
}

/* Label filter summary card */
.label-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--card);
  border: 2px solid var(--line-12);
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.label-filter-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.label-filter-summary-link {
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
}

.label-filter-summary-clear {
  flex: none;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

/* Labels management screen */
.labels-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.labels-active-card {
  margin-bottom: 14px;
}

.labels-active-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}

.labels-active-empty p {
  margin: 0;
}

.labels-active-empty .btn {
  margin-top: 8px;
}

.labels-new-form {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.labels-new-form .input {
  flex: 1;
  min-width: 0;
}

.labels-list-section {
  margin-bottom: 14px;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 4px;
  border-bottom: 1.5px dashed var(--line-12);
  cursor: pointer;
}

.label-row:last-child {
  border-bottom: none;
}

.label-row-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.labels-archived-section summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 0;
}

/* Label actions sheet */
.label-actions-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.label-action-row {
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed var(--line-12);
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.label-action-row:last-child {
  border-bottom: none;
}

.label-action-row.danger {
  color: var(--danger);
}

/* Bulk apply sheet */
.label-bulk-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 10px 0;
}

.label-bulk-overwrite {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Report bars (member/category/day rows) */
.label-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--line-12);
  overflow: hidden;
  margin-top: 4px;
}

.label-bar > span {
  display: block;
  height: 100%;
  background: var(--violet-fill);
  border-radius: 4px;
}

/* Report "by category" / "day by day" rows: a title line (icon, name,
   amount) above the bar. */
.label-report-row {
  padding: 10px 0;
  border-bottom: 1.5px dashed var(--line-12);
}

.label-report-row:last-child {
  border-bottom: none;
}

.label-report-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-report-row-top .row-title {
  flex: 1;
  min-width: 0;
}

.label-report-row-top .row-amount {
  flex: none;
}

/* Compare-all-labels rows */
.label-compare-row {
  padding: 12px 0;
  border-bottom: 1.5px dashed var(--line-12);
  cursor: pointer;
}

.label-compare-row:last-child {
  border-bottom: none;
}

.label-compare-row.is-archived {
  opacity: 0.6;
}

.label-compare-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.label-compare-row-top .row-amount {
  margin-left: auto;
}

.label-compare-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.hero-sub {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.hero-actions .btn-outline {
  padding: 0 20px;
}

/* ======================
   Home
   ====================== */
.home-section {
  padding-bottom: 16px;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.home-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-section-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.home-section-action {
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
}

.activity-list:empty {
  display: none;
}

.home-empty,
.empty-state,
.expenses-empty,
.profile-empty,
.settling-empty,
.fab-groups-empty,
.quick-add-empty,
.invite-links-empty {
  text-align: center;
  padding: 26px 16px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px dashed var(--line-15);
  border-radius: var(--r-card);
}

.home-empty-icon,
.empty-icon,
.expenses-empty-icon,
.profile-empty-icon {
  font-size: 32px;
}

.home-empty-title,
.empty-text,
.expenses-empty-text,
.profile-empty-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}

.home-empty-text,
.empty-hint,
.profile-empty-hint {
  font-size: 13.5px;
}

.home-empty .btn,
.expenses-empty .btn,
.empty-state .btn {
  margin-top: 8px;
}

/* Invitations card on home */
.home-invitations-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
  border-color: var(--ink) !important;
  box-shadow: var(--shadow-hard-3);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.home-invitations-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--stroke);
}

.home-invitations-icon {
  font-size: 24px;
}

.home-invitations-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-invitations-title {
  font-weight: 800;
  font-size: 15px;
}

.home-invitations-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.home-invitations-card svg {
  width: 20px;
  height: 20px;
}

/* Group cards */
.groups-list,
.group-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform 0.12s var(--ease-out);
}

.group-card:active {
  transform: scale(0.985);
}

.group-card.is-debt {
  background: var(--inverted-bg);
  color: var(--inverted-fg);
  border-color: var(--inverted-bg);
}

.group-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.group-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-card-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.group-card.is-debt .group-card-sub {
  color: inherit;
  opacity: 0.7;
}

.group-card-amount {
  font-size: 16px;
  color: var(--text-soft);
}

.group-card.is-debt .group-card-amount {
  color: var(--inverted-negative);
}

.group-card.is-credit .group-card-amount {
  color: var(--positive);
}

/* Legacy .list-item still used by passkeys and groups */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list-item-title {
  font-weight: 700;
}

.list-item-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
}

.list-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-item-arrow {
  color: var(--text-muted);
}

/* ======================
   FAB and quick add
   ====================== */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--lime);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(8deg);
  z-index: 900;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.fab svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.5;
  transition: transform 0.2s var(--ease-out);
}

.fab:active {
  transform: rotate(8deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

@media (hover: hover) {
  .fab:hover {
    box-shadow: 5px 5px 0 var(--ink);
  }
}

.fab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.fab-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.fab-container .fab {
  pointer-events: auto;
}

.fab-container.open .fab {
  transform: rotate(0deg);
}

.fab-container.open .fab svg {
  transform: rotate(45deg);
}

.fab-overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-strong);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.fab-container.open .fab-overlay {
  opacity: 1;
  pointer-events: auto;
}

#home-view:has(.fab-container.open) > :not(.fab-container) {
  opacity: 0.35;
  transition: opacity 0.25s var(--ease-out);
}

#home-view > :not(.fab-container) {
  transition: opacity 0.25s var(--ease-out);
}

.fab-groups {
  position: absolute;
  right: 20px;
  bottom: calc(24px + 62px + 12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.fab-container.open .fab-groups {
  pointer-events: auto;
}

.fab-groups-label {
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--cream);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.fab-container.open .fab-groups-label {
  opacity: 1;
  transform: none;
}

.fab-group-pill {
  width: 264px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out),
    box-shadow 0.12s var(--ease-out);
}

.fab-container.open .fab-group-pill {
  opacity: 1;
  transform: none;
}

/* Stagger from the FAB upward (column-reverse: first child is nearest the FAB) */
.fab-container.open .fab-group-pill:nth-child(1) {
  transition-delay: 0ms;
}
.fab-container.open .fab-group-pill:nth-child(2) {
  transition-delay: 40ms;
}
.fab-container.open .fab-group-pill:nth-child(3) {
  transition-delay: 80ms;
}
.fab-container.open .fab-group-pill:nth-child(4) {
  transition-delay: 120ms;
}
.fab-container.open .fab-groups-label {
  transition-delay: 140ms;
}

.fab-group-pill:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.fab-group-pill-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  text-transform: uppercase;
}

.fab-group-pill-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fab-group-pill-name {
  font-weight: 800;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fab-group-pill-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(0.5 0.02 255);
}

.fab-groups-empty {
  width: 264px;
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px;
  border-style: solid;
}

/* Legacy quick-add modal list (kept) */
.quick-add-groups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-add-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
}

.quick-add-group-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tint-lime);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transform: rotate(-6deg);
}

.quick-add-group-name {
  font-weight: 800;
}

.quick-add-group-meta {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ======================
   Group detail
   ====================== */
.members-row {
  display: flex;
  gap: 10px;
  padding-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.members-row::-webkit-scrollbar {
  display: none;
}

.members-chips {
  display: flex;
  gap: 10px;
  flex: 1;
}

.member-avatar-item {
  flex: 1 0 auto;
  min-width: 150px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.12s var(--ease-out);
}

.member-avatar-item:active {
  transform: scale(0.97);
}

.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  background: var(--tint-violet);
  flex: none;
  overflow: hidden;
  text-transform: uppercase;
}

.member-avatar svg {
  width: 100%;
  height: 100%;
}

.member-avatar.is-you {
  background: var(--tint-lime);
}

.member-avatar.deleted {
  background: var(--track);
  color: var(--text-muted);
}

.member-chip-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-avatar-name {
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-avatar-balance {
  font-family: var(--font-money);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-soft);
}

.member-avatar-balance.positive {
  color: var(--positive);
}

.member-avatar-balance.negative {
  color: var(--negative);
}

.member-avatar-item.member-deleted .member-avatar-name {
  color: var(--text-muted);
  text-decoration: line-through;
}

.member-add-tile {
  flex: none;
  width: 54px;
  min-height: 62px;
  background: var(--card);
  border: 2px dashed var(--line-25);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text);
  transition: transform 0.12s var(--ease-out);
}

.member-add-tile:active {
  transform: scale(0.95);
}

/* Pending invitations (admin) */
.pending-invitations-section {
  padding: 14px 16px;
  margin-bottom: 16px;
}

.pending-invitations-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pending-invitations-count {
  font-size: 12.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.pending-invitation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1.5px dashed var(--line-12);
}

.pending-invitation-item:last-child {
  border-bottom: 0;
}

.pending-invitation-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pending-invitation-email {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-invitation-date {
  font-size: 12.5px;
  color: var(--text-muted);
}

.cancel-invitation-btn {
  font-size: 13px;
  font-weight: 800;
  color: var(--negative);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px;
}

/* Settlement plan sheet */
#settling-section .modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#settling-section .modal::before {
  margin-bottom: 0;
}

.settling-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settling-header h2 {
  margin: 0;
}

.settling-toggle {
  display: none;
}

.settling-info {
  display: none;
}

#settling-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settlement-card {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settlement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settlement-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
}

.settlement-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  overflow: hidden;
  text-transform: uppercase;
}

.settlement-avatar svg {
  width: 100%;
  height: 100%;
}

.settlement-avatar.from {
  background: var(--tint-lime);
  transform: rotate(-6deg);
}

.settlement-avatar.to {
  background: var(--tint-violet);
  transform: rotate(5deg);
}

.settlement-name {
  font-weight: 700;
  font-size: 13.5px;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.settlement-amount {
  font-size: 15px;
  padding: 6px 16px;
  border-radius: 17px;
  background: var(--inverted-bg);
  color: var(--inverted-fg);
}

.settlement-amount {
  color: var(--lime);
}

.settlement-arrow-icon {
  font-size: 18px;
}

.settlement-divider {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
}

.settlement-actions {
  border-top: 2px solid var(--line);
  padding-top: 16px;
}

.settlement-actions .btn {
  width: 100%;
  height: 46px;
  font-size: 14px;
}

.settling-empty {
  border: 0;
  padding: 10px;
}

/* Expenses feed */
.expenses-feed {
  padding-top: 4px;
}

.expenses-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.expenses-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.expenses-search-icon,
.expenses-search-clear {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.expenses-search-clear {
  pointer-events: auto;
  cursor: pointer;
}

input.expenses-search-input {
  height: 46px;
  padding: 0 16px 0 42px;
  border-radius: 23px;
}

.expenses-filter-btn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.expenses-filter-btn.active {
  background: var(--lime);
  border-color: var(--ink);
  color: var(--ink);
}

.expenses-filter-dropdown {
  margin-bottom: 12px;
}

.expenses-filter-dropdown .picker-trigger {
  height: 46px;
  border-radius: 23px;
}

/* Jump to month */
.jump-month-trigger {
  margin-top: 8px;
  height: 46px;
  border-radius: 23px;
}

.jump-month-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--lime);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

.jump-month-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jump-month-chip-clear {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.back-to-today {
  position: fixed;
  left: 50%;
  bottom: calc(32px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--inverted-bg);
  color: var(--inverted-fg);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.back-to-today:active {
  transform: translateX(-50%) translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.jump-year-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.jump-year-label {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.jump-year-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-12);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.jump-year-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jump-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.jump-month-cell {
  min-height: 50px;
  border-radius: 15px;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
}

.jump-month-cell:focus-visible {
  outline: none;
  border-color: var(--ink);
}

.jump-month-cell:not(:disabled):active {
  transform: translate(1px, 1px);
}

.jump-month-cell.is-selected {
  background: var(--lime);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-weight: 800;
}

.jump-month-cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jump-month-empty {
  margin: 8px 0;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}

.expenses-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.month-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.month-header-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.month-chevron {
  font-size: 9px;
  color: var(--text-faint);
  transition: transform 0.2s var(--ease-out);
}

.month-section.collapsed .month-chevron {
  transform: rotate(-90deg);
}

.month-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  text-transform: capitalize;
}

.month-balance {
  font-size: 14px;
  color: var(--text-soft);
}

.month-balance.positive {
  color: var(--positive);
}

.month-balance.negative {
  color: var(--negative);
}

.month-balance.loading {
  color: var(--text-faint);
}

.month-expenses {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  padding: 4px 16px;
  overflow: hidden;
}

.month-section.collapsed .month-expenses {
  display: none;
}

/* Flat list (search results) gets the same card */
.expenses-list > .expense-swipe,
.expenses-list > .expense-item {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 16px;
}

.expenses-list > .expense-swipe + .expense-swipe,
.expenses-list > .expense-item + .expense-item {
  margin-top: -6px;
}

/* Expense rows */
.expense-swipe {
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px dashed var(--line-12);
  --swipe-action-width: 88px;
}

.month-expenses > .expense-swipe:last-child,
.month-expenses > .expense-item:last-child,
.expenses-list > .expense-swipe:last-child {
  border-bottom: 0;
}

.expense-swipe-front {
  position: relative;
  background: var(--card);
  z-index: 1;
  transition: transform 0.2s var(--ease-out);
  will-change: transform;
  /* Let the browser handle vertical scroll but keep horizontal moves for the swipe gesture */
  touch-action: pan-y;
}

.expense-swipe.is-dragging .expense-swipe-front {
  transition: none;
}

.expense-swipe.open-right .expense-swipe-front {
  transform: translateX(var(--swipe-action-width));
}

.expense-swipe.open-left .expense-swipe-front {
  transform: translateX(calc(-1 * var(--swipe-action-width)));
}

.expense-swipe-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--swipe-action-width);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  /* Hidden and not clickable until the row is swiped open */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.expense-swipe.is-dragging .expense-swipe-actions,
.expense-swipe.open-right .expense-swipe-actions-left,
.expense-swipe.open-left .expense-swipe-actions-right {
  opacity: 1;
  pointer-events: auto;
}

.expense-swipe-actions-left {
  left: 0;
}

.expense-swipe-actions-right {
  right: 0;
}

.expense-swipe-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  width: 100%;
  height: 100%;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.expense-swipe-action svg {
  width: 18px;
  height: 18px;
}

.expense-swipe-action-delete {
  color: var(--negative);
}

.expense-swipe-action-duplicate {
  color: var(--text);
}

.expense-swipe-hint {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}

.expense-swipe-hint.visible {
  opacity: 1;
}

.expense-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 0;
  cursor: pointer;
}

.expense-item:not(.expense-swipe-front) {
  border-bottom: 1.5px dashed var(--line-12);
}

.month-expenses > .expense-item:last-child {
  border-bottom: 0;
}

.expense-emoji {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex: none;
}

.expense-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.expense-desc {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.expense-desc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex: none;
  /* The row is inside an overflow:hidden swipe wrapper; bold digits draw a bit past their box */
  padding-right: 3px;
}

.expense-amount {
  font-size: 15px;
}

.expense-user-impact {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.expense-type {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  line-height: 1.4;
  flex: none;
}

.expense-type.settle {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--line-20);
}

.expense-item.settle .expense-desc {
  color: var(--text-muted);
}

.expense-lock {
  font-size: 12px;
  flex: none;
}

.expense-item.locked .expense-desc-text,
.expense-item.locked .expense-meta {
  opacity: 0.7;
}

/* Context menu (long press) */
.context-menu {
  position: fixed;
  z-index: 1100;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.context-menu-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
}

.context-menu-item:hover {
  background: var(--hover-bg);
}

.context-menu-item.danger {
  color: var(--negative);
}

/* ======================
   Add / edit expense
   ====================== */
.expense-lock-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 2px dashed var(--line-20);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.date-chip {
  position: relative;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  border: 2px solid var(--line-15);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
}

.date-chip input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: 0;
  /* Taps land on the chip, which opens the picker itself */
  pointer-events: none;
}

.date-chip {
  cursor: pointer;
}

.date-chip input[type="date"]:disabled {
  cursor: default;
}

.amount-block {
  padding: 26px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
}

.amount-currency {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--text-muted);
  flex: none;
}

.amount-input {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 76px;
  letter-spacing: -0.04em;
  line-height: 1;
  width: 5.2ch;
  min-width: 2ch;
  max-width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}

.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount-input::placeholder {
  color: var(--line-20);
}

.amount-sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Calculator button next to the amount (the input keeps its own keyboard) */
.amount-calc-btn {
  align-self: center;
  margin-left: 4px;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(-6deg);
  transition: transform 0.12s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.amount-calc-btn:active {
  transform: rotate(-6deg) scale(0.94);
}

.amount-trace {
  font-family: var(--font-money);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Calculator sheet */
.calc-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calc-sheet::before {
  margin-bottom: 4px;
}

.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calc-sheet .calc-header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.calc-display {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.calc-sheet .calc-expr {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  /* 3 lines (3 x 32px, plus room for font rounding), then it scrolls. */
  max-height: 100px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: none;
  overflow-y: auto;
  overflow-wrap: anywhere;
  text-align: right;
  font-family: var(--font-money);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--text);
  user-select: text;
  -webkit-user-select: text;
}

.calc-sheet .calc-expr::placeholder {
  color: var(--line-20);
  font-weight: 700;
  opacity: 1;
}

.calc-result {
  font-family: var(--font-money);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 1.2em;
  max-height: 2.4em;
  line-height: 1.2;
  overflow: hidden;
  text-align: right;
  overflow-wrap: anywhere;
}

.calc-result.is-invalid {
  color: var(--negative);
}

.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.calc-key {
  height: 50px;
  padding: 0;
  border-radius: var(--r-tile);
  background: var(--card);
  border: 2px solid var(--line-12);
  color: var(--text);
  font-family: var(--font-money);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.calc-key:active {
  transform: translate(1px, 1px);
}

.calc-key-op {
  background: var(--lime);
  border-color: var(--ink);
  color: var(--ink);
}

.calc-key-clear {
  background: transparent;
  border: 1.5px dashed var(--line-20);
  color: var(--text-muted);
  font-size: 17px;
}

.calc-key-equals {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.calc-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.calc-actions .btn {
  height: 50px;
}

.calc-actions .btn-outline {
  padding: 0 22px;
}

.calc-actions .btn-primary {
  flex: 1;
}

.desc-row {
  display: flex;
  gap: 10px;
  padding: 14px 0;
}

.desc-input,
.expense-hero-description {
  flex: 1;
  height: 50px;
  border-radius: 16px;
  background: var(--card);
  border: 2px solid var(--line);
}

.category-tile,
.category-trigger-btn {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--lime);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transform: rotate(-5deg);
  transition: transform 0.12s var(--ease-out);
}

.category-tile:active,
.category-trigger-btn:active {
  transform: rotate(-5deg) scale(0.95);
}

.category-trigger-btn.predicting {
  animation: wiggle 0.8s ease-in-out infinite;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.person-card,
.expense-card {
  position: relative;
  min-height: 58px;
  border-radius: 18px;
  background: var(--card);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  margin-bottom: 14px;
}

.expense-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tint-lime);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  transform: rotate(-6deg);
  flex: none;
  overflow: hidden;
  text-transform: uppercase;
}

.expense-card-avatar svg {
  width: 100%;
  height: 100%;
}

.expense-card-avatar-alt {
  background: var(--tint-violet);
  transform: rotate(5deg);
}

.expense-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.expense-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.expense-card-value {
  font-weight: 800;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-card-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* Split selector */
.expense-split-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expense-split-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

.expense-split-options {
  display: flex;
  gap: 8px;
}

.expense-split-btn {
  flex: 1;
  min-width: 0;
  height: 46px;
  border-radius: var(--r-tile);
  background: var(--card);
  border: 2px solid var(--line-12);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
  transition:
    background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    transform 0.12s var(--ease-out);
}

.expense-split-btn svg {
  display: none;
}

.expense-split-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-split-btn.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}

.expense-split-btn:active {
  transform: translate(1px, 1px);
}

.expense-split-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Percentage editor */
#percentage-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  min-height: 0;
  border-radius: var(--r-card);
}

#percentage-group.hidden {
  display: none;
}

.percentage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.percentage-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 13px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--text);
  white-space: nowrap;
}

.percentage-total.valid {
  background: var(--lime);
  color: var(--ink);
}

.percentage-total.invalid {
  color: var(--negative);
  border-color: var(--negative);
}

.percentage-check {
  display: none;
  width: 14px;
  height: 14px;
}

.percentage-total.valid .percentage-check {
  display: inline-block;
}

.percentage-total-value {
  font-family: var(--font-money);
}

.percentage-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 6px;
}

.percentage-reset-btn svg {
  width: 14px;
  height: 14px;
}

.percentage-reset-btn:hover {
  color: var(--text);
}

.percentage-participants {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.percentage-row-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.percentage-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.percentage-row-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint-violet);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  overflow: hidden;
  text-transform: uppercase;
}

.percentage-row-avatar svg {
  width: 100%;
  height: 100%;
}

.percentage-row-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.percentage-row-value {
  font-size: 15px;
}

.percentage-lock-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border: 1.5px solid transparent;
}

.percentage-lock-btn.locked {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--ink);
}

.percentage-lock-btn svg {
  width: 14px;
  height: 14px;
}

.percentage-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  border: 1.5px solid var(--line-15);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  position: relative;
}

.percentage-bar-track::after {
  /* Bigger touch target without changing the look */
  content: "";
  position: absolute;
  inset: -14px 0;
}

.percentage-bar-fill {
  height: 100%;
  background: var(--lime);
  border-right: 1.5px solid var(--ink);
  transition: width 0.12s var(--ease-out);
  box-sizing: border-box;
}

.percentage-bar-fill[style*="width: 0%"] {
  border-right: 0;
}

/* Summary */
.expense-summary-card {
  margin-top: 14px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expense-summary-card:empty {
  display: none;
}

.expense-summary-card .summary-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

.expense-summary-card .summary-impact {
  color: var(--text);
  font-weight: 700;
}

/* Sticky CTA */
.expense-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
  margin-top: 18px;
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}

.expense-delete-btn {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--negative);
  color: var(--negative);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.expense-delete-btn svg {
  width: 20px;
  height: 20px;
}

#cashout-btn {
  border-color: var(--stroke);
  color: var(--text);
}

.expense-save-btn {
  flex: 1;
  height: 54px;
  border-radius: 27px;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 2px solid var(--btn-primary-bg);
  transition: transform 0.12s var(--ease-out), filter 0.15s;
}

.expense-save-btn:active {
  transform: scale(0.97);
}

.expense-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.expense-cancel-link {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  padding: 4px 0 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Expense history footer (edit mode) */
.expense-history {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1.5px dashed var(--line-12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expense-history-created {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.expense-history-created strong {
  color: var(--text);
  font-weight: 800;
}

.expense-history-avatar,
.history-avatar {
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transform: rotate(-6deg);
  flex: none;
  overflow: hidden;
  text-transform: uppercase;
}

.expense-history-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

.history-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.expense-history-avatar svg,
.history-avatar svg {
  width: 100%;
  height: 100%;
}

.expense-history-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--card);
  border: 2px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
}

.expense-history-open:active {
  transform: translate(1px, 1px);
}

/* Expense history sheet (timeline) */
.history-list {
  max-height: 60vh;
  overflow-y: auto;
}

.history-item {
  display: flex;
  gap: 12px;
}

.history-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.history-line {
  width: 2px;
  flex: 1;
  min-height: 10px;
  background: var(--line-12);
  margin: 4px 0;
  border-radius: 1px;
}

.history-body {
  flex: 1;
  min-width: 0;
  padding: 5px 0 14px;
}

.history-who {
  font-size: 14px;
  line-height: 1.35;
}

.history-who strong {
  font-weight: 800;
}

.history-who span {
  font-weight: 600;
}

.history-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
}

.history-changes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.history-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}

.history-change-field {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 82px;
  flex: none;
}

.history-change-from {
  font-weight: 600;
  color: var(--text-faint);
  text-decoration: line-through;
  overflow-wrap: anywhere;
}

.history-change-arrow {
  color: var(--text-muted);
}

.history-change-to {
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Category sheet */
.modal-category .category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: 4px;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 16px;
  background: var(--card);
  border: 2px solid var(--line-12);
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.category-btn:active {
  transform: translate(1px, 1px);
}

.category-btn.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.category-btn-icon {
  font-size: 24px;
}

.category-btn-label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* ======================
   Auth (login, signup, join)
   ====================== */
.auth-screen {
  min-height: 100dvh;
}

.auth-container {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  max-width: 440px;
  margin: 0 auto;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 28px;
  text-align: center;
}

.brand-link {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 8px;
}

.auth-logo {
  width: auto;
  height: 60px;
  transform: rotate(-4deg);
  margin-bottom: 2px;
}

.auth-logo--small {
  height: 46px;
}

.auth-title {
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.auth-title--page {
  font-size: 28px;
}

.auth-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.auth-card {
  width: 100%;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-auth);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-tabs {
  display: flex;
  gap: 8px;
}

.auth-tab {
  flex: 1;
  height: 46px;
  border-radius: var(--r-tile);
  background: var(--input-bg);
  border: 2px solid var(--line-12);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  transition:
    background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    transform 0.12s var(--ease-out);
}

.auth-tab svg {
  display: none;
}

.auth-tab.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--ink);
}

.auth-tab:active {
  transform: translate(1px, 1px);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-input-group input {
  background: var(--input-bg);
}

.auth-otp-input {
  text-align: center;
  font-family: var(--font-money);
  font-size: 22px;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.auth-otp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.auth-otp-info svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.auth-submit-btn {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--btn-primary-bg);
  transition: transform 0.12s var(--ease-out), filter 0.15s;
}

.auth-submit-btn svg {
  display: none;
}

.auth-submit-btn:active {
  transform: scale(0.97);
}

.auth-submit-btn.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.auth-submit-btn.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--btn-primary-fg);
  border-color: var(--btn-primary-fg) transparent var(--btn-primary-fg) transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.auth-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line-10);
  border-radius: 1px;
}

.auth-divider span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.auth-alt-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: 2px solid var(--stroke);
  background: transparent;
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease-out), background-color 0.15s;
}

.auth-alt-btn:active {
  transform: scale(0.97);
}

.auth-card .btn-outline {
  width: 100%;
  height: 50px;
  border-radius: 25px;
}

.passkey-login-hint,
.passkey-not-supported {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* Join */
.join-group-info {
  text-align: center;
  padding: 4px 0 8px;
}

.join-group-name {
  font-size: 24px;
}

.join-login-prompt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
}

.join-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.join-buttons .btn {
  width: 100%;
  height: 50px;
}

#join-accept-btn {
  width: 100%;
  height: 54px;
  border-radius: 27px;
  font-size: 16px;
}

/* ======================
   Profile
   ====================== */
.profile-hero {
  padding: 16px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.profile-avatar-wrapper {
  position: relative;
  margin-bottom: 4px;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--tint-lime);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
  text-transform: uppercase;
}

.profile-avatar svg {
  width: 100%;
  height: 100%;
}

.profile-avatar-refresh {
  position: absolute;
  right: -8px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-refresh svg {
  width: 14px;
  height: 14px;
}

.profile-hero-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.profile-hero-email {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: -8px;
}

.profile-hero .btn {
  height: 38px;
  padding: 0 20px;
  font-size: 13.5px;
}

.profile-hero .btn svg {
  display: none;
}

.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-section-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.profile-section .btn-small {
  height: 36px;
  padding: 0 14px;
}

.profile-edit-card {
  padding: 16px;
}

.profile-edit-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-edit-input-group label {
  font-size: 13.5px;
  font-weight: 800;
}

.profile-edit-email {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.profile-edit-actions {
  display: flex;
  gap: 10px;
}

.profile-edit-actions .btn {
  flex: 1;
  height: 48px;
}

.setting-row,
.notification-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.setting-label {
  font-weight: 700;
  font-size: 14.5px;
}

.setting-desc {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

#notification-status {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: -6px;
}

#notification-status a {
  font-weight: 800;
}

/* Language */
.language-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.language-row .select-wrapper {
  flex: none;
}

.language-row .picker-trigger {
  height: 36px;
  width: auto;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 14px;
}

#current-language-display {
  display: none;
}

/* Passkeys */
.passkey-add-link {
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
  padding: 4px 0;
  background: none;
  border: 0;
}

.passkey-add-link svg {
  display: none;
}

.passkeys-list {
  display: flex;
  flex-direction: column;
}

.passkeys-list:empty {
  display: none;
}

.passkey-item {
  padding: 10px 0;
  border-bottom: 1.5px dashed var(--line-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.passkey-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.passkey-info {
  min-width: 0;
}

.passkey-name {
  font-weight: 700;
  font-size: 14.5px;
}

.passkey-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.passkey-actions {
  display: flex;
  gap: 6px;
}

.profile-empty {
  border: 0;
  padding: 0;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.profile-empty-icon {
  display: none;
}

.profile-empty-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-muted);
}

.profile-empty-hint {
  display: none;
}

/* Danger zone */
.profile-section-danger {
  background: transparent;
  border: 2px dashed oklch(0.55 0.2 25 / 0.5);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-section-danger .profile-section-header {
  flex: 1;
}

.profile-section-danger .profile-section-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  color: var(--negative);
}

.profile-section-danger .profile-section-subtitle {
  font-size: 12.5px;
}

.danger-link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--negative);
  background: none;
  border: 0;
  padding: 6px 0;
  white-space: nowrap;
  flex: none;
}

.danger-link svg {
  display: none;
}

.app-version {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 16px 0 4px;
}

.app-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 0 8px;
}

.app-links a {
  color: var(--text-faint);
  text-decoration: underline;
}

.delete-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--negative);
  font-weight: 600;
  font-size: 14px;
}

.delete-warning svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.delete-requirements {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ======================
   Invitations view
   ====================== */
.invitations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invitation-item {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.invitation-group {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
}

.invitation-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.invitation-expired,
.invitation-expiring {
  margin-left: 6px;
  font-weight: 800;
  color: var(--negative);
}

.invitation-actions {
  display: flex;
  gap: 8px;
}

/* Invite links sheet */
.invite-link-create {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.invite-link-options {
  display: flex;
  gap: 10px;
}

.invite-link-options .form-group {
  flex: 1;
}

.invite-links-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-link-item {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-link-url {
  font-family: var(--font-money);
  font-size: 12.5px;
  word-break: break-all;
}

.invite-link-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.invite-link-actions {
  display: flex;
  gap: 8px;
}

.invite-links-loading {
  display: flex;
  justify-content: center;
  padding: 12px;
}

/* ======================
   Admin
   ====================== */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 10px 0 20px;
}

.stat-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
}

.stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

#admin-view .card {
  margin-bottom: 8px;
}

#admin-view .section-title {
  margin: 10px 0;
}

input.admin-search-input {
  height: 46px;
  border-radius: 23px;
}

.admin-user-item,
.admin-group-item,
.admin-announcement-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
}

.admin-user-name {
  font-weight: 800;
}

.admin-user-email,
.admin-user-meta,
.admin-announcement-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-user-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.admin-user-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.admin-user-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  text-transform: uppercase;
}

.badge-banned,
.badge-critical {
  background: var(--negative);
  color: #fff;
  border-color: var(--negative);
}

.badge-unverified,
.badge-warning {
  background: var(--warning);
}

.badge-info,
.badge-event-type {
  background: var(--tint-violet);
}

.admin-group-row {
  display: flex;
  flex-direction: column;
}

.admin-group-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-flush-btn {
  height: 46px;
  padding: 0 14px;
  border-radius: 23px;
  border: 2px solid var(--negative);
  color: var(--negative);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.admin-announcement-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.admin-announcement-message {
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-announcement-actions {
  display: flex;
  gap: 6px;
}

.admin-event-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.admin-event-ts {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-event-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-event-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--input-bg);
  border: 1.5px solid var(--line-12);
}

.admin-event-details {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-event-details code,
.step-content code {
  font-family: var(--font-money);
  font-size: 11.5px;
}

.admin-event-meta summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.admin-event-meta pre {
  font-size: 11px;
  overflow-x: auto;
  padding: 8px;
  border-radius: 10px;
  background: var(--input-bg);
  margin-top: 6px;
}

.admin-modal-user-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-modal-user-main h3 {
  font-size: 20px;
}

.admin-modal-user-email,
.admin-modal-user-id {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  margin-bottom: 14px;
}

.admin-detail-item {
  display: flex;
  flex-direction: column;
}

.admin-detail-item .label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.admin-detail-item .value {
  font-weight: 700;
}

.admin-modal-section {
  margin-bottom: 14px;
}

.admin-modal-section h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

.admin-activity-list .activity-item,
.invite-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1.5px dashed var(--line-12);
  font-size: 13px;
}

.activity-date,
.invite-date {
  color: var(--text-muted);
  font-weight: 600;
}

.invite-status.accepted {
  color: var(--positive);
  font-weight: 800;
}

.invite-status.pending {
  color: var(--text-muted);
  font-weight: 800;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.admin-user-actions .btn {
  flex: 1 1 45%;
  height: 44px;
  font-size: 13.5px;
}

.empty-state-small {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
}

/* ======================
   iOS help sheet
   ====================== */
.ios-help-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.ios-help-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-number {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  transform: rotate(-6deg);
}

.step-content strong {
  font-weight: 800;
}

.step-content p {
  font-size: 13px;
}

.ios-help-note {
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px dashed var(--line-20);
  font-size: 13.5px;
}

/* ======================
   Banners (offline, announcements, update)
   ====================== */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
}

.announcement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--lime);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.announcement-warning {
  background: var(--warning);
}

.announcement-critical {
  background: var(--negative);
  color: #fff;
  border-color: var(--negative);
}

.announcement-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.announcement-banner .btn-small,
.update-banner .btn-small {
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 2px solid currentColor;
  font-weight: 800;
  font-size: 12.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: inherit;
}

.announcement-dismiss-btn {
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  color: inherit;
}

.update-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 1300;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--lime);
  font-weight: 700;
  font-size: 13.5px;
}

.update-banner .btn-small {
  color: var(--lime);
}

/* ======================
   Domain move (old address only)
   ====================== */
.moved-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

.moved-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.moved-card h1 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}

.moved-card p {
  margin: 0;
  line-height: 1.45;
}

.moved-cta {
  width: 100%;
  text-decoration: none;
  justify-content: center;
}

.moved-hint {
  font-size: 13px;
}

.moved-stay {
  background: none;
  border: none;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 13px;
  padding: 8px;
}

/* ======================
   Legacy hooks kept for compatibility
   ====================== */
.actions-row {
  display: flex;
  gap: 10px;
}

.hero-status-card.positive,
.hero-status-card.negative {
  /* state classes still applied by JS, colour lives on the copy */
}

.balance-item,
.member-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.balance-admin-badge,
.member-role.admin {
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  margin-left: 6px;
}

#expense-form textarea:disabled {
  opacity: 0.6;
}

/* Legal pages */
.legal-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px;
}

.legal-content h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.legal-content h2 {
  font-size: 20px;
  margin: 24px 0 8px;
}

.legal-content p,
.legal-content li {
  margin-bottom: 8px;
  color: var(--text);
}

/* ======================
   Motion preferences
   ====================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ======================
   Responsive
   ====================== */
@media (min-width: 600px) {
  .modal {
    border-radius: var(--r-sheet);
    border: 2.5px solid var(--stroke);
    margin-bottom: 24px;
    max-height: calc(100dvh - 64px);
  }

  .modal-overlay {
    align-items: center;
  }

  .fab,
  .fab-groups {
    right: max(20px, calc(50% - 280px + 20px));
  }
}

@media (max-width: 360px) {
  .hero-amount,
  .currency-balance-line {
    font-size: 44px;
  }

  .amount-input {
    font-size: 60px;
  }

  .expense-split-btn {
    font-size: 12.5px;
  }
}

/* Google sign-in (new address) */
.auth-google-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}
.auth-submit-btn.auth-google-btn {
  background: #fff;
  color: #1f1f1f;
  border-color: oklch(0.85 0.01 255);
}
.auth-submit-btn.auth-google-btn svg.auth-google-mark {
  display: inline-block;
  flex: 0 0 auto;
}
.auth-hint {
  font-size: 13px;
  text-align: center;
  margin: 0;
}
#register-moved,
#register-google,
#welcome-google {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#register-moved.hidden,
#register-google.hidden,
#welcome-google.hidden {
  display: none;
}
#register-moved-link {
  text-decoration: none;
}
#auth-view.google-signup #auth-footer {
  display: none;
}