:root {
  --elders: #d93933;
  --elders-dark: #b52228;
  --ink: #111319;
  --muted: #707580;
  --soft: #f4f5f8;
  --line: rgba(20, 23, 31, .10);
  --glass: rgba(255,255,255,.68);
  --glass-strong: rgba(255,255,255,.90);
  --success: #168655;
  --warning: #a56500;
  --danger: #b42318;
  --blue: #0a73c9;
  --purple: #8147a5;
  --shadow: 0 18px 55px rgba(24, 28, 38, .13);
  --soft-shadow: 0 9px 28px rgba(24, 28, 38, .10);
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}

:root[data-theme="dark"] {
--ink: #f5f6f8;
    --muted: #aeb3bd;
    --soft: #14161b;
    --line: rgba(255,255,255,.10);
    --glass: rgba(35, 38, 46, .72);
    --glass-strong: rgba(31, 34, 41, .94);
    --shadow: 0 22px 62px rgba(0,0,0,.38);
    --soft-shadow: 0 10px 30px rgba(0,0,0,.28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #eef0f4; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 9% -6%, rgba(217,57,51,.22), transparent 34%),
    radial-gradient(circle at 98% 13%, rgba(52,110,255,.15), transparent 31%),
    linear-gradient(180deg, #fafafd 0%, #edf0f5 100%);
  padding-bottom: calc(102px + var(--safe-bottom));
}

html[data-theme="dark"] {
background: #101216;
}
html[data-theme="dark"] body {
background:
      radial-gradient(circle at 9% -6%, rgba(217,57,51,.22), transparent 34%),
      radial-gradient(circle at 98% 13%, rgba(52,110,255,.13), transparent 31%),
      linear-gradient(180deg, #17191e 0%, #101216 100%);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: var(--safe-top) 15px 22px;
}

.glass {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.56);
  box-shadow: var(--shadow);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}
html[data-theme="dark"] .glass {
border-color: rgba(255,255,255,.09);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
}
.brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-plate {
  width: 66px;
  height: 43px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--elders);
  box-shadow: 0 10px 24px rgba(217,57,51,.28);
}
.logo-plate img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { min-width: 0; }
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  margin-bottom: 3px;
}
h1 {
  margin: 0;
  font-size: clamp(23px, 6vw, 37px);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.icon-button, .primary-button, .secondary-button, .danger-button, .quiet-button {
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 800;
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.icon-button:active, .primary-button:active, .secondary-button:active, .danger-button:active, .quiet-button:active { transform: scale(.97); }
.icon-button {
  width: 46px;
  padding: 0;
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.primary-button {
  color: #fff;
  background: linear-gradient(145deg, #eb4a43, var(--elders-dark));
  box-shadow: 0 13px 28px rgba(217,57,51,.27);
}
.secondary-button {
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--line);
}
.quiet-button { color: var(--muted); background: transparent; }
.danger-button { color: #fff; background: var(--danger); }

.page { display: none; }
.page.active { display: block; animation: pageIn .22s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.cash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 21px;
}
.cash-hero::before {
  content: "";
  position: absolute;
  width: 285px;
  height: 285px;
  right: -125px;
  top: -165px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,57,51,.29), transparent 68%);
  pointer-events: none;
}
.hero-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.hero-title { font-size: 13px; font-weight: 850; }
.hero-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.metric-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 13px;
  background: rgba(120,120,128,.12);
  border: 1px solid var(--line);
}
.metric-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 850;
}
.metric-toggle button.active {
  color: var(--ink);
  background: var(--glass-strong);
  box-shadow: 0 5px 14px rgba(25,28,38,.10);
}
.hero-total-label {
  margin-top: 23px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-total {
  margin-top: 4px;
  font-size: clamp(37px, 11vw, 64px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
}
.hero-total-note { color: var(--muted); font-size: 11px; margin-top: 8px; }
.cash-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-top: 20px;
}
.cash-segment {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 17px;
  background: rgba(255,255,255,.42);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .cash-segment {
background: rgba(255,255,255,.045);
}
.segment-label {
  min-height: 28px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  font-weight: 820;
}
.segment-value {
  margin-top: 6px;
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.segment-value.green { color: var(--success); }
.segment-value.blue { color: var(--blue); }
.segment-value.red { color: var(--elders); }

.cash-bar {
  height: 8px;
  overflow: hidden;
  display: flex;
  border-radius: 99px;
  margin-top: 13px;
  background: rgba(120,120,128,.12);
}
.cash-bar span { display: block; min-width: 0; transition: width .28s ease; }
.cash-bar .live { background: var(--elders); }
.cash-bar .conditional { background: #4e8bea; }
.cash-bar .unconditional { background: #25a565; }

.section { margin-top: 23px; }
.section-heading {
  margin: 0 4px 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.section-heading span { color: var(--muted); font-size: 11px; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
}
.month-card {
  border-radius: 19px;
  padding: 14px 12px;
  min-height: 103px;
}
.month-name { color: var(--muted); font-size: 10px; font-weight: 800; }
.month-value { margin-top: 9px; font-size: clamp(18px, 5vw, 26px); font-weight: 900; letter-spacing: -.045em; }
.month-note { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.25; }

.list-stack, .card-grid { display: grid; gap: 10px; }
.timeline-card, .attention-card {
  width: 100%;
  min-height: 76px;
  border: 0;
  color: inherit;
  text-align: left;
  border-radius: 20px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.timeline-date, .attention-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(10,115,201,.10);
  color: var(--blue);
  font-weight: 900;
  font-size: 12px;
  text-align: center;
  line-height: 1.05;
}
.attention-icon { font-size: 19px; background: rgba(241,157,0,.13); }
.timeline-copy, .attention-copy { min-width: 0; flex: 1; }
.timeline-address, .attention-title {
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-meta, .attention-meta { color: var(--muted); font-size: 10px; margin-top: 4px; }
.timeline-money {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}
.timeline-status { display: block; color: var(--muted); font-size: 9px; font-weight: 750; margin-top: 4px; }
.due-pill {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--elders);
  background: rgba(217,57,51,.10);
  font-size: 9px;
  font-weight: 900;
}

.mini-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.summary-card {
  padding: 15px;
  border-radius: 20px;
}
.summary-label { color: var(--muted); font-size: 10px; font-weight: 800; }
.summary-value { margin-top: 7px; font-size: 23px; font-weight: 900; letter-spacing: -.04em; }
.summary-note { margin-top: 5px; color: var(--muted); font-size: 9px; }

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-bottom: 11px;
}
.searchbox, .selectbox {
  height: 48px;
  outline: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--glass-strong);
  padding: 0 14px;
  box-shadow: var(--soft-shadow);
}
.selectbox { width: 132px; }
.searchbox:focus, .selectbox:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(217,57,51,.48);
  box-shadow: 0 0 0 4px rgba(217,57,51,.09);
}

.filter-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 1px 10px;
  scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--glass-strong);
  border-radius: 999px;
  min-height: 36px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 820;
}
.filter-chip.active { color: #fff; background: var(--elders); border-color: transparent; }

.listing-card, .future-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.54);
  color: inherit;
  padding: 16px;
  border-radius: 22px;
  transition: transform .16s ease;
}
.listing-card:active, .future-card:active { transform: scale(.99); }
html[data-theme="dark"] .listing-card,
html[data-theme="dark"] .future-card {
border-color: rgba(255,255,255,.08);
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-address { font-size: 15px; font-weight: 900; line-height: 1.25; letter-spacing: -.015em; }
.card-sub { margin-top: 3px; color: var(--muted); font-size: 10px; }
.status-pill, .confidence-pill {
  flex: 0 0 auto;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(120,120,128,.11);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}
.status-pill.uc { background: rgba(10,115,201,.11); color: var(--blue); }
.status-pill.unconditional { background: rgba(22,134,85,.12); color: var(--success); }
.status-pill.settled { background: rgba(129,71,165,.12); color: var(--purple); }
.status-pill.withdrawn { background: rgba(99,107,117,.12); color: #636b75; }
.confidence-pill.likely { background: rgba(10,115,201,.11); color: var(--blue); }
.confidence-pill.very { background: rgba(22,134,85,.12); color: var(--success); }

.people-row {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(120,120,128,.07);
  display: grid;
  gap: 5px;
}
.people-line {
  min-width: 0;
  display: flex;
  gap: 7px;
  font-size: 10px;
}
.people-label { flex: 0 0 auto; color: var(--muted); font-weight: 800; }
.people-names { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 760; }

.card-values {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 11px;
  margin-top: 14px;
}
.value-label { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.value-number { margin-top: 4px; font-size: 18px; font-weight: 900; letter-spacing: -.035em; }
.card-footer {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 9px;
}
.note-preview {
  margin-top: 11px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-state {
  padding: 29px 18px;
  text-align: center;
  color: var(--muted);
  border-radius: 22px;
  line-height: 1.45;
  font-size: 11px;
}
.empty-state strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 5px; }

.settings-card {
  padding: 17px;
  border-radius: 22px;
  margin-bottom: 11px;
}
.settings-card h3 { margin: 0 0 3px; font-size: 16px; }
.settings-card p { margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.52; }

.field-grid { display: grid; gap: 12px; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { color: var(--muted); font-size: 10px; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 47px;
  outline: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  padding: 11px 12px;
}
.field textarea { min-height: 98px; resize: vertical; line-height: 1.45; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
background: rgba(255,255,255,.05);
}

.calculation-preview {
  margin-top: 12px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(22,134,85,.08);
  border: 1px solid rgba(22,134,85,.13);
}
.calc-label { color: var(--muted); font-size: 9px; font-weight: 800; }
.calc-value { margin-top: 4px; color: var(--success); font-size: 21px; font-weight: 900; }
.calc-note { color: var(--muted); font-size: 9px; margin-top: 4px; line-height: 1.35; }

.toggle-row {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}
.toggle-copy strong { font-size: 12px; }
.toggle-copy span { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,.30); transition: .2s; }
.slider::before {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: .2s;
}
.switch input:checked + .slider { background: #28c76f; }
.switch input:checked + .slider::before { transform: translateX(20px); }

.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: var(--safe-bottom);
  transform: translateX(-50%);
  width: min(610px, calc(100% - 22px));
  height: 72px;
  padding: 7px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(250,250,252,.79);
  border: 1px solid rgba(255,255,255,.77);
  box-shadow: 0 18px 55px rgba(20,24,35,.23);
  backdrop-filter: blur(31px) saturate(180%);
  -webkit-backdrop-filter: blur(31px) saturate(180%);
}
html[data-theme="dark"] .bottom-nav {
background: rgba(31,34,41,.84); border-color: rgba(255,255,255,.09);
}
.nav-button {
  border: 0;
  color: var(--muted);
  background: transparent;
  border-radius: 17px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  font-size: 8px;
  font-weight: 800;
}
.nav-icon { font-size: 18px; line-height: 1; }
.nav-button.active { color: var(--elders); background: rgba(217,57,51,.09); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: end;
  padding-top: var(--safe-top);
  background: rgba(15,17,22,.48);
  backdrop-filter: blur(11px);
}
.sheet {
  width: min(780px,100%);
  max-height: calc(100vh - var(--safe-top));
  overflow: auto;
  margin: auto auto 0;
  border-radius: 30px 30px 0 0;
  background: var(--glass-strong);
  padding: 9px 15px calc(25px + var(--safe-bottom));
  box-shadow: 0 -24px 72px rgba(0,0,0,.29);
  border: 1px solid rgba(255,255,255,.46);
}
html[data-theme="dark"] .sheet {
background: rgba(27,29,35,.97); border-color: rgba(255,255,255,.08);
}
.grabber { width: 43px; height: 5px; border-radius: 99px; background: rgba(120,120,128,.35); margin: 2px auto 13px; }
.sheet-head {
  position: sticky;
  z-index: 3;
  top: -9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: inherit;
  padding: 9px 0 12px;
}
.sheet-head h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.sheet-section {
  margin-top: 14px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.33);
}
html[data-theme="dark"] .sheet-section {
background: rgba(255,255,255,.032);
}
.sheet-section-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
}

.sheet-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.sheet-actions .danger-button {
  flex: 2;
}

.sheet-actions .primary-button:last-child {
  flex: 3;
}

.desktop-add { display: none; }

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(90px + var(--safe-bottom));
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  padding: 11px 15px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20,22,27,.88);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  font-size: 11px;
  font-weight: 800;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 720px) {
  .app-shell { padding-left: 24px; padding-right: 24px; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mini-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .field-grid.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-add { display: inline-flex; }
  .mobile-add { display: none; }
}

@media (min-width: 1000px) {
  .dashboard-columns {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 18px;
    align-items: start;
  }
  .dashboard-columns .section { margin-top: 18px; }
}


/* V3 polish */
.logo-plate {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}
.logo-plate img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

.title-emoji {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  border-radius: 9px;
  background: rgba(120,120,128,.10);
  font-size: 14px;
  vertical-align: -2px;
}

.status-edge {
  position: relative;
  border-left: 5px solid rgba(120,120,128,.22);
}
.status-edge.uc { border-left-color: #0a73c9; }
.status-edge.unconditional { border-left-color: #168655; }
.status-edge.settled { border-left-color: #8147a5; }
.status-edge.withdrawn { border-left-color: #777d88; }
.status-edge.very { border-left-color: #168655; }
.status-edge.likely { border-left-color: #0a73c9; }
.status-edge::after {
  content: "";
  position: absolute;
  inset: 1px auto 1px 0;
  width: 5px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  pointer-events: none;
}

.sheet-v3 .sheet-section {
  padding: 15px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
.sheet-v3 .sheet-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .48;
  pointer-events: none;
}
.sheet-v3 .sheet-section > * { position: relative; }

.sheet-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sheet-section-title strong {
  display: block;
  font-size: 14px;
  line-height: 1.1;
}
.sheet-section-title small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  margin-top: 4px;
  line-height: 1.25;
}
.section-emoji {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 6px 16px rgba(20,24,35,.06);
}
html[data-theme="dark"] .section-emoji {
background: rgba(255,255,255,.08);
}

.tone-property::before { background: linear-gradient(135deg, rgba(10,115,201,.13), transparent 62%); }
.tone-people::before { background: linear-gradient(135deg, rgba(129,71,165,.14), transparent 62%); }
.tone-money::before { background: linear-gradient(135deg, rgba(22,134,85,.15), transparent 62%); }
.tone-timeline::before { background: linear-gradient(135deg, rgba(80,115,255,.12), transparent 62%); }
.tone-warning::before { background: linear-gradient(135deg, rgba(241,157,0,.15), transparent 62%); }
.tone-notes::before { background: linear-gradient(135deg, rgba(120,120,128,.11), transparent 62%); }

.timeline-strip {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 2px 0 13px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.timeline-strip i {
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(22,134,85,.55), rgba(120,120,128,.18));
}

.mini-divider {
  margin: 4px 0 0;
  padding: 9px 0 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheet-actions {
  position: sticky;
  bottom: calc(-25px - var(--safe-bottom));
  z-index: 4;
  padding: 12px 0 calc(14px + var(--safe-bottom));
  margin-left: -2px;
  margin-right: -2px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--glass-strong) 22%);
  backdrop-filter: blur(18px);
}
html[data-theme="dark"] .sheet-actions {
background: linear-gradient(180deg, rgba(27,29,35,0), rgba(27,29,35,.97) 22%);
}

.quick-sheet { max-width: 520px; }
.quick-sheet .sheet-actions > * {
  flex: 1;
}

.attention-card.overdue {
  animation: attentionPulse 1.8s ease-in-out infinite;
}
@keyframes attentionPulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 18px 55px rgba(180,35,24,.24); }
}


.personal-note-preview {
  margin-top: 9px;
  display: inline-flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.personal-note-preview span:first-child { flex: 0 0 auto; }

.future-card .card-values {
  grid-template-columns: 1fr;
}
.future-timeframe {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(10,115,201,.09);
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
}

@media (max-width: 380px) {
  .logo-plate { width: 46px; height: 46px; }
  .section-emoji { width: 34px; height: 34px; }
  .sheet-v3 .sheet-section { padding: 14px; }
}


/* V4 requested form polish only */
.sheet-v3 .field-grid { gap: 10px; }
.sheet-v3 .field-row { gap: 8px; }
.sheet-v3 .field-row > .field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.sheet-v3 .field input,
.sheet-v3 .field select,
.sheet-v3 .field textarea {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 11px;
}
.sheet-v3 .field textarea { min-height: 90px; }
.sheet-v3 input[type="date"],
.sheet-v3 input[type="time"] {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
  inline-size: 100%;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: hidden;
}
.future-move-button {
  width: 100%;
  margin-top: 14px;
}
@media (max-width: 480px) {
  .sheet { padding-left: 12px; padding-right: 12px; }
  .sheet-v3 .sheet-section { padding: 13px; margin-top: 12px; }
  .sheet-v3 .sheet-section-title { margin-bottom: 10px; }
}


/* V4.1 appearance toggle */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.settings-card .toggle-row {
  padding-top: 2px;
}


/* V4.2 shared cloud sync status */
.cloud-status-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(120,120,128,.055);
}
.cloud-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 5px rgba(120,120,128,.08);
}
.cloud-dot.checking { background: #8e8e93; }
.cloud-dot.connected { background: #168655; box-shadow: 0 0 0 5px rgba(22,134,85,.11); }
.cloud-dot.saving { background: #0a73c9; box-shadow: 0 0 0 5px rgba(10,115,201,.11); }
.cloud-dot.empty { background: #f19d00; box-shadow: 0 0 0 5px rgba(241,157,0,.12); }
.cloud-dot.offline,
.cloud-dot.conflict { background: #d93933; box-shadow: 0 0 0 5px rgba(217,57,51,.11); }

.cloud-status-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.cloud-status-copy strong {
  font-size: 12px;
  line-height: 1.2;
}
.cloud-status-copy span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}
.cloud-actions {
  margin-top: 11px;
}


/* =========================================================
   V4.3 — MOBILE FIT & PADDING FIX
   iPhone only. No design or business-logic changes.
   ========================================================= */

@media (max-width: 480px) {

  /* SEARCH + SORT
     Give the sort menu enough room for its full wording. */
  .toolbar {
    grid-template-columns: minmax(0, 1fr) 154px;
    gap: 9px;
  }

  .toolbar > *,
  .searchbox,
  .selectbox {
    min-width: 0;
    max-width: 100%;
  }

  .selectbox {
    width: 154px;
    padding-left: 10px;
    padding-right: 24px;
  }


  /* STATUS CHIPS
     Allow the final chip to scroll completely into view. */
  .filter-scroll {
    padding-right: 16px;
    scroll-padding-right: 16px;
  }


  /* TWO-COLUMN FORM ROWS
     Keep the existing two-column design. */
  .sheet-v3 .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .sheet-v3 .field-row > .field {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }


  /* iPHONE DATE + TIME CONTROLS
     Safari gives these controls an intrinsic width which is
     what is making them overlap the neighbouring column. */
  .sheet-v3 input[type="date"],
  .sheet-v3 input[type="time"] {
    -webkit-appearance: none;
    appearance: none;

    box-sizing: border-box;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;

    padding-left: 10px;
    padding-right: 10px;
  }

  .sheet-v3 input[type="date"]::-webkit-date-and-time-value,
  .sheet-v3 input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }



  /* SAVE / DELETE BAR
     Stop the sticky buttons being dragged below the screen. */
  .sheet-v3 .sheet-actions {
    bottom: 0;
  }
}
/* V4.3.1 — final mobile spacing + action alignment */
@media (max-width: 480px) {

  /* Pull right-hand deadline controls neatly inside card */
  #underContractDate,
  #settlementDate,
  #ofiTime,
  #financeDeadline,
  #buildingDeadline,
  #pestDeadline {
    width: calc(100% - 6px) !important;
    max-width: calc(100% - 6px) !important;
  }

  /* Tighten action area */
  .sheet-v3 .sheet-actions {
    display: flex;
    gap: 9px;
    margin-top: 8px;
    padding-top: 6px;
    align-items: center;
    justify-content: flex-end;
  }

  /* Delete stays left when visible */
  .sheet-v3 .sheet-actions .danger-button:not(.hidden) {
    flex: 2;
  }

  /* Save is larger and stays right */
  .sheet-v3 .sheet-actions .primary-button:last-child {
    flex: 3;
  }

  /* When there is no Delete button, Save sits neatly on the right */
  .sheet-v3 .sheet-actions .danger-button.hidden + .primary-button {
    flex: 0 0 60%;
    margin-left: auto;
  }

}

/* V4.3.3 — FINAL STICKY ACTION BAR */
.sheet-v3 .sheet-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20;

  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;

  width: 100%;
  gap: 9px;

  margin-top: 8px;
  padding: 10px 0 calc(12px + var(--safe-bottom));

  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* SAVE always lives on the right */
.sheet-v3 .sheet-actions .primary-button:last-child {
  flex: none !important;
  width: 60% !important;
  margin-left: auto !important;
}

/* DELETE stays on the left when editing */
.sheet-v3 .sheet-actions .danger-button:not(.hidden) {
  flex: none !important;
  width: 36% !important;
  margin-right: auto;
}

/* V4.3.4 — HARD MOBILE SAVE BUTTON FIX */
@media (max-width: 480px) {

  #listingForm > .sheet-actions {
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;

    width: 100% !important;
    gap: 0 !important;

    margin: 8px 0 0 !important;
    padding: 10px 0 calc(12px + var(--safe-bottom)) !important;

    background: var(--glass-strong);
  }

  /* ADD LISTING — force Save into right-hand 60% */
  #listingForm > .sheet-actions > #deleteListing.hidden + .primary-button {
    flex: 0 0 60% !important;
    width: 60% !important;
    max-width: 60% !important;

    margin-left: 40% !important;
    margin-right: 0 !important;
  }

  /* EDIT LISTING — Delete left, Save right */
  #listingForm > .sheet-actions > #deleteListing:not(.hidden) {
    flex: 0 0 38% !important;
    width: 38% !important;
    margin: 0 !important;
  }

  #listingForm > .sheet-actions > #deleteListing:not(.hidden) + .primary-button {
    flex: 0 0 60% !important;
    width: 60% !important;
    margin-left: 2% !important;
    margin-right: 0 !important;
  }

}
#listingForm > .sheet-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

