@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --accent: #FFFFFF;
  --accent-dark: #DCE9F7;
  --accent-soft: rgba(255, 255, 255, 0.30);
  --today: #F2A63B;
  --track: rgba(255, 255, 255, 0.14);
  --bar: rgba(255, 255, 255, 0.34);
  --over: #FFFFFF;
  --bg: #07162B;
  --sheet: #0C2140;
  --card: rgba(255, 255, 255, 0.07);
  --card-edge: rgba(255, 255, 255, 0.10);
  --ink: #FFFFFF;
  --ink-soft: #B9C5D8;
  --white: #0A2A4F;
  --navy: #0A3566;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
  --radius: 20px;
  --font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

button { font-family: inherit; }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  /* inner screens: a short, deep blue fade. Home and Expenses get the full azure gradient. */
  background: linear-gradient(180deg, #0A3566 0px, #07162B 220px) no-repeat #07162B;
}
#app[data-view="dashboard"],
#app[data-view="expenses"],
#app[data-view="tools"],
#app[data-view="profile"] {
  background: linear-gradient(180deg, #5CC8FF 0px, #0B84D8 140px, #0A3566 330px, #07162B 520px) no-repeat #07162B;
}
.hidden { display: none !important; }

.view { padding: 0 20px 24px; }
.view.hidden { display: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top)) 0 12px;
  gap: 8px;
}
.topbar h1 { font-size: 22px; }
.topbar-spacer { width: 40px; }
.topbar-gap { width: 44px; flex: none; }

.month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: none;
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:active { background: var(--card-edge); }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 8px;
}
.ring { transition: transform 120ms ease-out; }

.ring { position: relative; display: inline-block; }
.ring svg { position: absolute; top: 0; left: 0; overflow: visible; }
.ring-center svg { position: static; }
.ring-center {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
}

