:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: #1c1c1e;
  background: #f2f2f7;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; background: #f2f2f7; }
body { min-height: 100vh; }
button, select { font: inherit; }

.app-shell { min-height: 100vh; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(18px + env(safe-area-inset-top)) 20px 16px;
  background: rgba(249,249,249,.84);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: .5px solid rgba(60,60,67,.16);
}
.brand { font-size: 28px; font-weight: 760; letter-spacing: -.8px; }
.subtitle { margin-top: 2px; font-size: 12px; color: #8e8e93; }
.topbar select { border: 0; border-radius: 12px; padding: 9px 12px; background: rgba(118,118,128,.12); }

.content { max-width: 1180px; margin: 0 auto; padding: 18px; }
.hero {
  display: flex; justify-content: space-between; gap: 24px; align-items: end;
  padding: 26px; color: white; border-radius: 24px;
  background: linear-gradient(135deg,#007aff,#5856d6);
  box-shadow: 0 12px 36px rgba(0,122,255,.18);
}
.hero-kicker { font-size: 12px; font-weight: 700; opacity: .8; }
.hero-value { margin-top: 5px; font-size: clamp(28px,5vw,50px); font-weight: 800; letter-spacing: -1.8px; }
.hero-side { text-align: right; line-height: 1.7; font-weight: 600; opacity: .88; }

.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-top: 18px; }
.metric, .panel {
  padding: 18px; border-radius: 20px; background: rgba(255,255,255,.95);
  border: .5px solid rgba(60,60,67,.1);
  box-shadow: 0 7px 20px rgba(0,0,0,.045);
}
.metric-label { font-size: 11px; font-weight: 700; color: #8e8e93; }
.metric-value { margin-top: 8px; font-size: 20px; font-weight: 760; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(6,1fr);
  padding: 8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
  background: rgba(249,249,249,.86);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: .5px solid rgba(60,60,67,.16);
}
.tabs button { border: 0; background: transparent; padding: 10px 2px; color: #8e8e93; font-size: 11px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tabs button.active { color: #007aff; font-weight: 700; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.button {
  border: 0; border-radius: 13px; padding: 11px 16px;
  background: #007aff; color: white; font-weight: 650; cursor: pointer;
}
.button.secondary { background: rgba(118,118,128,.12); color: #1c1c1e; }
pre { overflow: auto; white-space: pre-wrap; color: #3a3a3c; }

@media (prefers-color-scheme: dark){
html[data-theme="auto"], html[data-theme="auto"], html[data-theme="auto"] body, html[data-theme="auto"] #app{ color: #fff; background: #000; }
html[data-theme="auto"] .topbar, html[data-theme="auto"] .tabs{ background: rgba(28,28,30,.86); }
html[data-theme="auto"] .metric, html[data-theme="auto"] .panel{ background: rgba(28,28,30,.96); border-color: rgba(255,255,255,.08); }
html[data-theme="auto"] .button.secondary{ color: white; background: rgba(118,118,128,.28); }
html[data-theme="auto"] pre{ color: #ebebf5; }
}
html[data-theme="night"], html[data-theme="night"], html[data-theme="night"] body, html[data-theme="night"] #app{ color: #fff; background: #000; }
html[data-theme="night"] .topbar, html[data-theme="night"] .tabs{ background: rgba(28,28,30,.86); }
html[data-theme="night"] .metric, html[data-theme="night"] .panel{ background: rgba(28,28,30,.96); border-color: rgba(255,255,255,.08); }
html[data-theme="night"] .button.secondary{ color: white; background: rgba(118,118,128,.28); }
html[data-theme="night"] pre{ color: #ebebf5; }



/* ───────────────── Entries / Phase 2 ───────────────── */
.entries-page { max-width: 980px; margin: 0 auto; }
.entries-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 4px 0 14px; }
.entries-header h2 { margin:0; font-size:30px; letter-spacing:-.8px; }
.entries-month { margin-top:3px; font-size:12px; color:#8e8e93; }
.add-entry-button {
  width:46px; height:46px; border:0; border-radius:15px;
  background:#007aff; color:white; font-size:30px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,122,255,.22);
}
.entry-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0 10px; }
.entry-tabs::-webkit-scrollbar { display:none; }
.entry-tabs button {
  border:0; border-radius:11px; padding:8px 13px; white-space:nowrap;
  background:rgba(118,118,128,.10); color:inherit; font-weight:600;
}
.entry-tabs button.active { background:#007aff; color:white; }

.entries-search-wrap { margin-bottom:12px; }
.entries-search-wrap input {
  width:100%; min-height:42px; border:0; border-radius:13px; padding:0 14px;
  background:rgba(118,118,128,.10); color:inherit; outline:none;
}
.entries-search-wrap input:focus { box-shadow:0 0 0 3px rgba(0,122,255,.12); }

.entries-tools, .entries-summary {
  margin:0 0 12px; padding:14px; border-radius:18px;
  background:rgba(255,255,255,.95); border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 5px 16px rgba(0,0,0,.035);
}
.tool-title { font-size:12px; font-weight:750; color:#8e8e93; text-transform:uppercase; letter-spacing:.2px; }
.tool-sub { margin-top:3px; font-size:12px; color:#8e8e93; }
.tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:10px; align-items:end; }
.tool-grid label, .entry-form label { display:grid; gap:6px; font-size:12px; color:#8e8e93; font-weight:600; }
.tool-grid input, .tool-grid select, .entry-form input, .entry-form select, .entry-form textarea {
  width:100%; border:.5px solid rgba(60,60,67,.18); border-radius:12px;
  background:rgba(118,118,128,.08); color:inherit; padding:10px 11px; font:inherit; outline:none;
}
.axess-result { min-height:59px; display:flex; flex-direction:column; justify-content:center; border-radius:12px; padding:8px 11px; background:rgba(52,199,89,.10); }
.axess-result span { font-size:11px; color:#8e8e93; font-weight:650; }
.axess-result strong { font-size:17px; margin-top:2px; }
.negative, .axess-result strong.negative { color:#ff3b30 !important; }

.button.compact { width:auto; display:inline-flex; align-items:center; justify-content:center; margin-top:10px; padding:9px 13px; font-size:12px; }
.button.danger-soft { color:#ff3b30; background:rgba(255,59,48,.10); }
.button:disabled { opacity:.4; cursor:default; }
.statement-tool { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.tool-actions { display:flex; gap:8px; align-items:center; }
.statement-tool .button.compact { margin-top:0; }

.entries-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.entries-summary > div {
  min-height:64px; display:flex; flex-direction:column; justify-content:center;
  background:rgba(118,118,128,.07); border-radius:13px; padding:9px 11px;
}
.entries-summary span { font-size:11px; color:#8e8e93; font-weight:650; }
.entries-summary strong { margin-top:4px; font-size:15px; }
.mini-action { border:0; border-radius:12px; background:#007aff; color:white; font-weight:700; }
.mini-action.computed { background:#34c759; }

.entries-list {
  overflow:hidden; border-radius:20px; background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.1); box-shadow:0 7px 20px rgba(0,0,0,.045);
}
.entries-list-heading { display:flex; justify-content:space-between; padding:11px 14px; font-size:12px; color:#8e8e93; border-bottom:.5px solid rgba(60,60,67,.12); }
.entry-row {
  width:100%; display:grid; grid-template-columns:40px minmax(0,1fr) auto;
  gap:11px; align-items:center; border:0; border-bottom:.5px solid rgba(60,60,67,.12);
  background:transparent; color:inherit; text-align:left; padding:12px 14px; cursor:pointer;
}
.entry-row:last-child { border-bottom:0; }
.entry-row:active { background:rgba(118,118,128,.08); }
.entry-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(0,122,255,.09); font-size:18px; }
.entry-main { min-width:0; display:flex; flex-direction:column; }
.entry-title { font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-sub { margin-top:3px; font-size:11px; color:#8e8e93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-amount { text-align:right; display:flex; flex-direction:column; }
.entry-amount strong { font-size:14px; }
.entry-amount small { margin-top:2px; font-size:10px; color:#8e8e93; }
.empty-state { padding:28px 18px; text-align:center; color:#8e8e93; font-size:13px; }
.entries-footnote {
  display:grid; grid-template-columns:1fr auto; gap:7px 12px; margin:12px 2px 0;
  font-size:11px; color:#8e8e93;
}
.entries-footnote strong { color:inherit; }

.sheet-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.34); backdrop-filter:blur(3px); display:flex; align-items:flex-end; }
.sheet {
  width:min(680px,100%); max-height:92vh; overflow:auto; margin:0 auto;
  border-radius:26px 26px 0 0; background:#fff; color:#1c1c1e;
  box-shadow:0 -14px 42px rgba(0,0,0,.20);
  padding-bottom:max(18px,env(safe-area-inset-bottom));
}
.sheet-handle { width:38px; height:5px; border-radius:9px; background:rgba(60,60,67,.28); margin:8px auto 5px; }
.sheet-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 14px 12px; border-bottom:.5px solid rgba(60,60,67,.14); }
.sheet-header strong { text-align:center; }
.sheet-text-button { justify-self:start; border:0; background:none; color:#007aff; font-weight:600; padding:6px 2px; }
.sheet-text-button.primary { justify-self:end; font-weight:750; }
.entry-form { display:grid; gap:12px; padding:16px; }
.form-grid { display:grid; grid-template-columns:1fr 130px; gap:10px; }
.form-help { color:#8e8e93; font-size:11px; line-height:1.4; margin-top:5px; }
.delete-entry-button {
  margin-top:4px; border:0; border-radius:13px; padding:12px;
  background:rgba(255,59,48,.10); color:#ff3b30; font-weight:700;
}

@media (max-width: 680px) {
  .tool-grid { grid-template-columns:1fr 1fr; }
  .entries-summary { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr 110px; }
}

@media (prefers-color-scheme: dark){
html[data-theme="auto"] .entries-tools, html[data-theme="auto"] .entries-summary, html[data-theme="auto"] .entries-list{ background:rgba(28,28,30,.96); border-color:rgba(255,255,255,.08); }
html[data-theme="auto"] .sheet{ background:#1c1c1e; color:#fff; }
html[data-theme="auto"] .entry-row{ border-color:rgba(84,84,88,.60); }
html[data-theme="auto"] .entries-list-heading{ border-color:rgba(84,84,88,.60); }
html[data-theme="auto"] .tool-grid input, html[data-theme="auto"] .tool-grid select, html[data-theme="auto"] .entry-form input, html[data-theme="auto"] .entry-form select, html[data-theme="auto"] .entry-form textarea, html[data-theme="auto"] .entries-search-wrap input{ background:rgba(118,118,128,.20); border-color:rgba(255,255,255,.08); }
}
html[data-theme="night"] .entries-tools, html[data-theme="night"] .entries-summary, html[data-theme="night"] .entries-list{ background:rgba(28,28,30,.96); border-color:rgba(255,255,255,.08); }
html[data-theme="night"] .sheet{ background:#1c1c1e; color:#fff; }
html[data-theme="night"] .entry-row{ border-color:rgba(84,84,88,.60); }
html[data-theme="night"] .entries-list-heading{ border-color:rgba(84,84,88,.60); }
html[data-theme="night"] .tool-grid input, html[data-theme="night"] .tool-grid select, html[data-theme="night"] .entry-form input, html[data-theme="night"] .entry-form select, html[data-theme="night"] .entry-form textarea, html[data-theme="night"] .entries-search-wrap input{ background:rgba(118,118,128,.20); border-color:rgba(255,255,255,.08); }



/* ───────────────── Phase 3 Obligations ───────────────── */
.obligations-page { max-width: 980px; margin: 0 auto; }
.obligation-tabs button { min-width: 104px; }
.obligation-overview {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 12px;
}
.obligation-overview > div {
  min-height:82px;
  padding:12px 14px;
  border-radius:17px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 5px 16px rgba(0,0,0,.035);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.obligation-overview .overview-primary {
  background:rgba(52,199,89,.11);
}
.obligation-overview span {
  font-size:11px;
  color:#8e8e93;
  font-weight:650;
}
.obligation-overview strong {
  margin-top:5px;
  font-size:19px;
  letter-spacing:-.3px;
}
.toggle-form-row {
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:0 2px;
}
.toggle-form-row input[type="checkbox"] {
  width:51px;
  height:31px;
  accent-color:#34c759;
}

@media (max-width:680px) {
  .obligation-overview { grid-template-columns:1fr; }
}

@media (prefers-color-scheme: dark){
html[data-theme="auto"] .obligation-overview > div{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="auto"] .obligation-overview .overview-primary{
    background:rgba(48,209,88,.14);
  }
}
html[data-theme="night"] .obligation-overview > div{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="night"] .obligation-overview .overview-primary{
    background:rgba(48,209,88,.14);
  }



/* ───────────────── Phase 4 Analytics ───────────────── */
.analytics-page { max-width: 1040px; margin: 0 auto; }
.analytics-period-badge {
  padding:8px 12px;
  border-radius:12px;
  background:rgba(0,122,255,.10);
  color:#007aff;
  font-size:12px;
  font-weight:700;
}

.analytics-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.analytics-kpi {
  min-height:112px;
  padding:14px;
  border-radius:19px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 5px 16px rgba(0,0,0,.035);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.analytics-kpi > span:first-child {
  font-size:11px;
  color:#8e8e93;
  font-weight:650;
}
.analytics-kpi > strong {
  margin-top:7px;
  font-size:20px;
  letter-spacing:-.4px;
}
.analytics-kpi small {
  margin-top:7px;
  color:#8e8e93;
  font-size:10px;
}
.analytics-delta {
  margin-top:7px;
  font-size:10px;
  font-weight:700;
}
.delta-up { color:#ff9500; }
.delta-down { color:#34c759; }
.delta-flat { color:#8e8e93; }

.analytics-progress-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.analytics-progress-card {
  padding:15px;
  border-radius:19px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 5px 16px rgba(0,0,0,.035);
}
.analytics-progress-head,
.analytics-progress-foot {
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.analytics-progress-head > div {
  display:flex;
  flex-direction:column;
}
.analytics-progress-head span,
.analytics-progress-foot {
  font-size:10px;
  color:#8e8e93;
}
.analytics-progress-head strong {
  margin-top:4px;
  font-size:17px;
}
.analytics-progress-limit { text-align:right; }
.analytics-progress-track {
  height:7px;
  margin:13px 0 8px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(118,118,128,.14);
}
.analytics-progress-fill {
  height:100%;
  border-radius:inherit;
  background:#34c759;
}
.analytics-progress-card.warning .analytics-progress-fill { background:#ff9500; }
.analytics-progress-card.over .analytics-progress-fill { background:#ff3b30; }
.analytics-progress-card.none .analytics-progress-fill { background:#8e8e93; }

.analytics-card {
  margin-bottom:12px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 7px 20px rgba(0,0,0,.045);
}
.analytics-card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.analytics-card-head h3 {
  margin:2px 0 0;
  font-size:18px;
  letter-spacing:-.3px;
}
.analytics-card-kicker {
  font-size:10px;
  color:#8e8e93;
  font-weight:700;
}

.analytics-donut-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:22px;
  align-items:center;
}
.analytics-donut {
  width:210px;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.analytics-donut-hole {
  width:126px;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 0 0 1px rgba(60,60,67,.05);
}
.analytics-donut-hole span { font-size:10px; color:#8e8e93; }
.analytics-donut-hole strong { margin-top:4px; font-size:16px; }

.analytics-legend { display:grid; gap:7px; }
.legend-row {
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-bottom:.5px solid rgba(60,60,67,.10);
}
.legend-row:last-child { border-bottom:0; }
.legend-dot { width:9px; height:9px; border-radius:50%; }
.legend-label { font-size:12px; }
.legend-row strong { font-size:12px; }

.analytics-empty-chart {
  min-height:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#8e8e93;
  font-size:12px;
}
.empty-ring {
  width:120px;
  height:120px;
  border-radius:50%;
  border:16px solid rgba(118,118,128,.12);
  margin-bottom:12px;
}

.analytics-trend {
  height:220px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(48px,1fr));
  gap:10px;
  align-items:end;
  padding:10px 0 0;
}
.trend-column {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
}
.trend-bars {
  width:100%;
  flex:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
}
.trend-bar {
  width:14px;
  min-height:2px;
  border-radius:6px 6px 2px 2px;
}
.trend-bar.commitments { background:#007aff; }
.trend-bar.remaining { background:#34c759; }
.trend-bar.remaining.negative { background:#ff3b30; }
.trend-column > span { font-size:10px; color:#8e8e93; }

.trend-key {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:11px;
  font-size:10px;
  color:#8e8e93;
}
.trend-key span { display:flex; align-items:center; gap:5px; }
.trend-key-dot { width:8px; height:8px; border-radius:50%; }
.trend-key-dot.commitments { background:#007aff; }
.trend-key-dot.remaining { background:#34c759; }

.analytics-reconciliation {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:2px;
}
.analytics-reconciliation > div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:15px;
  background:rgba(118,118,128,.07);
}
.analytics-reconciliation span {
  font-size:11px;
  color:#8e8e93;
  font-weight:650;
}
.analytics-reconciliation strong { font-size:12px; }

@media (max-width:820px) {
  .analytics-kpis { grid-template-columns:1fr 1fr; }
  .analytics-donut-layout { grid-template-columns:1fr; }
  .analytics-donut { margin:0 auto; }
}

@media (max-width:620px) {
  .analytics-progress-grid { grid-template-columns:1fr; }
  .analytics-reconciliation { grid-template-columns:1fr; }
}

@media (prefers-color-scheme: dark){
html[data-theme="auto"] .analytics-kpi, html[data-theme="auto"] .analytics-progress-card, html[data-theme="auto"] .analytics-card{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="auto"] .analytics-donut-hole{
    background:#1c1c1e;
    box-shadow:0 0 0 1px rgba(255,255,255,.05);
  }
}
html[data-theme="night"] .analytics-kpi, html[data-theme="night"] .analytics-progress-card, html[data-theme="night"] .analytics-card{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="night"] .analytics-donut-hole{
    background:#1c1c1e;
    box-shadow:0 0 0 1px rgba(255,255,255,.05);
  }



/* ───────────────── Phase 5 Rates + Settings ───────────────── */
.rates-page, .settings-page { max-width: 900px; margin: 0 auto; }

.rates-current-card, .settings-group-card {
  margin-bottom:12px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(60,60,67,.10);
  box-shadow:0 7px 20px rgba(0,0,0,.045);
}
.rates-mode-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.rates-mode-row > div:first-child {
  display:flex;
  flex-direction:column;
}
.rates-mode-row span { font-size:11px; color:#8e8e93; font-weight:650; }
.rates-mode-row strong { margin-top:4px; font-size:14px; }

.segmented {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:2px;
  border-radius:11px;
  background:rgba(118,118,128,.12);
}
.segmented button {
  border:0;
  border-radius:9px;
  padding:7px 11px;
  background:transparent;
  color:inherit;
  font-size:11px;
  font-weight:650;
}
.segmented button.active {
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.10);
}

.rates-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:15px;
}
.rates-grid label, .settings-textarea-label {
  display:grid;
  gap:6px;
  color:#8e8e93;
  font-size:11px;
  font-weight:650;
}
.rates-grid input, .settings-page input[type="number"], .settings-page textarea {
  width:100%;
  border:.5px solid rgba(60,60,67,.18);
  border-radius:12px;
  background:rgba(118,118,128,.08);
  color:inherit;
  padding:10px 11px;
  font:inherit;
  outline:none;
}
.rates-grid input:disabled { opacity:.55; }
.rates-help, .settings-form-note {
  margin-top:10px;
  font-size:11px;
  line-height:1.45;
  color:#8e8e93;
}

.rate-map { display:grid; }
.rate-map-row {
  display:grid;
  grid-template-columns:80px 88px minmax(0,1fr) 100px;
  gap:10px;
  align-items:center;
  padding:10px 4px;
  border-bottom:.5px solid rgba(60,60,67,.10);
  font-size:11px;
}
.rate-map-row:last-child { border-bottom:0; }
.rate-map-row.current { color:#007aff; }
.rate-map-row small { color:#8e8e93; text-align:right; }
.rate-mode-pill {
  width:max-content;
  border-radius:999px;
  padding:4px 7px;
  font-size:9px;
  font-weight:750;
  text-transform:uppercase;
}
.rate-mode-pill.manual { color:#007aff; background:rgba(0,122,255,.10); }
.rate-mode-pill.inherited { color:#8e8e93; background:rgba(118,118,128,.10); }

.settings-group-title {
  margin-bottom:8px;
  color:#8e8e93;
  font-size:10px;
  font-weight:750;
  letter-spacing:.25px;
}
.budget-limit-row, .settings-line {
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:14px;
  align-items:center;
  min-height:58px;
  border-bottom:.5px solid rgba(60,60,67,.10);
}
.budget-limit-row > span, .settings-line > span {
  display:flex;
  flex-direction:column;
}
.budget-limit-row strong, .settings-line strong { font-size:13px; }
.budget-limit-row small, .settings-line small {
  margin-top:3px;
  color:#8e8e93;
  font-size:10px;
  line-height:1.35;
}
.budget-limit-row input[readonly] {
  opacity:.62;
  cursor:default;
}
.budget-limit-dual-inputs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:0;
}
.budget-limit-dual-inputs label {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.budget-limit-dual-inputs label > span {
  color:#8e8e93;
  font-size:9px;
  font-weight:750;
  letter-spacing:.2px;
  text-align:center;
}
.budget-limit-dual-inputs input {
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.settings-line input[type="checkbox"] {
  justify-self:end;
  width:51px;
  height:31px;
  accent-color:#34c759;
}
.settings-textarea-label { margin-top:13px; }
.copy-target {
  margin:5px 0 8px;
  font-size:12px;
  color:#8e8e93;
}
.copy-target strong { color:inherit; }

.reconciliation-table {
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px 14px;
  font-size:12px;
}
.reconciliation-table span { color:#8e8e93; }

@media (max-width:650px) {
  .rates-grid { grid-template-columns:1fr; }
  .rates-mode-row { align-items:flex-start; flex-direction:column; }
  .rate-map-row { grid-template-columns:70px 80px 1fr; }
  .rate-map-row small { display:none; }
  .budget-limit-row, .settings-line {
    grid-template-columns:minmax(0,1fr) 120px;
  }
}

@media (prefers-color-scheme: dark){
html[data-theme="auto"] .rates-current-card, html[data-theme="auto"] .settings-group-card{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="auto"] .segmented button.active{ background:#3a3a3c; }
html[data-theme="auto"] .rates-grid input, html[data-theme="auto"] .settings-page input[type="number"], html[data-theme="auto"] .settings-page textarea{
    background:rgba(118,118,128,.20);
    border-color:rgba(255,255,255,.08);
  }
}
html[data-theme="night"] .rates-current-card, html[data-theme="night"] .settings-group-card{
    background:rgba(28,28,30,.96);
    border-color:rgba(255,255,255,.08);
  }
html[data-theme="night"] .segmented button.active{ background:#3a3a3c; }
html[data-theme="night"] .rates-grid input, html[data-theme="night"] .settings-page input[type="number"], html[data-theme="night"] .settings-page textarea{
    background:rgba(118,118,128,.20);
    border-color:rgba(255,255,255,.08);
  }



/* ───────────────── Phase 6 Migration + Parity ───────────────── */
.migration-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.button.secondary-action {
  background:rgba(118,118,128,.12);
  color:inherit;
}
.parity-placeholder {
  margin-top:12px;
  padding:16px;
  border-radius:14px;
  background:rgba(118,118,128,.07);
  color:#8e8e93;
  font-size:11px;
  line-height:1.5;
}
.parity-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
}
.parity-summary > div {
  padding:11px;
  border-radius:13px;
  background:rgba(118,118,128,.07);
  display:flex;
  flex-direction:column;
}
.parity-summary.pass > div:first-child {
  background:rgba(52,199,89,.11);
}
.parity-summary.fail > div:first-child {
  background:rgba(255,149,0,.12);
}
.parity-summary span {
  font-size:9px;
  color:#8e8e93;
  font-weight:700;
  text-transform:uppercase;
}
.parity-summary strong {
  margin-top:4px;
  font-size:13px;
}
.parity-month-list {
  display:grid;
  gap:6px;
  margin-top:12px;
}
.parity-month {
  border:.5px solid rgba(60,60,67,.10);
  border-radius:13px;
  overflow:hidden;
  background:rgba(118,118,128,.04);
}
.parity-month summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  font-size:11px;
}
.parity-month summary::-webkit-details-marker { display:none; }
.parity-month.pass summary strong { color:#34c759; }
.parity-month.fail summary strong { color:#ff9500; }
.parity-metrics {
  display:grid;
  border-top:.5px solid rgba(60,60,67,.10);
}
.parity-metrics > div {
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 150px 90px;
  gap:8px;
  align-items:center;
  padding:7px 11px;
  border-bottom:.5px solid rgba(60,60,67,.08);
  font-size:10px;
}
.parity-metrics > div:last-child { border-bottom:0; }
.parity-metrics small { color:#8e8e93; }
.parity-metrics strong { text-align:right; }
.parity-metrics .pass strong { color:#34c759; }
.parity-metrics .fail strong { color:#ff3b30; }
.parity-ok { color:#248a3d; }
.parity-warning { color:#c93400; }

@media (max-width:700px) {
  .parity-summary { grid-template-columns:1fr; }
  .parity-metrics > div {
    grid-template-columns:minmax(0,1fr) auto;
  }
  .parity-metrics small {
    grid-column:1 / -1;
  }
}

@media (prefers-color-scheme: dark){
html[data-theme="auto"] .button.secondary-action{ background:rgba(118,118,128,.28); }
html[data-theme="auto"] .parity-month{ border-color:rgba(255,255,255,.08); }
}
html[data-theme="night"] .button.secondary-action{ background:rgba(118,118,128,.28); }
html[data-theme="night"] .parity-month{ border-color:rgba(255,255,255,.08); }



/* ───────────────── Phase 7 Release Candidate ───────────────── */
.pwa-update-banner {
  display:none;
  position:fixed;
  top:max(8px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  width:min(430px,calc(100% - 24px));
  padding:9px 10px 9px 13px;
  border-radius:14px;
  background:rgba(28,28,30,.94);
  color:white;
  box-shadow:0 12px 36px rgba(0,0,0,.24);
  backdrop-filter:blur(20px);
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
}
.pwa-update-banner.show { display:flex; }
.pwa-update-banner button {
  border:0;
  border-radius:10px;
  padding:7px 10px;
  background:#007aff;
  color:white;
  font-weight:700;
}

.release-info {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 14px;
  padding:5px 0;
  font-size:11px;
}
.release-info span { color:#8e8e93; }
.diagnostics-output {
  margin:12px 0 0;
  max-height:260px;
  overflow:auto;
  border-radius:13px;
  padding:10px;
  background:rgba(118,118,128,.07);
  font-size:10px;
  line-height:1.45;
}
@media (max-width:560px) {
  .tabs button { font-size:10px; }
}

/* ───────────────── RC.3 Comprehensive Home Dashboard ───────────────── */
.home-dashboard{max-width:1180px;margin:0 auto;padding-bottom:12px}
.home-month-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:2px 2px 16px}
.home-month-heading span{color:#8e8e93;font-size:11px;font-weight:650}
.home-month-heading h1{margin:3px 0 0;font-size:clamp(25px,3vw,34px);letter-spacing:-.8px}
.home-month-arrows{display:flex;gap:8px}
.home-month-arrows button{border:0;width:34px;height:34px;border-radius:50%;background:rgba(0,122,255,.09);color:#007aff;font-size:24px;line-height:1;cursor:pointer}
.home-month-arrows button:disabled{opacity:.28;cursor:default}
.home-finance-hero{min-height:176px;display:flex;justify-content:space-between;gap:24px;padding:26px 30px;border-radius:26px;color:white;background:linear-gradient(118deg,#006bf7 0%,#315ee6 50%,#5148d7 100%);box-shadow:0 14px 40px rgba(32,93,227,.22)}
.home-finance-left,.home-finance-right{display:flex;flex-direction:column}
.home-finance-left>span,.home-finance-right>span{font-size:11px;font-weight:750;letter-spacing:.35px;opacity:.72}
.home-finance-left>small{margin-top:12px;font-size:12px;font-weight:650;opacity:.78}
.home-finance-left>strong{margin-top:2px;font-size:clamp(28px,4vw,42px);letter-spacing:-1px}
.home-finance-left>b{margin-top:2px;font-size:clamp(24px,3.2vw,34px)}
.home-finance-right{min-width:230px;align-items:flex-end;text-align:right;justify-content:center}
.home-finance-right>strong{margin:2px 0 14px;font-size:22px}
.home-finance-right>b{margin-top:2px;color:#79f09a;font-size:25px}
.home-finance-right>small{margin-top:2px;font-size:13px;font-weight:650;opacity:.86}
.home-primary-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin-top:12px}
.home-secondary-grid{display:grid;grid-template-columns:1.8fr 1.8fr 1.45fr 1.45fr 1.3fr;gap:9px;margin-top:9px}
.home-metric{min-width:0;padding:12px 13px;border-radius:17px;background:rgba(255,255,255,.96);border:.5px solid rgba(60,60,67,.09);box-shadow:0 5px 18px rgba(0,0,0,.035)}
.home-metric-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8e8e93;font-size:9px;font-weight:750;letter-spacing:.12px}
.home-metric-label i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;vertical-align:1px}
.home-metric strong{display:block;margin-top:7px;font-size:clamp(14px,1.7vw,20px);letter-spacing:-.25px}
.home-tone-red .home-metric-label i{background:#ff3b30}.home-tone-pink .home-metric-label i{background:#ff2d92}.home-tone-green .home-metric-label i{background:#34c759}.home-tone-purple .home-metric-label i{background:#af52de}
.home-tone-red strong{color:#a83232}.home-tone-pink strong{color:#e746a3}.home-tone-green strong{color:#22863a}.home-tone-purple strong{color:#8546b8}
.home-metric-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:7px}
.home-metric-progress-row>span{color:#34c759;font-size:9px;font-weight:750}
.home-progress{height:4px;overflow:hidden;border-radius:99px;background:rgba(118,118,128,.14)}
.home-progress>span{display:block;height:100%;border-radius:inherit;background:#34c759}.home-progress.warning>span{background:#ff9500}.home-progress.over>span{background:#ff3b30}.home-progress.none>span{background:#8e8e93}
.home-remaining-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-top:16px;padding:20px 22px 25px;border-radius:22px;color:white;background:linear-gradient(105deg,#006ae8,#135bd6 55%,#063f9f);box-shadow:0 12px 34px rgba(0,70,180,.16)}
.home-remaining-left{display:flex;align-items:center;gap:14px}.home-remaining-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.15);font-size:26px}
.home-remaining-left span{display:block;font-size:10px;font-weight:750;opacity:.74}.home-remaining-left strong{display:block;margin-top:3px;font-size:24px}.home-remaining-left b{display:block;margin-top:1px;font-size:19px}
.home-remaining-right{display:grid;grid-template-columns:auto auto;gap:3px 12px;text-align:right;font-size:9px;opacity:.86}.home-remaining-right small{font-weight:700}.home-remaining-right b{grid-column:1/-1;margin-top:4px;font-size:14px;color:#8effa9}
.home-remaining-progress{position:absolute;left:22px;right:22px;bottom:11px}.home-remaining-progress .home-progress{height:5px;background:rgba(255,255,255,.20)}
.home-formula-note{margin:7px 3px 15px;color:#8e8e93;font-size:10px}
.home-section-card,.home-months-block{border-radius:20px;background:rgba(255,255,255,.96);border:.5px solid rgba(60,60,67,.09);box-shadow:0 5px 18px rgba(0,0,0,.035)}
.home-section-title{padding:13px 14px 8px;color:#8e8e93;font-size:10px;font-weight:750;letter-spacing:.2px}
.home-recent-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:.5px solid rgba(60,60,67,.09)}
.home-recent-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(0,122,255,.08);font-size:18px}
.home-recent-main,.home-recent-amount{display:flex;flex-direction:column;min-width:0}.home-recent-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.home-recent-main small{margin-top:2px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
.home-recent-amount{align-items:flex-end;text-align:right}.home-recent-amount strong{font-size:12px}.home-recent-amount small{margin-top:2px;color:#d64a79;font-size:9px;font-weight:700}.home-empty{padding:18px;color:#8e8e93;font-size:11px;text-align:center}
.home-months-block{margin-top:14px;padding-bottom:12px}.home-months-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:0 12px}
.home-month-card{position:relative;min-height:78px;padding:9px 7px;border:.5px solid rgba(60,60,67,.08);border-radius:14px;background:rgba(118,118,128,.055);color:inherit;text-align:center;cursor:pointer}.home-month-card.active{color:white;background:linear-gradient(145deg,#006ff7,#174dcc);box-shadow:0 8px 20px rgba(0,83,210,.18)}
.home-month-name{display:block;font-size:10px;font-weight:750}.home-month-card strong{display:block;margin-top:4px;font-size:11px}.home-month-card small{display:block;margin-top:2px;font-size:9px;opacity:.78}.home-month-card em{display:block;margin-top:3px;font-size:8px;font-style:normal;color:#34c759;font-weight:750}.home-month-card.active em{color:#80ff9d}
@media(max-width:980px){.home-primary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.home-finance-hero{padding:20px;min-height:150px}.home-finance-right{min-width:160px}.home-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-months-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.home-finance-hero{flex-direction:column}.home-finance-right{align-items:flex-start;text-align:left;min-width:0}.home-secondary-grid{grid-template-columns:1fr}.home-remaining-card{grid-template-columns:1fr}.home-remaining-right{text-align:left}}
@media (prefers-color-scheme: dark){
html[data-theme="auto"] .home-metric, html[data-theme="auto"] .home-section-card, html[data-theme="auto"] .home-months-block{background:rgba(28,28,30,.96);border-color:rgba(255,255,255,.08)}
html[data-theme="auto"] .home-month-card{background:rgba(118,118,128,.18)}
html[data-theme="auto"] .home-tone-red strong{color:#ff6961}
html[data-theme="auto"] .home-tone-pink strong{color:#ff65b2}
html[data-theme="auto"] .home-tone-green strong{color:#5dde79}
html[data-theme="auto"] .home-tone-purple strong{color:#c780ef}
}
html[data-theme="night"] .home-metric, html[data-theme="night"] .home-section-card, html[data-theme="night"] .home-months-block{background:rgba(28,28,30,.96);border-color:rgba(255,255,255,.08)}
html[data-theme="night"] .home-month-card{background:rgba(118,118,128,.18)}
html[data-theme="night"] .home-tone-red strong{color:#ff6961}
html[data-theme="night"] .home-tone-pink strong{color:#ff65b2}
html[data-theme="night"] .home-tone-green strong{color:#5dde79}
html[data-theme="night"] .home-tone-purple strong{color:#c780ef}



/* ───────────────── RC.4 Home interaction + visual linkage ───────────────── */
.home-metric-link {
  width:100%;
  border:.5px solid rgba(60,60,67,.09);
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.home-metric-link:active,
.home-remaining-link:active {
  transform:scale(.992);
}
.home-metric-link:focus-visible,
.home-remaining-link:focus-visible {
  outline:2px solid rgba(0,122,255,.45);
  outline-offset:2px;
}
.home-metric-dots {
  display:inline-flex;
  gap:3px;
  margin-right:5px;
  vertical-align:1px;
}
.home-metric-dots i {
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
}
.home-metric-dots .dot-red { background:#ff3b30; }
.home-metric-dots .dot-pink { background:#ff2d92; }
.home-metric-dots .dot-green { background:#34c759; }
.home-metric-dots .dot-purple { background:#af52de; }

/* suppress the old single-dot rule for RC.4 multi-dot labels */
.home-metric-label > i { display:none !important; }

.home-remaining-link {
  width:100%;
  border:0;
  text-align:left;
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.home-month-card em.positive { color:#34c759; }
.home-month-card em.negative { color:#ff3b30; }
.home-month-card.active em.positive { color:#80ff9d; }
.home-month-card.active em.negative { color:#ff9b95; }


/* ───────────────── RC.10 Offline readiness badge ───────────────── */
.pwa-readiness-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:750;line-height:1;background:rgba(142,142,147,.12);color:#6e6e73}
.pwa-readiness-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#8e8e93}
.pwa-readiness-badge[data-state="true"]{background:rgba(52,199,89,.12);color:#248a3d}
.pwa-readiness-badge[data-state="true"]::before{background:#34c759}
.pwa-readiness-badge[data-state="preparing"]{background:rgba(255,149,0,.12);color:#b56a00}
.pwa-readiness-badge[data-state="preparing"]::before{background:#ff9500}
.pwa-readiness-badge[data-state="error"]{background:rgba(255,59,48,.12);color:#c5302a}
.pwa-readiness-badge[data-state="error"]::before{background:#ff3b30}


/* ───────────────── RC.14 Investment card ───────────────── */
.home-tone-blue .home-metric-label i{background:#0a84ff}
.home-tone-blue strong{color:#1677d2}
.home-metric-dots .dot-blue{background:#0a84ff}


/* ───────────────── RC.15 Header icon and Home hero sizing ───────────────── */
.topbar{
  position:relative;
}
.topbar-app-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 5px 16px rgba(0,0,0,.10);
  pointer-events:none;
  z-index:1;
}
.topbar-app-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Current Balance and Net Transfer use the same number size as Transfer Amount. */
.home-finance-left>strong,
.home-finance-left>b{
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.35px;
}

@media(max-width:700px){
  .topbar-app-icon{
    width:42px;
    height:42px;
    border-radius:12px;
  }
}
@media(max-width:520px){
  .topbar-app-icon{
    width:36px;
    height:36px;
    border-radius:10px;
  }
}


/* ───────────────── RC.16 Balanced Home hero ───────────────── */
.home-finance-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:0;
  min-height:168px;
  padding:24px 30px;
}
.home-finance-left,
.home-finance-right{
  display:grid;
  grid-template-rows:1fr 1fr;
  align-items:stretch;
  min-width:0;
}
.home-finance-left{
  justify-items:start;
  text-align:left;
  padding-right:28px;
  border-right:1px solid rgba(255,255,255,.16);
}
.home-finance-right{
  justify-items:end;
  text-align:right;
  padding-left:28px;
  min-width:0;
}
.home-hero-value-group{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.home-finance-left .home-hero-value-group{align-items:flex-start}
.home-finance-right .home-hero-value-group{align-items:flex-end}
.home-finance-left .home-hero-value-group>small,
.home-finance-right .home-hero-value-group>span{
  margin:0 0 4px;
  font-size:11px;
  font-weight:750;
  letter-spacing:.25px;
  opacity:.76;
}
.home-finance-left .home-hero-value-group>strong,
.home-finance-left .home-hero-value-group>b,
.home-finance-right .home-hero-value-group>strong,
.home-finance-right .home-hero-value-group>b{
  margin:0;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.35px;
}
.home-finance-right .home-hero-value-group>small{
  margin-top:3px;
  font-size:12px;
  font-weight:650;
  opacity:.86;
}
@media(max-width:700px){
  .home-finance-hero{padding:20px 22px}
  .home-finance-left{padding-right:18px}
  .home-finance-right{padding-left:18px}
}
@media(max-width:520px){
  .home-finance-hero{
    grid-template-columns:1fr 1fr;
    gap:0;
  }
}


/* ───────────────── RC.17 Symmetric Home hero margins ───────────────── */
/*
  The hero itself already has equal 30px left/right padding.
  Remove the extra inward offset on the right content group so the
  right-hand values sit the same visual distance from the card edge
  as the left-hand values.
*/
.home-finance-left{
  padding-left:0;
  padding-right:28px;
}
.home-finance-right{
  padding-left:28px;
  padding-right:0;
}

@media(max-width:700px){
  .home-finance-left{
    padding-left:0;
    padding-right:18px;
  }
  .home-finance-right{
    padding-left:18px;
    padding-right:0;
  }
}


/* ───────────────── RC.18 True symmetric Home hero alignment ───────────────── */
/*
  A legacy rule left justify-content:center on .home-finance-right.
  Once RC.16 converted that container to CSS Grid, the single implicit
  grid column was being centered inside the right half of the hero.
  Force a full-width column and right-align its children to the card edge.
*/
.home-finance-right{
  width:100%;
  grid-template-columns:minmax(0,1fr);
  justify-content:stretch;
  justify-items:stretch;
}

.home-finance-right .home-hero-value-group{
  width:100%;
  align-items:flex-end;
  text-align:right;
  justify-self:stretch;
}

/* Explicitly mirror the left side's outer-edge behavior. */
.home-finance-left .home-hero-value-group{
  width:100%;
  align-items:flex-start;
  text-align:left;
  justify-self:stretch;
}


/* ───────────────── RC.19 Obligation details ───────────────── */
.obligation-category-overview{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.obligation-summary-card{
  min-width:0;
  border:0;
  border-radius:18px;
  padding:16px;
  text-align:left;
  background:var(--surface);
  color:inherit;
  font:inherit;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.obligation-summary-card span{
  display:block;
  font-size:10px;
  font-weight:750;
  color:var(--muted);
  margin-bottom:8px;
}
.obligation-summary-card strong{
  display:block;
  font-size:18px;
}
.obligation-summary-card.active{
  background:rgba(255,45,146,.08);
  outline:1px solid rgba(255,45,146,.16);
}
.obligation-total-card{cursor:default}
.obligation-auto-row{cursor:default}
@media(max-width:760px){
  .obligation-category-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .obligation-total-card{grid-column:1 / -1}
}


/* ───────────────── RC.20 Appearance / Theme controls ───────────────── */
html[data-theme="day"]{color-scheme:light}
html[data-theme="night"]{color-scheme:dark}
html[data-theme="auto"]{color-scheme:light dark}

.theme-mode-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.theme-mode-option{
  border:.5px solid rgba(60,60,67,.12);
  border-radius:16px;
  background:rgba(118,118,128,.08);
  color:inherit;
  padding:14px;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.theme-mode-option strong{
  display:block;
  font-size:14px;
}
.theme-mode-option small{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.35;
  color:#8e8e93;
}
.theme-mode-option.active{
  background:rgba(0,122,255,.10);
  border-color:rgba(0,122,255,.28);
  box-shadow:0 0 0 2px rgba(0,122,255,.08);
}
html[data-theme="night"] .theme-mode-option{
  border-color:rgba(255,255,255,.10);
  background:rgba(118,118,128,.18);
}
html[data-theme="night"] .theme-mode-option.active{
  background:rgba(10,132,255,.18);
  border-color:rgba(10,132,255,.42);
}
@media(max-width:560px){
  .theme-mode-picker{grid-template-columns:1fr}
}


/* ───────────────── RC.21 Automatic monthly rates ───────────────── */
.rate-mode-pill.auto{
  background:rgba(52,199,89,.12);
  color:#248a3d;
}
.rates-actions-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
html[data-theme="night"] .rate-mode-pill.auto{
  background:rgba(48,209,88,.16);
  color:#30d158;
}


/* ───────────────── RC.22 Monthly Rate Map SAR/TRY ───────────────── */
.rate-map-row{
  grid-template-columns:80px 88px minmax(150px,1fr) minmax(150px,1fr) 100px;
}
.rate-map-row > strong{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rate-map-label{
  color:#8e8e93;
  font-size:9px;
  font-weight:750;
  letter-spacing:.18px;
}
.rate-map-row.current .rate-map-label{
  color:inherit;
  opacity:.72;
}

@media (max-width:650px){
  .rate-map{
    overflow-x:auto;
  }
  .rate-map-row{
    min-width:650px;
    grid-template-columns:70px 80px minmax(150px,1fr) minmax(150px,1fr) 90px;
  }
  .rate-map-row small{
    display:block;
  }
}


/* ───────────────── RC.24 Unified Home limit colors ───────────────── */
/*
  Cards without a limit retain their base tone.
  Cards with a percentage override the value, percentage and progress bar
  together according to the existing thresholds:
  safe <80%, warning 80–<100%, over >=100%.
*/
.home-metric.home-limit-safe > strong,
.home-metric.home-limit-safe .home-metric-progress-row > span{
  color:#22863a;
}
.home-metric.home-limit-safe .home-progress > span{
  background:#34c759;
}

.home-metric.home-limit-warning > strong,
.home-metric.home-limit-warning .home-metric-progress-row > span{
  color:#c56a00;
}
.home-metric.home-limit-warning .home-progress > span{
  background:#ff9500;
}

.home-metric.home-limit-over > strong,
.home-metric.home-limit-over .home-metric-progress-row > span{
  color:#c9342f;
}
.home-metric.home-limit-over .home-progress > span{
  background:#ff3b30;
}

.home-metric.home-limit-none > strong,
.home-metric.home-limit-none .home-metric-progress-row > span{
  color:#8e8e93;
}
.home-metric.home-limit-none .home-progress > span{
  background:#8e8e93;
}


/* ───────────────── RC.27 Analytics five KPI row ───────────────── */
/* Keep the five top Analytics cards on one row on iPad / wide screens. */
.analytics-kpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.analytics-kpi{
  min-width:0;
  padding:12px 11px;
  border-radius:15px;
}

.analytics-kpi > span{
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
}

.analytics-kpi > strong{
  margin-top:6px;
  font-size:16px;
  line-height:1.1;
  white-space:nowrap;
}

.analytics-kpi .analytics-delta,
.analytics-kpi > small{
  margin-top:5px;
  font-size:9px;
  white-space:nowrap;
}

/* Phones may wrap, but iPad widths retain the single five-card row. */
@media(max-width:620px){
  .analytics-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .analytics-kpi{
    padding:12px;
  }
}


/* ───────────────── RC.29 Transfer settlement ───────────────── */
.transfer-settlement-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.transfer-settlement-summary > div{
  padding:12px;
  border-radius:14px;
  background:rgba(118,118,128,.07);
}
.transfer-settlement-summary span,
.transfer-settlement-summary small{
  display:block;
  color:#8e8e93;
  font-size:10px;
}
.transfer-settlement-summary strong{
  display:block;
  margin:4px 0 2px;
  font-size:15px;
}
.transfer-received-line input{
  width:160px;
  border:.5px solid rgba(60,60,67,.18);
  border-radius:12px;
  background:rgba(118,118,128,.08);
  color:inherit;
  padding:10px 11px;
  font:inherit;
  outline:none;
}
.home-transfer-settlement{
  gap:2px;
}
.home-transfer-detail{
  opacity:.86;
  font-size:9px !important;
  line-height:1.15;
}
html[data-theme="night"] .transfer-settlement-summary > div,
html[data-theme="night"] .transfer-received-line input{
  background:rgba(118,118,128,.18);
  border-color:rgba(255,255,255,.08);
}
@media(max-width:620px){
  .transfer-settlement-summary{
    grid-template-columns:1fr;
  }
}


/* ───────────────── RC.30 Home hero center logo ───────────────── */
.home-finance-hero{
  position:relative;
  isolation:isolate;
}

.home-finance-left,
.home-finance-right{
  position:relative;
  z-index:2;
}

.home-hero-center-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:clamp(50px,6.2vw,76px);
  height:clamp(50px,6.2vw,76px);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.home-hero-center-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:22%;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.20));
}

.home-finance-left{
  padding-right:clamp(40px,5vw,58px);
}
.home-finance-right{
  padding-left:clamp(40px,5vw,58px);
}

@media(max-width:700px){
  .home-hero-center-logo{
    width:clamp(44px,7vw,58px);
    height:clamp(44px,7vw,58px);
  }
  .home-finance-left{
    padding-right:clamp(34px,5vw,44px);
  }
  .home-finance-right{
    padding-left:clamp(34px,5vw,44px);
  }
}


/* ───────────────── RC.31 Larger Home hero logo ───────────────── */
/*
  Increase the centered Miza mark so it has visual weight comparable
  to the hero's primary figures while preserving safe spacing.
*/
.home-hero-center-logo{
  width:clamp(78px,9.2vw,108px);
  height:clamp(78px,9.2vw,108px);
}

.home-finance-left{
  padding-right:clamp(58px,7vw,78px);
}
.home-finance-right{
  padding-left:clamp(58px,7vw,78px);
}

@media(max-width:700px){
  .home-hero-center-logo{
    width:clamp(64px,9vw,82px);
    height:clamp(64px,9vw,82px);
  }
  .home-finance-left{
    padding-right:clamp(48px,6.5vw,60px);
  }
  .home-finance-right{
    padding-left:clamp(48px,6.5vw,60px);
  }
}


/* ───────────────── RC.32 Maximum safe Home hero logo ───────────────── */
/*
  Enlarge the centered Miza logo as much as practical without touching
  the blue card bounds or the four financial value groups.
*/
.home-hero-center-logo{
  width:clamp(118px,13vw,148px);
  height:clamp(118px,13vw,148px);
  max-width:calc(100% - 32px);
  max-height:calc(100% - 20px);
}

.home-finance-left{
  padding-right:clamp(78px,9vw,96px);
}
.home-finance-right{
  padding-left:clamp(78px,9vw,96px);
}

@media(max-width:700px){
  .home-hero-center-logo{
    width:clamp(92px,12vw,118px);
    height:clamp(92px,12vw,118px);
    max-height:calc(100% - 18px);
  }
  .home-finance-left{
    padding-right:clamp(62px,8vw,76px);
  }
  .home-finance-right{
    padding-left:clamp(62px,8vw,76px);
  }
}


/* RC.33 — Dark/System-Dark Home percentage color parity */
html[data-theme="night"] .home-limit-safe strong,
html[data-theme="night"] .home-limit-safe small{color:#34c759!important}
html[data-theme="night"] .home-limit-safe .progress-fill,
html[data-theme="night"] .home-limit-safe [class*="progress"]>span{background:#34c759!important}

html[data-theme="night"] .home-limit-warning strong,
html[data-theme="night"] .home-limit-warning small{color:#ff9f0a!important}
html[data-theme="night"] .home-limit-warning .progress-fill,
html[data-theme="night"] .home-limit-warning [class*="progress"]>span{background:#ff9f0a!important}

html[data-theme="night"] .home-limit-over strong,
html[data-theme="night"] .home-limit-over small{color:#ff453a!important}
html[data-theme="night"] .home-limit-over .progress-fill,
html[data-theme="night"] .home-limit-over [class*="progress"]>span{background:#ff453a!important}

@media (prefers-color-scheme:dark){
  html[data-theme="auto"] .home-limit-safe strong,
  html[data-theme="auto"] .home-limit-safe small{color:#34c759!important}
  html[data-theme="auto"] .home-limit-safe .progress-fill,
  html[data-theme="auto"] .home-limit-safe [class*="progress"]>span{background:#34c759!important}

  html[data-theme="auto"] .home-limit-warning strong,
  html[data-theme="auto"] .home-limit-warning small{color:#ff9f0a!important}
  html[data-theme="auto"] .home-limit-warning .progress-fill,
  html[data-theme="auto"] .home-limit-warning [class*="progress"]>span{background:#ff9f0a!important}

  html[data-theme="auto"] .home-limit-over strong,
  html[data-theme="auto"] .home-limit-over small{color:#ff453a!important}
  html[data-theme="auto"] .home-limit-over .progress-fill,
  html[data-theme="auto"] .home-limit-over [class*="progress"]>span{background:#ff453a!important}
}


/* RC.34 — Total Commitments explanatory modal */
.home-commitments-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.46);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.home-commitments-overlay[hidden]{display:none!important}
.home-commitments-modal{
  width:min(520px,calc(100vw - 36px));
  padding:18px;
  border-radius:22px;
  background:#fff;
  color:#1c1c1e;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.home-commitments-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.home-commitments-modal-head small{
  display:block;
  color:#8e8e93;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.home-commitments-modal-head h3{
  margin:4px 0 0;
  font-size:26px;
}
.home-commitments-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(118,118,128,.14);
  color:inherit;
  font-size:24px;
  line-height:1;
}
.home-commitments-items{display:grid;gap:9px}
.home-commitments-items>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(118,118,128,.08);
}
.home-commitments-items span{font-size:12px;color:#636366;font-weight:650}
.home-commitments-items strong{font-size:15px;white-space:nowrap}
.home-commitments-total{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(60,60,67,.14);
}
.home-commitments-total span{font-size:10px;color:#8e8e93}
.home-commitments-total strong{font-size:13px;white-space:nowrap}

html[data-theme="night"] .home-commitments-modal{
  background:#1c1c1e;
  color:#f2f2f7;
}
html[data-theme="night"] .home-commitments-items>div{background:rgba(118,118,128,.18)}
html[data-theme="night"] .home-commitments-items span{color:#c7c7cc}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .home-commitments-modal{background:#1c1c1e;color:#f2f2f7}
  html[data-theme="auto"] .home-commitments-items>div{background:rgba(118,118,128,.18)}
  html[data-theme="auto"] .home-commitments-items span{color:#c7c7cc}
}

/* RC.36 — Private card labels */
.private-card-label-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.private-card-label-grid label{display:grid;gap:6px;color:#8e8e93;font-size:10px;font-weight:700}
.private-card-label-grid input{width:100%;box-sizing:border-box;border:.5px solid rgba(60,60,67,.18);border-radius:12px;background:rgba(118,118,128,.08);color:inherit;padding:10px 11px;font:inherit}
html[data-theme="night"] .private-card-label-grid input{background:rgba(118,118,128,.18);border-color:rgba(255,255,255,.08)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .private-card-label-grid input{background:rgba(118,118,128,.18);border-color:rgba(255,255,255,.08)}}
@media(max-width:620px){.private-card-label-grid{grid-template-columns:1fr}}


/* ───────────────── RC.40 PDF statement preview ───────────────── */
.statement-preview{
  width:100%;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(60,60,67,.12);
}
.statement-preview-message{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,122,255,.08);
  font-size:11px;
  line-height:1.4;
}
.statement-preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.statement-preview-head strong,
.statement-preview-head small{display:block}
.statement-preview-head small{margin-top:3px;color:#8e8e93;font-size:10px}
.statement-preview-list{
  display:grid;
  gap:8px;
  max-height:420px;
  overflow:auto;
  overscroll-behavior:contain;
}
.statement-preview-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) minmax(135px,180px);
  align-items:center;
  gap:9px;
  padding:10px;
  border-radius:13px;
  background:rgba(118,118,128,.07);
}
.statement-preview-check{
  display:flex;
  align-items:center;
  justify-content:center;
}
.statement-preview-check input{width:18px;height:18px}
.statement-preview-main{min-width:0}
.statement-preview-main strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.statement-preview-main small{
  display:block;
  margin-top:3px;
  color:#8e8e93;
  font-size:10px;
}
.statement-preview-row select{
  width:100%;
  min-width:0;
  border:.5px solid rgba(60,60,67,.16);
  border-radius:10px;
  background:rgba(255,255,255,.75);
  color:inherit;
  padding:8px;
  font:inherit;
  font-size:10px;
}
html[data-theme="night"] .statement-preview-row{
  background:rgba(118,118,128,.18);
}
html[data-theme="night"] .statement-preview-row select{
  background:rgba(118,118,128,.22);
  border-color:rgba(255,255,255,.08);
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .statement-preview-row{background:rgba(118,118,128,.18)}
  html[data-theme="auto"] .statement-preview-row select{
    background:rgba(118,118,128,.22);
    border-color:rgba(255,255,255,.08);
  }
}
@media(max-width:700px){
  .statement-preview-head{display:grid}
  .statement-preview-row{
    grid-template-columns:26px minmax(0,1fr);
  }
  .statement-preview-row select{
    grid-column:2;
  }
}


/* ───────────────── RC.41 Miscellaneous currency + transfer override ───────────────── */
.misc-amount-currency-grid{
  grid-template-columns:minmax(0,1fr) minmax(120px,.55fr);
  align-items:end;
}
.misc-amount-currency-grid select{
  width:100%;
}
@media(max-width:620px){
  .misc-amount-currency-grid{
    grid-template-columns:minmax(0,1fr) minmax(105px,.55fr);
  }
}

/* RC.42 Miscellaneous Amount Paid currency */
.misc-paid-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.55fr);gap:10px;align-items:end}
.misc-paid-grid select{width:100%}
.misc-summary small{display:block;margin-top:2px;color:#8e8e93;font-size:9px}
@media(max-width:620px){.misc-paid-grid{grid-template-columns:minmax(0,1fr) minmax(105px,.55fr)}}

/* RC.43 Remaining Balance USD */
.home-remaining-left em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:700;opacity:.82}


/* ───────────────── RC.46 Global Undo contrast ───────────────── */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.global-undo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:38px;
  padding:0 13px;
  border:1px solid #006fe6;
  border-radius:12px;
  background:#007aff;
  color:#ffffff;
  box-shadow:0 2px 8px rgba(0,122,255,.22);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.global-undo-button:active:not(:disabled){
  transform:translateY(1px);
}
.global-undo-button:disabled{
  color:#5f6368;
  background:#dfe3e8;
  border-color:#b9c0c8;
  box-shadow:none;
  opacity:1;
  cursor:default;
}
html[data-theme="night"] .global-undo-button{
  background:#0a84ff;
  color:#ffffff;
  border-color:#64a8ff;
  box-shadow:0 2px 10px rgba(10,132,255,.34);
}
html[data-theme="night"] .global-undo-button:disabled{
  background:#303034;
  color:#b0b0b5;
  border-color:#5a5a5f;
  box-shadow:none;
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .global-undo-button{
    background:#0a84ff;
    color:#ffffff;
    border-color:#64a8ff;
    box-shadow:0 2px 10px rgba(10,132,255,.34);
  }
  html[data-theme="auto"] .global-undo-button:disabled{
    background:#303034;
    color:#b0b0b5;
    border-color:#5a5a5f;
    box-shadow:none;
  }
}
@media(max-width:620px){
  .global-undo-button span{display:none}
  .global-undo-button{min-width:38px;padding:0 10px}
}


/* ───────────────── RC.55 Household Expenses separation ───────────────── */
.household-entries-section{
  margin-top:12px;
  border:1px solid rgba(0,122,255,.10);
}
.household-list-heading{
  align-items:center;
  gap:12px;
}
.household-list-heading > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.household-list-heading > div > strong{
  font-size:12px;
}
.household-list-heading > div > small{
  color:#8e8e93;
  font-size:10px;
  font-weight:600;
}
.household-add-button{
  margin-left:auto;
  background:#007aff;
  color:#fff;
  border-color:#007aff;
}
.basic-expenses-regular-section{
  margin-top:14px;
}
.household-view-toggle-wrap{
  display:flex;
  justify-content:center;
  padding:10px 12px 12px;
  border-top:1px solid rgba(118,118,128,.10);
}
.household-view-toggle{
  border:0;
  background:rgba(0,122,255,.10);
  color:#007aff;
  border-radius:10px;
  padding:7px 14px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
html[data-theme="night"] .household-view-toggle{
  background:rgba(10,132,255,.18);
  color:#64a8ff;
}
html[data-theme="night"] .household-entries-section{
  border-color:rgba(10,132,255,.18);
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .household-view-toggle{
    background:rgba(10,132,255,.18);
    color:#64a8ff;
  }
  html[data-theme="auto"] .household-entries-section{
    border-color:rgba(10,132,255,.18);
  }
}


/* ───────────────── RC.56 iPhone Home layout only ───────────────── */
@media(max-width:560px){
  /* Header: keep brand readable and move controls to their own row. */
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand icon"
      "actions actions";
    gap:9px 12px;
    align-items:center;
    padding:calc(12px + env(safe-area-inset-top)) 14px 11px;
  }
  .topbar-brand-block{
    grid-area:brand;
    min-width:0;
  }
  .brand{
    font-size:24px;
    line-height:1.05;
    letter-spacing:-.55px;
    white-space:nowrap;
  }
  .subtitle{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 6px;
    margin-top:4px;
    font-size:10px;
    line-height:1.2;
  }
  .pwa-readiness-badge{
    margin-left:0;
  }
  .topbar-app-icon{
    grid-area:icon;
    position:static;
    left:auto;
    top:auto;
    transform:none;
    justify-self:end;
    width:40px;
    height:40px;
    border-radius:11px;
  }
  .topbar-actions{
    grid-area:actions;
    width:100%;
    justify-content:flex-end;
  }
  .topbar select{
    min-height:38px;
    padding:8px 11px;
  }

  /* Main blue finance card: logo gets its own row, then the four values
     are arranged as a clean 2×2 grid. This prevents the centered logo
     from overlapping the figures on narrow iPhones. */
  .home-finance-hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    gap:15px 14px;
    min-height:0;
    padding:18px 17px 20px;
    border-radius:22px;
  }
  .home-finance-left,
  .home-finance-right{
    display:contents;
  }
  .home-hero-center-logo{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    grid-column:1 / -1;
    grid-row:1;
    justify-self:center;
    width:76px;
    height:76px;
    max-width:none;
    max-height:none;
  }
  .home-finance-left .home-hero-value-group:nth-child(1){
    grid-column:1;
    grid-row:2;
    align-items:flex-start;
    text-align:left;
  }
  .home-finance-right .home-hero-value-group:nth-child(1){
    grid-column:2;
    grid-row:2;
    align-items:flex-end;
    text-align:right;
  }
  .home-finance-left .home-hero-value-group:nth-child(2){
    grid-column:1;
    grid-row:3;
    align-items:flex-start;
    text-align:left;
  }
  .home-finance-right .home-hero-value-group:nth-child(2){
    grid-column:2;
    grid-row:3;
    align-items:flex-end;
    text-align:right;
  }
  .home-finance-left,
  .home-finance-right{
    padding:0;
    border:0;
  }
  .home-finance-left .home-hero-value-group,
  .home-finance-right .home-hero-value-group{
    width:100%;
    min-width:0;
  }
  .home-finance-left .home-hero-value-group>small,
  .home-finance-right .home-hero-value-group>span{
    margin-bottom:4px;
    font-size:9px;
    line-height:1.15;
    letter-spacing:.16px;
  }
  .home-finance-left .home-hero-value-group>strong,
  .home-finance-left .home-hero-value-group>b,
  .home-finance-right .home-hero-value-group>strong,
  .home-finance-right .home-hero-value-group>b{
    max-width:100%;
    font-size:clamp(18px,5.7vw,22px);
    line-height:1.06;
    letter-spacing:-.25px;
    white-space:nowrap;
  }
  .home-finance-right .home-hero-value-group>small{
    font-size:10px;
    line-height:1.15;
  }
  .home-transfer-detail{
    font-size:8px !important;
    line-height:1.12;
  }

  /* Remaining Balance: retain the same data but give the detail block
     a clear second row on phones instead of forcing a cramped side-by-side card. */
  .home-remaining-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:18px 16px 27px;
    border-radius:21px;
  }
  .home-remaining-left{
    gap:11px;
    align-items:center;
  }
  .home-remaining-icon{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:12px;
    font-size:23px;
  }
  .home-remaining-left span{
    font-size:9px;
  }
  .home-remaining-left strong{
    margin-top:3px;
    font-size:22px;
    line-height:1.08;
  }
  .home-remaining-left b{
    font-size:18px;
    line-height:1.08;
  }
  .home-remaining-left em{
    font-size:11px;
  }
  .home-remaining-right{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px 10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.14);
    text-align:left;
    font-size:9px;
    opacity:.88;
  }
  .home-remaining-right small{
    text-align:right;
    white-space:nowrap;
  }
  .home-remaining-right b{
    grid-column:2;
    justify-self:end;
    margin-top:2px;
    font-size:15px;
  }
  .home-remaining-progress{
    left:16px;
    right:16px;
    bottom:11px;
  }

  .content{
    padding:14px;
  }
}


/* ───────────────── RC.66 Multi-step Undo ───────────────── */
.global-undo-button{
  position:relative;
}
.global-undo-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:4px;
  border-radius:999px;
  background:rgba(0,122,255,.14);
  color:#0066d6;
  font-size:10px;
  line-height:1;
  font-weight:800;
}
html[data-theme="night"] .global-undo-count{
  background:rgba(10,132,255,.24);
  color:#7db8ff;
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .global-undo-count{
    background:rgba(10,132,255,.24);
    color:#7db8ff;
  }
}
@media(max-width:560px){
  .global-undo-count{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    margin:0;
    font-size:9px;
    box-shadow:0 0 0 2px var(--page-bg, #fff);
  }
}

/* ───────────────── RC.79 Entries layout ───────────────── */
.household-combined-card{
  overflow:hidden;
  margin:0 0 14px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  border:.5px solid rgba(0,122,255,.14);
  box-shadow:0 7px 20px rgba(0,0,0,.045);
}
.household-combined-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:.5px solid rgba(60,60,67,.12);
}
.household-combined-heading > div{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.household-combined-heading strong{
  font-size:14px;
  color:inherit;
}
.household-combined-heading small,
.basic-expenses-list-heading small{
  color:#8e8e93;
  font-size:10px;
  font-weight:600;
}
.household-combined-card .household-summary{
  margin:10px 12px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.household-entry-rows .entry-row:last-child{ border-bottom:.5px solid rgba(60,60,67,.12); }
.basic-expenses-list-heading{
  align-items:center;
}
.basic-expenses-list-heading > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.basic-expenses-list-heading > div > strong{
  color:inherit;
  font-size:14px;
}
.basic-expenses-regular-section{
  margin-bottom:28px;
}
html[data-theme="night"] .household-combined-card{
  background:rgba(28,28,30,.96);
  border-color:rgba(10,132,255,.22);
}
html[data-theme="night"] .household-combined-heading{
  border-color:rgba(84,84,88,.60);
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .household-combined-card{
    background:rgba(28,28,30,.96);
    border-color:rgba(10,132,255,.22);
  }
  html[data-theme="auto"] .household-combined-heading{
    border-color:rgba(84,84,88,.60);
  }
}