#listingForm > .sheet-actions > button[type="submit"] {
  width: 60% !important;
  margin-left: auto !important;
}


/* Needs Attention — subtle Elders red emphasis */
.attention-card {
  animation: none !important;
  box-shadow:
    0 8px 26px rgba(217,57,51,.18),
    0 0 0 1px rgba(217,57,51,.12) !important;
}


/* Current Position — Under Contract green emphasis */
.under-contract-card {
  box-shadow:
    var(--soft-shadow),
    0 9px 30px rgba(22,134,85,.24),
    0 0 0 1px rgba(22,134,85,.36) !important;
}

/* V4.3.9 — Future toolbar fit */
#futurePage .toolbar {
  grid-template-columns: minmax(0, 1fr) 190px;
}

#futureSort {
  width: 190px;
}

@media (max-width: 480px) {
  #futurePage .toolbar {
    grid-template-columns: minmax(0, 1fr) 172px;
  }

  #futureSort {
    width: 172px;
  }
}

/* V4.4 — Future Listing Take-Home Potential */

.future-potential-total {
  margin: 0 0 12px;
  min-height: 76px;
  padding: 14px 16px;
  border-radius: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background:
    radial-gradient(circle at 8% 50%, rgba(22,134,85,.18), transparent 38%),
    var(--glass);

  border: 1px solid rgba(22,134,85,.22);

  box-shadow:
    var(--soft-shadow),
    0 10px 32px rgba(22,134,85,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.future-potential-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.future-potential-leaf {
  font-size: 24px;
}

.future-potential-title {
  font-size: 11px;
  font-weight: 900;
}

.future-potential-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.future-potential-value {
  flex: 0 0 auto;
  color: #2fbf78;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.future-takehome-pill {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;

  background: rgba(22,134,85,.10);
  border: 1px solid rgba(22,134,85,.18);

  box-shadow:
    0 7px 20px rgba(22,134,85,.13),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.future-takehome-pill span:nth-child(2) {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.future-takehome-pill strong {
  color: #168655;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 480px) {
  .future-potential-total {
    padding: 13px 14px;
    gap: 10px;
  }

  .future-potential-sub {
    display: none;
  }

  .future-potential-value {
    font-size: 22px;
  }
}

/* V4.4.2 — Future Potential liquid glass */

.future-potential-total {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.future-potential-total::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(255,255,255,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,0) 42%
    );
}

.future-potential-total::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -35%;
  left: -45%;
  width: 34%;
  height: 170%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(255,255,255,.24),
    rgba(255,255,255,.08),
    transparent
  );

  filter: blur(2px);
  transform: skewX(-16deg);
  animation: liquidGlassSweep 6.5s cubic-bezier(.4,0,.2,1) infinite;
}

.future-potential-total > * {
  position: relative;
  z-index: 2;
}

@keyframes liquidGlassSweep {
  0%,
  14% {
    left: -45%;
    opacity: 0;
  }

  22% {
    opacity: .7;
  }

  52% {
    left: 115%;
    opacity: .45;
  }

  60%,
  100% {
    left: 115%;
    opacity: 0;
  }
}

/* V4.4.6 — Platinum Gold Silvery Green */

.future-potential-value {
  font-weight: 950;
  letter-spacing: -.045em;

  background: linear-gradient(
    118deg,
    #d9dde2 0%,
    #f3f4f5 20%,
    #e7d59a 43%,
    #d8b86b 58%,
    #c8d8cf 78%,
    #8fb7a4 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 8px rgba(232, 213, 154, .08),
    0 0 10px rgba(143, 183, 164, .08);
}

/* V5 — Weighted Future Forecast */

.future-potential-figures {
  text-align: right;
  flex: 0 0 auto;
}

.future-weighted-forecast {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.48);
  letter-spacing: .01em;
  white-space: nowrap;
}

.future-weighted-forecast strong {
  color: #d9c58f;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(217,197,143,.12);
}

/* V5 — Premium Listing Cards */

#listingsPage .listing-card {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(255,255,255,.055),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,0) 45%
    ),
    var(--glass);

  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

#listingsPage .listing-card:hover {
  transform: translateY(-3px);

  border-color: rgba(255,255,255,.14);

  box-shadow:
    0 18px 42px rgba(0,0,0,.32),
    0 0 24px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#listingsPage .listing-card:active {
  transform: translateY(-1px) scale(.995);
}

#listingsPage .people-row {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  border: 1px solid rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

#listingsPage .card-values > div:last-child .value-number {
  background: linear-gradient(
    115deg,
    #f2f3f4 0%,
    #d9c17b 45%,
    #9ebcab 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 10px rgba(217,193,123,.07),
    0 0 12px rgba(158,188,171,.07);
}

#listingsPage .card-address {
  letter-spacing: -.025em;
}