.ring-amount {
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
.ring-sub {
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.2;
}

.wbtn {
  height: 44px; min-width: 44px; border-radius: 999px; background: #FFFFFF; color: var(--navy);
  border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font); font-size: 15px; font-weight: 700; padding: 0 14px; cursor: pointer; flex: none;
}
.wbtn.round { width: 44px; padding: 0; }
.month-nav.wbtn { padding: 0 2px; gap: 0; font-size: 15px; font-weight: 700; }
.nav-arrow {
  width: 34px; height: 44px; border: 0; background: transparent; color: var(--navy);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.nav-arrow .icon { width: 16px; height: 16px; stroke-width: 2.3; }
.currency-pill.wbtn, .currency-pill.wbtn.active-thb { background: #FFFFFF; color: var(--navy); border: 0; font-size: 16px; font-weight: 700; }

.dial-wrap { width: 220px; height: 220px; margin: 26px auto 0; position: relative; cursor: pointer; transition: transform 120ms ease-out; }
.dial-wrap:active { transform: scale(0.985); }
.dial-wrap svg { display: block; }
.dial-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 0 24px;
}
.dial-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.dial-amount small { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dial-amount.long { font-size: 30px; }
.dial-amount.long small { font-size: 16px; }
.dial-sub { font-size: 13px; }

.facts { display: flex; height: 56px; margin-top: 16px; }
.facts > div {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.facts > div:first-child { border-left: 0; }
.facts span { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.facts strong { font-size: 18px; font-weight: 700; white-space: nowrap; }

.today-card {
  background: var(--card);
  border-radius: 24px;
  padding: 16px;
  margin-top: 16px;
}
.today-card.hidden { display: none; }
.today-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.today-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.today-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--today); display: inline-block; }
.today-amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.week-bars { display: flex; align-items: flex-end; gap: 6px; }
.week-bars div { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 16px; }
.week-bars i { width: 100%; border-radius: 4px; background: var(--bar); display: block; }
.week-bars .now i { background: var(--today); }
.week-bars .off i { width: 4px; height: 4px !important; border-radius: 50%; background: var(--accent-soft); }
.week-bars div { width: 18px; }
.week-bars span { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.week-bars .now span { color: var(--ink); font-weight: 800; }
.today-toggle {
  width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; border-top: 1px solid var(--card-edge);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.today-toggle .icon { width: 18px; height: 18px; stroke: var(--ink-soft); stroke-width: 2; }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-list.hidden { display: none; }
.today-list .today-row:first-child { margin-top: 10px; }
.today-row { border-top: 1px solid var(--card-edge); }
.today-row button {
  width: 100%; min-height: 44px; padding: 10px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: transparent; border: 0; font: inherit; font-size: 15px; color: inherit;
  text-align: left; cursor: pointer;
}
.today-note { min-width: 0; flex: 1; }
/* a small arrow says the entry opens */
.today-chevron { width: 16px; height: 16px; flex: none; align-self: center; stroke: var(--ink-soft); stroke-width: 2; margin-left: -4px; }
.today-note small { display: block; font-size: 12px; color: var(--ink-soft); }
.today-row strong { font-weight: 700; white-space: nowrap; text-align: right; }
.today-row strong small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.today-empty { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--card-edge); font-size: 14px; color: var(--ink-soft); }

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
/* each category in its own box, with space between them */
.category-card {
  background: var(--card);
  border: 0;
  border-radius: 20px;
  min-height: 78px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 120ms ease-out;
  font: inherit;
  text-align: left;
  color: inherit;
  min-width: 0;
}
.category-card:active { transform: scale(0.97); }
.cat-mini { position: relative; width: 46px; height: 46px; flex: none; }
.cat-mini svg.ring-s { display: block; }
.cat-mini .g { position: absolute; inset: 0; display: grid; place-items: center; }
.cat-art { width: 22px; height: 22px; display: block; }
.cat-art.line { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cat-text { min-width: 0; }
.cat-amount { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.cat-amount.long { font-size: 14px; }
.cat-amount.zero { color: rgba(255, 255, 255, 0.6); }
.cat-over { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.category-card .cat-name { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.82); line-height: 1.2; }

.payment-summary {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 4px 0 20px;
  font-size: 14px;
}
.payment-summary .pay-stat strong {
  display: block;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
}
.payment-summary .pay-stat span { color: var(--ink-soft); }

.inline-add-form {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

input[type="text"], input[type="number"], input[type="date"] {
  font-family: var(--font);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

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

.toggle-group {
  display: flex;
  background: var(--white);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  overflow: hidden;
}
.toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}
.toggle-btn.active {
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:active { background: var(--accent-dark); }

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger {
  background: transparent;
  color: var(--over);
  border: 1px solid var(--over);
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.expense-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expense-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
.expense-row .ex-pay {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.expense-row .ex-pay .icon { width: 15px; height: 15px; }
.expense-row .ex-main { flex: 1; min-width: 0; }
.expense-row .ex-note { font-weight: 600; font-size: 15px; }
.expense-row .ex-date { font-size: 12px; color: var(--ink-soft); }
.expense-row .ex-amount-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.expense-row .ex-amount {
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
}
.expense-row .ex-eur-note {
  font-size: 11px;
  color: var(--ink-soft);
}

.empty-state {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 20px;
  font-size: 14px;
}

#tabbar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 452px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 999px;
  background: rgba(16, 28, 52, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 10;
}
.tab-btn {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.active { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.tab-btn .icon { width: 22px; height: 22px; }

#fab-add {
  flex: none;
  width: 62px;
  height: 62px;
  margin: -12px 8px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--navy);
  border: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  cursor: pointer;
}
#fab-add .icon { width: 26px; height: 26px; stroke: var(--navy); stroke-width: 2.4; }
#fab-add:active { background: var(--accent-dark); }
#fab-add.off { visibility: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 20, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}
.modal-overlay.hidden { display: none; }

.modal-sheet {
  background: var(--sheet);
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--card-edge);
  border-radius: 4px;
  margin: 4px auto 4px;
}
.modal-sheet h2 { font-size: 20px; }
.modal-subheading { font-size: 16px; margin-top: 8px; }
.modal-subtitle { font-size: 13px; color: var(--ink-soft); margin: -6px 0 4px; }

.exchange-rate-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 12px 14px;
}
.exchange-rate-box .rate-text {
  font-size: 14px;
  font-weight: 600;
}
.exchange-rate-box .rate-updated {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 2px;
}

.quick-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quick-input-row input { flex: 1; min-width: 0; }

.mic-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.mic-btn:active { background: var(--card-edge); }
.mic-btn .icon { width: 20px; height: 20px; }

.mic-btn.listening {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  animation: mic-pulse 1.4s ease-out infinite;
}
@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.lang-pill {
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 8px 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.lang-pill:active { background: var(--card-edge); }

.quick-preview {
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 18px;
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  border: 1px solid var(--card-edge);
  background: var(--white);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip .icon { width: 15px; height: 15px; }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.modal-actions > * { flex: 1; }

#budget-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.budget-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.budget-field label {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}
.budget-field input {
  width: 100px;
  text-align: right;
}

.toast {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  z-index: 30;
  box-shadow: var(--shadow);
}
.toast.hidden { display: none; }

.insight-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 14px;
}
.insight-row .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.insight-row.up .icon { stroke: var(--over); }
.insight-row.down .icon { stroke: var(--accent); }

.analysis-grid-wrap { overflow-x: auto; }
table.analysis-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
table.analysis-grid th, table.analysis-grid td {
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}
table.analysis-grid th {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 11px;
}
table.analysis-grid td.row-label {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
table.analysis-grid td.cell {
  border-radius: 8px;
}
.cell-over { background: var(--over); color: var(--white); font-weight: 600; }
.cell-over-light { background: #9CC9F5; color: var(--white); font-weight: 600; }
.cell-under { background: var(--track); color: var(--ink); }
.cell-empty { background: transparent; color: var(--card-edge); }

.who-paid-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.who-paid-card h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
}
.who-paid-bar {
  display: flex;
  height: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-edge);
  margin-bottom: 12px;
}
.who-paid-segment { height: 100%; }
.who-paid-segment.a { background: #5CC8FF; }
.who-paid-segment.b { background: var(--ink); }
.who-paid-segment.empty { width: 100%; background: var(--card-edge); }
.who-paid-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
}
.who-paid-stat { display: flex; align-items: center; gap: 6px; }
.who-paid-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.who-paid-dot.a { background: #5CC8FF; }
.who-paid-dot.b { background: var(--ink); }

.summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-row {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 12px 14px;
}
.summary-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}
.summary-row-label .icon { width: 18px; height: 18px; stroke: var(--ink); flex-shrink: 0; }
.summary-row-amount {
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
}
.summary-row-split {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.identity-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.identity-screen.hidden { display: none; }
.identity-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.identity-card h1 {
  font-size: 26px;
  margin-bottom: 6px;
}
.identity-card > p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 24px;
}
.identity-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
}
.identity-btn:active { background: var(--card-edge); }
.identity-btn span:first-child {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.identity-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.identity-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 16px;
}

.currency-pill {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 6px 11px;
  cursor: pointer;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.currency-pill.active-thb {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.loans-section-title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 10px;
}
.loan-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.loan-card.settled {
  opacity: 0.55;
  background: transparent;
  border-color: var(--card-edge);
}
.loan-note {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}
.loan-date { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.loan-summary { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.loan-amount {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.btn-settle {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-settle:active { background: var(--accent-dark); }

.settled-toggle {
  width: 100%;
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-soft);
  margin-top: 8px;
  text-align: left;
}
.settled-list { margin-top: 8px; }
/* ==========================================================================
   Moments (trips) and search. Added 2 August 2026.
   ========================================================================== */

.strip-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.strip-label span {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.strip-label i { flex: 1; height: 1px; background: var(--card-edge); display: block; }

.strip-cards { display: flex; flex-direction: column; gap: 8px; }

.moment-card {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--accent);
  border-radius: 16px; padding: 13px 15px;
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.12s ease, background 0.12s ease;
}
.moment-card:active { transform: scale(0.98); background: var(--card); }
.mc-emoji { font-size: 22px; line-height: 1; }
.mc-text { flex: 1; min-width: 0; }
.mc-name { display: block; font-weight: 600; font-size: 15px; }
.mc-date { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.mc-amt {
  font-family: var(--font); font-weight: 600; font-size: 17px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- trip detail. Same anatomy as the category screen. --- */
.moment-head { text-align: center; margin: 6px 0 18px; }
.moment-total {
  font-family: var(--font); font-weight: 600; font-size: 40px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.moment-meta { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.moment-split {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px;
}
.ms-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.ms-row:last-child { margin-bottom: 0; }
.ms-bar {
  height: 7px; border-radius: 4px; background: var(--track);
  overflow: hidden; margin: 4px 0 10px;
}
.ms-bar em { display: block; height: 100%; background: var(--accent); }
.ms-diff { color: var(--ink-soft); }

.moment-dropped {
  font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; text-align: center;
}
.moment-dropped.hidden { display: none; }

.drop-btn {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--card-edge); background: var(--bg);
  color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer;
  margin-left: 6px;
}
.drop-btn:active { background: var(--card); }

/* --- the question --- */
.mp-head { text-align: center; margin-bottom: 16px; }
.mp-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 6px;
}
.mp-head h2 {
  font-family: var(--font); font-weight: 600; font-size: 22px;
  margin: 0 0 8px;
}
.mp-why { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.mp-list {
  list-style: none; margin: 0 0 4px; padding: 0;
  max-height: 168px; overflow-y: auto;
}
.mp-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid var(--card-edge);
  font-size: 13.5px;
}
.mp-list li:last-child { border-bottom: 0; }
.mp-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.mp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 2px 14px; border-top: 1.5px solid var(--ink);
  margin-bottom: 16px; font-size: 14px;
}
.mp-total strong {
  font-family: var(--font); font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.mp-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#moment-name {
  width: 100%; padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--card-edge); background: var(--white);
  font: inherit; font-size: 16px; color: var(--ink); margin-bottom: 12px;
}
#moment-name:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.emoji-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.emoji-chip {
  width: 40px; height: 40px; border-radius: 12px; font-size: 19px; cursor: pointer;
  border: 1.5px solid var(--card-edge); background: var(--white); line-height: 1;
}
.emoji-chip.active { border-color: var(--accent); background: var(--card); }

.mp-dates { display: flex; gap: 10px; margin-bottom: 16px; }
.mp-dates label {
  flex: 1; font-size: 12px; color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 5px;
}
.mp-dates input {
  padding: 11px 12px; border-radius: 12px; border: 1px solid var(--card-edge);
  background: var(--white); font: inherit; font-size: 15px; color: var(--ink);
}

.mp-actions { display: flex; gap: 10px; margin-top: 10px; }
.btn-quiet {
  flex: 1; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--card-edge); background: transparent;
  font: inherit; font-size: 14px; color: var(--ink-soft);
}
.btn-quiet:active { background: var(--card); }

/* --- Moments tab and the join toast --- */
.moments-summary {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px; text-align: center;
}
.moments-summary strong {
  display: block; font-family: var(--font); font-weight: 600;
  font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.moments-summary span { font-size: 13px; color: var(--ink-soft); }

.moments-year { margin-bottom: 20px; }
.moments-year:last-child { margin-bottom: 0; }

.moment-toast {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.moment-toast.hidden { display: none; }
.moment-toast button {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; padding: 0;
}

/* --- search --- */
.search-bar {
  flex: 1; min-width: 0; height: 48px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 0 14px 0 16px; background: transparent;
}
.search-bar > .icon { width: 20px; height: 20px; flex: none; color: rgba(255, 255, 255, 0.85); }
.search-bar:focus-within { border-color: #FFFFFF; }
#dash-search {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 0; outline: none; width: auto;
}
#dash-search::placeholder { color: rgba(255, 255, 255, 0.85); }
#dash-search::-webkit-search-cancel-button { display: none; }
#search-clear {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 22px; line-height: 1; padding: 0 2px;
}
.search-bar.hidden { display: none; }

/* The dashboard bar carries two controls on the left and one on the right. With
   space-between the month label drifts off centre by the difference between the two
   sides. Giving both edge groups flex: 1 from a zero basis makes them share the
   leftover space equally, so the month sits optically centred whatever flanks it.
   Scoped to .topbar-dash: every other screen still uses plain space-between. */
/* Base rule, deliberately not scoped: an older cached index.html has the search
   glyph inside .topbar-right, and without this the two controls overlap. */
.topbar-left,
.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-dash { display: flex; align-items: center; }
.topbar-dash .topbar-left,
.topbar-dash .topbar-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.topbar-dash .topbar-right { justify-content: flex-end; }
.topbar-dash .month-nav { flex: 0 0 auto; }

/* both left hand controls must read as one pair: identical box, identical glyph */
.topbar-left .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
.topbar-dash .topbar-left { gap: 4px; }
.topbar-dash .month-nav { gap: 0; }
.topbar-dash .month-nav .icon-btn { width: 34px; height: 44px; background: transparent; }
.topbar-dash .month-nav .icon-btn:active { background: var(--card); }
.currency-pill { min-height: 44px; }
/* a long month name (September, November) must still leave room for the buttons on a small phone */
@media (max-width: 380px) { .topbar-dash .month-nav { font-size: 15px; } }
.topbar-left .icon-btn .icon { width: 20px; height: 20px; }
#btn-search-toggle[aria-expanded="true"] {
  background: var(--accent); color: var(--white);
}

.search-results.hidden { display: none; }
.search-summary {
  background: var(--card); border-radius: var(--radius);
  padding: 15px; margin-bottom: 16px; text-align: center;
}
.search-summary strong {
  display: block; font-family: var(--font); font-weight: 600;
  font-size: 27px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.search-summary span { font-size: 13px; color: var(--ink-soft); }
.search-results .expense-list { margin: 0 0 18px; }

/* ==========================================================================
   Azure redesign, 10 October 2026: the Expenses tab, Tools, and dark overrides.
   ========================================================================== */

.exp-hero { text-align: center; padding: 96px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.exp-cap { font-size: 15px; }
.exp-amount { font-size: 60px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.exp-amount small { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.exp-amount.long { font-size: 42px; }
.exp-amount.long small { font-size: 20px; }
.exp-pill {
  margin-top: 14px; height: 36px; padding: 0 16px; border-radius: 999px;
  background: rgba(7, 22, 43, 0.45); display: inline-flex; align-items: center; font-size: 14px; font-weight: 600;
}
.exp-tools {
  display: flex; gap: 10px; align-items: center;
  position: sticky; top: calc(68px + env(safe-area-inset-top)); z-index: 8;
  margin: 0 -20px; padding: 8px 20px;
}
/* once the big number is gone, search and filters stay under the small bar */
.exp-tools.stuck { background: rgba(8, 26, 52, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.glass-btn {
  width: 48px; height: 48px; border-radius: 50%; flex: none; position: relative;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); color: #FFFFFF;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.glass-btn .icon { width: 20px; height: 20px; }
.glass-btn.on { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
#search-clear { width: 44px; height: 44px; margin-right: -10px; }

.exp-filters { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.exp-chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.exp-chip-row > span { font-size: 12px; font-weight: 600; color: var(--ink-soft); width: 62px; flex: none; }
.exp-chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent; color: #FFFFFF; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.exp-chip[aria-pressed="true"] { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.exp-sum {
  margin-top: 12px; background: var(--card); border-radius: 18px; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-soft);
}
.exp-sum strong { color: var(--ink); font-size: 18px; font-weight: 700; }

.exp-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 4px 8px; }
.exp-day-head h2 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.exp-day-head span { font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.exp-day { list-style: none; margin: 0; padding: 4px 16px; background: var(--card); border-radius: 24px; }
.exp-row + .exp-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.exp-row button {
  width: 100%; min-height: 64px; padding: 8px 0; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.exp-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; flex: none; }
.exp-mark svg { width: 22px; height: 22px; display: block; }
.exp-main { flex: 1; min-width: 0; }
.exp-main b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-main small { display: flex; font-size: 13px; color: var(--ink-soft); white-space: nowrap; min-width: 0; }
/* a long category name gives way, who paid and how always stays whole */
.exp-main small .c { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.exp-main small .w { flex: none; white-space: pre; }
.exp-amt { text-align: right; white-space: nowrap; flex: none; }
.exp-amt b { display: block; font-size: 16px; font-weight: 600; }
.exp-amt small { font-size: 13px; color: var(--ink-soft); }
.exp-empty { margin-top: 20px; text-align: center; font-size: 14px; color: var(--ink-soft); padding: 28px 16px; background: var(--card); border-radius: 24px; }

/* after scrolling past the big number: a small bar with the total and a way back up */
.exp-sticky {
  position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 9;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
  background: rgba(8, 26, 52, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.exp-sticky-amount { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.exp-sticky-cap { font-size: 12px; color: var(--ink-soft); }

.tools-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tool-row {
  width: 100%; min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--card); border: 0; border-radius: 20px; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tool-ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); display: grid; place-items: center; flex: none; }
.tool-ico .icon { width: 20px; height: 20px; }
.tool-text { flex: 1; min-width: 0; }
.tool-text b { display: block; font-size: 16px; font-weight: 700; }
.tool-text small { font-size: 13px; color: var(--ink-soft); }
.tool-ch { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }

/* dark overrides for older pieces */
.topbar h1 { font-size: 24px; font-weight: 800; }
.moment-toast button { color: var(--white); }
.search-summary { background: var(--card); margin-top: 16px; }
.search-results .expense-list { margin: 0 0 18px; }
.strip-label { margin-top: 16px; }

/* reviewer pass, 10 October 2026 */
input::placeholder { color: var(--ink-soft); opacity: 1; }
input[type="text"], input[type="number"], input[type="date"], #moment-name, .mp-dates input, .toggle-group { border-color: rgba(255, 255, 255, 0.34); }
.icon-btn { width: 44px; height: 44px; }

/* add and edit sheet, 12 October 2026: the amount leads, one wide save button */
.sheet-form { gap: 10px; max-height: 93dvh; }
.sheet-form form { display: flex; flex-direction: column; gap: 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 22px; font-weight: 800; }
.sheet-close {
  width: 44px; height: 44px; margin-right: -6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 50%;
  color: var(--ink); cursor: pointer;
}
.sheet-close .icon { width: 18px; height: 18px; }
.sheet-form .quick-preview:empty { display: none; }
.amt-row {
  display: flex; align-items: flex-end; gap: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 20px; padding: 14px 14px 14px 18px;
}
.amt-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.field-cap { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.amt-field input[type="number"] {
  border: none; background: transparent; padding: 0; border-radius: 0;
  font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.amt-field input[type="number"]:focus { outline: none; }
.amt-row:focus-within { border-color: var(--accent); }
.amt-field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.amt-cur { flex: none; min-width: 132px; }
.amt-cur .toggle-btn { padding: 11px 9px; min-height: 44px; font-size: 14px; }
.sheet-form .field-label { gap: 7px; }
.sheet-form .form-row { gap: 12px; }
.sheet-form .form-row > * { min-width: 0; }
.sheet-form .toggle-btn { min-height: 46px; }
/* categories as tiles, three across, with the round mark from the Expenses list */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile {
  min-height: 84px; min-width: 0; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px;
  color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer;
}
.tile-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; flex: none; }
.tile-mark svg { width: 19px; height: 19px; display: block; }
/* a long name takes a second line before it is ever cut */
.tile b { font-weight: 500; max-width: 100%; text-align: center; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tile.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.tile.active b { font-weight: 600; }
/* the mic and its language sit together inside the quick line */
.sheet-form .quick-input-row { position: relative; }
.sheet-form .quick-input-row input { padding-right: 104px; height: 52px; }
.sheet-form .quick-input-row.no-voice input { padding-right: 14px; }
.voice-group {
  position: absolute; right: 5px; top: 4px; height: 44px;
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.10); border-radius: 12px;
}
.voice-group .mic-btn { width: 46px; height: 44px; border: none; background: transparent; border-radius: 12px 0 0 12px; }
.voice-group .lang-pill { height: 44px; min-width: 44px; padding: 0 12px 0 10px; border: none; background: transparent; border-radius: 0 12px 12px 0; color: var(--ink); border-left: 1px solid rgba(255, 255, 255, 0.28); }
.voice-group .mic-btn.listening { background: var(--accent); color: var(--white); }
.sheet-form input[type="text"], .sheet-form input[type="date"] { min-height: 48px; }
.btn-wide { width: 100%; min-height: 54px; border-radius: 16px; font-size: 17px; font-weight: 700; margin-top: 4px; }
/* on a short phone the form scrolls and the save button stays in reach */
#form-quick-add .btn-wide { position: sticky; bottom: 0; box-shadow: 0 0 0 10px var(--sheet), 0 22px 0 10px var(--sheet); }
.sheet-form .btn-danger { border: none; min-height: 44px; padding: 8px; font-weight: 500; color: var(--ink-soft); }

/* category screen, 12 October 2026: same shape as the Expenses tab */
#view-category .category-wheel-wrap { padding: 18px 0 0; }
.cat-ring .dial-in { padding: 0 20px; }
.cat-ring .dial-amount { font-size: 32px; }
.cat-ring .dial-amount small { font-size: 17px; }
.cat-ring .dial-amount.long { font-size: 25px; }
.cat-ring .dial-amount.long small { font-size: 14px; }
#category-facts { margin-bottom: 4px; }

/* Stats tab, 12 October 2026: the wheel leads, a tap turns the screen to one category */
.round-gap { width: 44px; flex: none; }
#view-analysis .nav-arrow { width: 44px; }
.stats-period { width: max-content; margin: 14px auto 0; border: 0; background: rgba(255, 255, 255, 0.08); padding: 4px; border-radius: 14px; gap: 2px; overflow: visible; }
.stats-period .toggle-btn { min-width: 84px; min-height: 44px; padding: 0 14px; border-radius: 11px; font-size: 14px; }
.stats-wheel { position: relative; width: 248px; height: 248px; margin: 18px auto 0; }
.stats-wheel > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stats-slice { pointer-events: stroke; cursor: pointer; transition: opacity 200ms ease-out; }
.stats-slice.dim, .stats-mark.dim { opacity: 0.26; }
.stats-mark {
  position: absolute; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF; cursor: pointer;
  box-shadow: 0 0 0 3px #081A33; transform: translate(-50%, -50%); transition: opacity 200ms ease-out;
}
.stats-mark svg { width: 16px; height: 16px; display: block; }
.stats-centre {
  position: absolute; inset: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); padding: 0 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; cursor: pointer;
}
.stats-centre .dial-amount { font-size: 32px; }
.stats-centre .dial-amount small { font-size: 17px; }
.stats-centre .dial-amount.long { font-size: 24px; }
.stats-centre .dial-amount.long small { font-size: 14px; }
.stats-cap { font-size: 13px; color: var(--ink-soft); }
.stats-lines { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; text-align: center; }
.stats-lines div { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.stats-lines .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.stats-lines .soft { color: var(--ink-soft); }
.stats-tiles { margin-top: 18px; }
/* content starts at the top, so marks and amounts share one line across a row and only a long name grows down */
.stats-tile { gap: 3px; justify-content: flex-start; padding-top: 12px; }
.stats-tile .tile-mark { width: 26px; height: 26px; }
.stats-tile .tile-mark svg { width: 14px; height: 14px; }
.stats-tile strong { font-size: 14px; font-weight: 700; white-space: nowrap; }
.stats-tile b { font-size: 12px; color: var(--ink-soft); }
.stats-tile.active b { color: #3B4D6B; font-weight: 500; }
.stats-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stats-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; background: var(--card); border-radius: 22px; }
.stats-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); font-size: 19px; font-weight: 800; }
.stats-person small { display: block; font-size: 13px; color: var(--ink-soft); }
.stats-person-text { min-width: 0; }
.stats-person strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.stats-person strong.long { font-size: 14px; letter-spacing: -0.01em; }
.stats-h { font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 26px 4px 0; }
.stats-h small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.stats-h + .exp-day { margin-top: 12px; }
.stats-tagrow { position: relative; height: 26px; margin-top: 10px; }
.stats-tag { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.14); padding: 3px 8px; border-radius: 8px; }
.stats-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 0 2px; margin-top: 6px; }
.stats-chart i { flex: 1; display: block; min-height: 3px; border-radius: 3px; background: var(--bar); }
.stats-chart.wide { gap: 9px; }
.stats-chart.wide i { border-radius: 6px; }
.stats-chart i.later { height: 3px; background: rgba(255, 255, 255, 0.20); }
.stats-axis { display: flex; margin: 6px 2px 0; font-size: 11px; color: var(--ink-soft); }
.stats-axis span { flex: 1; text-align: center; }
.stats-axis.placed { position: relative; height: 14px; margin: 6px 2px 0; padding: 0 2px; }
.stats-axis.placed span { position: absolute; top: 0; flex: none; transform: translateX(-50%); }
/* one shared set of columns for every row: mark, name, arrow, amount, word */
.stats-cmp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.stats-cmp li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; min-height: 64px; padding: 10px 0; }
.stats-cmp li + li { border-top: 1px solid var(--card-edge); }
.stats-cmp .exp-mark { width: 40px; height: 40px; margin-right: 10px; }
.stats-cmp .exp-mark svg { width: 20px; height: 20px; }
/* a long name breaks between words, then at a syllable, and only as a last resort inside a word */
.stats-cmp li > b { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.2; padding-right: 10px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.stats-arrow { display: grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; }
/* a heavier stroke, so the arrow weighs the same as the bold figures next to it */
.stats-arrow .icon { width: 16px; height: 16px; stroke-width: 2.6; display: block; }
.stats-amount { font-size: 14px; font-weight: 600; white-space: nowrap; text-align: right; margin-right: 6px; }
.stats-word { font-size: 14px; font-weight: 600; white-space: nowrap; }
.stats-same { grid-column: 3 / -1; text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* phones before iOS 16 have no subgrid: each row falls back to one line of its own */
@supports not (grid-template-columns: subgrid) {
  .stats-cmp { display: block; }
  .stats-cmp li { display: flex; }
  .stats-cmp li > b { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .stats-slice, .stats-mark { transition: none; } }
.nav-arrow:disabled { opacity: 0.25; cursor: default; }

/* Settings tab, 12 October 2026: one box per setting, each showing its action */
/* white fails on the brightest blue, so the title up there is navy */
#view-tools .set-title { color: #06213F; font-size: 26px; }
.set-group { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); margin: 20px 4px 8px; }
/* the first group title still sits on the bright blue, so it is navy like the page title */
.set-group.first { font-size: 14px; font-weight: 700; color: #06213F; margin-top: 34px; }
.set-card { background: rgba(7, 22, 43, 0.40); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 14px 16px; margin-top: 10px; }
.set-group + .set-card { margin-top: 0; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.set-head b { font-size: 16px; font-weight: 700; }
.set-head > span { font-size: 13px; color: #DCE7F5; }
.set-marks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.set-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; }
.set-mark svg { width: 16px; height: 16px; display: block; }
.set-big { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.set-big small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #DCE7F5; }
.set-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); margin-top: 12px; overflow: hidden; }
.set-bar i { display: block; height: 100%; border-radius: 4px; background: #FFFFFF; }
.set-people { display: flex; align-items: center; margin-top: 6px; }
.set-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); font-size: 16px; font-weight: 800; box-shadow: 0 0 0 2px #0F2C52; }
.set-avatar + .set-avatar { margin-left: -9px; }
.set-names { margin-left: 12px; font-size: 15px; font-weight: 600; }
.set-note { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #DCE7F5; }
.set-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.set-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.set-btn .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.set-btn.quiet { background: none; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.40); }
.set-head .set-btn { min-height: 44px; margin: -5px 0; }

/* Settings: help buttons and the help sheet */
.set-help { margin-top: 0; }
.set-help .set-btn { flex: 1; justify-content: center; min-height: 50px; border-radius: 16px; padding: 0 8px; gap: 6px; font-size: 13px; white-space: nowrap; }
.help-lead { margin: 0; font-size: 15px; line-height: 1.4; }
.help-mail { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 8px 8px 14px; }
.help-mail b { font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.help-open { justify-content: center; min-height: 50px; border-radius: 14px; text-decoration: none; font-size: 15px; }

/* Settings sheets: categories, currencies, people */
.who-paid-segment.c, .who-paid-dot.c { background: #8FA3C4; }
.who-paid-segment.d, .who-paid-dot.d { background: #3F5E8C; }
.set-sheet-body { display: flex; flex-direction: column; gap: 14px; }
.set-list { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; padding: 0 12px; }
.set-list.plain { background: none; padding: 0; gap: 10px; }
.set-list > .set-note { padding: 14px 2px; margin: 0; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; width: 100%; border: 0; background: none; color: var(--ink); font-size: 16px; text-align: left; cursor: pointer; }
.set-row + .set-row { border-top: 1px solid var(--card-edge); }
.set-row.static { cursor: default; }
.set-row:disabled { cursor: default; opacity: 1; }
.set-row > b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.set-row > b.code { flex: none; width: 44px; font-weight: 700; }
.set-row .grow { flex: 1; min-width: 0; }
.set-row small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.set-row > small { flex: none; }
.set-row > .icon { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.set-btn.small { min-height: 44px; padding: 0 12px; font-size: 13px; }
.set-fixed { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--card); font-size: 16px; }
.set-fixed span { color: var(--ink-soft); }
.set-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.set-swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; padding: 0; cursor: pointer; }
.set-swatch.active { border-color: #FFFFFF; box-shadow: 0 0 0 2px var(--sheet) inset; }
.set-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.set-icon { aspect-ratio: 1; min-height: 40px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
.set-icon .icon { width: 20px; height: 20px; }
.set-icon.active { border: 2px solid #FFFFFF; }
.set-icon { min-height: 44px; }
.set-inuse { font-size: 12px; color: var(--ink-soft); flex: none; }
.amt-row.stack { flex-wrap: wrap; }
.amt-row.stack .amt-cur { width: 100%; }
.set-note.center { text-align: center; }
.set-rate-row { display: flex; gap: 8px; }
.set-rate-row input { flex: 1; min-width: 0; }
.set-person-row { display: flex; align-items: center; gap: 10px; }
.set-person-row input { flex: 1; min-width: 0; }
.set-person-row .set-avatar { box-shadow: none; }
.set-acts .set-btn { white-space: nowrap; }

/* Text pass, 13 October 2026, after the casa-ux-reviewer's audit of the whole app.
   The scale: 26 page title, 22 sheet title and big value, 18 section title, 16 box title
   and row name, 14 body and buttons, 13 second lines and captions, 12 the smallest label.
   Nothing is smaller than 12, except the tab bar labels on a phone narrower than 350.
   These rules come last so they win over the older sizes. */
/* On a phone with a notch the top bar moves down but the blue did not, so text near the
   top landed on a different shade than in the design. The blue now starts under the notch. */
#app[data-view="dashboard"],
#app[data-view="expenses"],
#app[data-view="tools"],
#app[data-view="profile"] {
  background: linear-gradient(180deg,
    #5CC8FF env(safe-area-inset-top, 0px),
    #0B84D8 calc(140px + env(safe-area-inset-top, 0px)),
    #0A3566 calc(330px + env(safe-area-inset-top, 0px)),
    #07162B calc(520px + env(safe-area-inset-top, 0px))) no-repeat #07162B;
}
/* one section title everywhere */
.set-group, .set-group.first { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); margin: 28px 4px 10px; }
.set-group.first { color: #06213F; }
.stats-h { font-size: 18px; font-weight: 700; }
.exp-day-head h2 { font-size: 18px; font-weight: 700; }
.loans-section-title { font-size: 18px; font-weight: 700; }
.modal-sheet h2 { font-size: 22px; font-weight: 800; }
.modal-sheet h2.modal-subheading { font-size: 18px; font-weight: 700; }
/* no 11 left */
.tab-btn { font-size: 12px; }
@media (max-width: 350px) { .tab-btn { font-size: 11px; } }
.week-bars span { font-size: 12px; }
.stats-axis { font-size: 12px; font-weight: 500; }
/* the words that give a figure its meaning, and second lines */
.facts span { font-size: 13px; font-weight: 500; }
.stats-tile b { font-size: 13px; }
.stats-h small { font-size: 13px; }
.set-row small { font-size: 13px; }
.set-inuse { font-size: 13px; }
.exchange-rate-box .rate-updated { font-size: 13px; }
.today-note small, .today-row strong small { font-size: 13px; }
.exp-sticky-cap { font-size: 13px; }
.loan-date { font-size: 13px; }
.set-help .set-btn { font-size: 14px; }
/* Home category boxes: a little less padding so "Transportation" stays on one line on a
   small phone, and a long made up name breaks at a syllable before it ever runs out */
.category-card { gap: 10px; padding-left: 12px; padding-right: 10px; }
.category-card .cat-name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

/* Currencies box, 13 October 2026: main and other currencies as two labelled parts, each with a small i */
.set-part { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.set-part + .set-part { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 12px; padding-top: 12px; }
.set-part .grow { flex: 1; min-width: 0; }
.set-label { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #DCE7F5; }
.set-info { width: 44px; height: 44px; margin: -12px 0 -12px -6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.set-info::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #DCE7F5; }
.set-info { position: relative; }
.set-none { font-size: 16px; color: #DCE7F5; margin-top: 4px; }
.set-info-text { margin: 0 0 20px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.set-btn.wide { width: 100%; justify-content: center; min-height: 50px; border-radius: 16px; font-size: 16px; }

/* Changing the main currency, 13 October 2026: the rate box and the two buttons of the confirm step */
.set-ratebox { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; padding: 14px 16px; border-radius: 16px; background: var(--card); }
.set-ratebox span, .set-ratebox label { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.set-ratebox b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.set-ratebox input { margin-top: 8px; }
.set-two { display: flex; gap: 10px; }
.set-two .set-btn { flex: 1; width: auto; }
.set-btn:disabled { opacity: 0.45; cursor: default; }

/* a toast as wide as its words, so a short line is never broken in two */
.toast { width: max-content; max-width: calc(100% - 32px); }

/* Profile, 13 October 2026: the screen behind the letter on Home */
/* the size comes from the page title rule of the top bar, 24 between two buttons */
.profile-title { color: #06213F; margin: 0; }
.pro-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 22px; }
.pro-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); font-size: 34px; font-weight: 800; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
.pro-hero h2 { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pro-link { min-height: 44px; margin-top: -6px; padding: 0 14px; border: 0; background: none; color: #EAF3FC; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pro-tones { display: flex; justify-content: center; }
.pro-tone { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.pro-tone i { width: 28px; height: 28px; border-radius: 50%; display: block; }
.pro-tone.on i { box-shadow: 0 0 0 2px #0A3566, 0 0 0 4px #FFFFFF; }
.pro-list { background: rgba(7, 22, 43, 0.40); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 0 16px; margin-top: 10px; }
.pro-value { flex: none; max-width: 55%; font-size: 14px; color: #DCE7F5; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the sellable copy, 13 October 2026 ---------- */

/* one currency: nothing to choose, so the code stands next to the amount as plain text */
.amt-cur.single { min-width: 0; background: none; border-color: transparent; pointer-events: none; }
.amt-cur.single .toggle-btn, .amt-cur.single .toggle-btn.active { background: none; color: var(--ink-soft); font-size: 16px; font-weight: 600; padding: 11px 4px; }

/* Home before the first expense: three ways to begin */
.first-steps { margin-top: 22px; }
.first-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 4px 10px; }
.first-steps .set-list { background: rgba(7, 22, 43, 0.40); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 0 16px; }

/* Settings: the way to wipe the phone is the last and quietest thing on the screen */
.set-reset { display: block; margin: 22px auto 0; color: var(--ink-soft); }

/* the setup wizard: a full screen over the app, on the deep blue of the inner screens */
.setup-screen { position: fixed; inset: 0; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #0A3566 0px, #07162B 260px) no-repeat #07162B; padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); }
.setup-screen.hidden { display: none; }
.setup-card { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.setup-count { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.setup-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: -8px; }
.setup-lead { margin: -6px 0 4px; font-size: 16px; line-height: 1.45; color: #DCE7F5; }
.setup-card input[type="text"] { min-height: 48px; }
.setup-card .toggle-btn { min-height: 46px; }
.setup-names { display: flex; flex-direction: column; gap: 10px; }
.setup-main b { font-size: 18px; font-weight: 800; }
.setup-card .field-label { gap: 7px; }
.setup-card .set-note { margin: 0; }
.setup-card > .set-btn.quiet:not(.wide) { align-self: flex-start; }
.setup-foot { display: flex; gap: 10px; margin-top: 10px; }
.setup-foot .set-btn { flex: 1; min-height: 54px; font-size: 17px; }
.setup-restore { align-self: center; margin-top: 0; }
/* the search total: equal width digits pushed the decimal sign apart from its figures */
.search-summary strong { font-variant-numeric: normal; }
/* a message is only read, never tapped: it must not catch a tap meant for the button under it */
.toast { pointer-events: none; }

/* very big numbers (rupiah, dong): a third, smaller size for the big figures, and a page that can never grow wider than the phone */
.dial-amount.xlong { font-size: 23px; letter-spacing: -0.02em; }
.dial-amount.xlong small { font-size: 13px; }
.cat-ring .dial-amount.xlong, .stats-centre .dial-amount.xlong { font-size: 20px; }
.cat-ring .dial-amount.xlong small, .stats-centre .dial-amount.xlong small { font-size: 12px; }
.exp-amount.xlong { font-size: 34px; }
.exp-amount.xlong small { font-size: 17px; }
.dial-sub { max-width: 170px; margin-left: auto; margin-right: auto; }
#app { overflow-x: clip; }
.today-head > div:first-child { min-width: 0; }
.cat-text { min-width: 0; }
.exp-main { min-width: 0; }