:root {
  --yellow: #f4c95d;
  --yellow-soft: #fff4c8;
  --yellow-pale: #fffaf0;
  --paper: #fffdf8;
  --ink: #3d3425;
  --muted: #8d816d;
  --line: rgba(92, 72, 36, .13);
  --income: #2f82d5;
  --income-soft: #eaf5ff;
  --expense: #e65d5d;
  --expense-soft: #fff0ef;
  --mint: #70b79c;
  --shadow: 0 10px 28px rgba(98, 72, 25, .10);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  font-family: Inter, ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: #f4ead3;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { background: radial-gradient(circle at top, #fff7d8 0, #f6ead0 52%, #eadcc0 100%); }
body, body *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
button, input, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(47,130,213,.28); outline-offset: 2px; }

.app-shell {
  width: min(100%, 980px);
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(255,253,248,.92);
  box-shadow: 0 0 60px rgba(65, 48, 19, .12);
  overflow: hidden;
}

.topbar {
  min-height: 66px;
  padding: calc(9px + env(safe-area-inset-top)) 16px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,248,.96);
  backdrop-filter: blur(18px);
  z-index: 10;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: var(--yellow); font-size: 21px; font-weight: 950; box-shadow: 0 7px 16px rgba(202,153,39,.22); }
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand strong { font-size: 18px; line-height: 1.1; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.save-status { font-size: 10px; color: var(--muted); }
.icon-button { width: 38px; height: 38px; border-radius: 14px; background: #f7edda; font-weight: 900; letter-spacing: 2px; }

.workspace { min-height: 0; position: relative; overflow: hidden; }
.mode-panel { position: absolute; inset: 0; padding: 10px 10px 8px; display: none; grid-template-rows: auto minmax(0,1fr); gap: 9px; overflow: hidden; }
.mode-panel.active { display: grid; animation: mode-in .22s ease both; }
@keyframes mode-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hero-card, .content-card { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-card { border-radius: var(--radius-xl); padding: 13px 15px; overflow: hidden; }
.hero-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hero-label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.hero-date { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.jump-buttons, .toolbar-actions { display: flex; align-items: center; gap: 6px; }
.jump-grid { width: 154px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.jump-grid .mini-button { min-height: 29px; padding: 0 7px; font-size: 9px; }
.mini-button, .add-button, .text-button { min-height: 34px; border-radius: 13px; padding: 0 11px; font-size: 11px; font-weight: 900; background: #f5ecd9; }
.mini-button.strong, .add-button { background: var(--yellow); box-shadow: 0 5px 12px rgba(202,153,39,.18); }
.hero-number { margin: 5px 0 2px; font-size: clamp(38px, 10vw, 54px); line-height: 1; font-weight: 950; letter-spacing: -.055em; font-variant-numeric: tabular-nums; transform-origin: left center; }
.hero-number.compact { font-size: clamp(34px, 9vw, 48px); }
.hero-number.squish, .summary-grid strong.squish { animation: money-squish .42s cubic-bezier(.2,.85,.25,1.25); }
.hero-number.drag-preview { transform: scale(1.025, .975); }
@keyframes money-squish { 0% { transform: scale(1); } 34% { transform: scale(1.055,.93); } 70% { transform: scale(.985,1.025); } 100% { transform: scale(1); } }
.balance-underrow { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.balance-underrow strong { color: var(--ink); }
.balance-bar { height: 7px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(230,93,93,.16), rgba(244,201,93,.2), rgba(47,130,213,.14)); }
.balance-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e97870, #f4c95d, #5b9ee2); transition: width .28s cubic-bezier(.2,.8,.2,1); }
.asset-strip { width: 100%; margin-top: 8px; min-height: 35px; padding: 0 11px; border-radius: 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; background: #fff7de; text-align: left; }
.asset-strip span, .asset-strip small { color: var(--muted); font-size: 10px; }
.asset-strip strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.summary-grid { margin-top: 8px; display: grid; gap: 6px; }
.summary-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.summary-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.summary-grid > div { min-width: 0; padding: 8px 9px; border-radius: 14px; background: #fff7de; }
.subscription-summary .summary-grid > div { background: #eef8f3; }
.summary-grid span { display: block; color: var(--muted); font-size: 9px; white-space: nowrap; }
.summary-grid strong { display: block; margin-top: 2px; font-size: 13px; line-height: 1.1; font-variant-numeric: tabular-nums; transform-origin: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content-card { min-height: 0; border-radius: var(--radius-lg); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.content-toolbar { min-height: 58px; padding: 10px 12px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.eyebrow { color: #af8640; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
h1, h2, p { margin: 0; }
.content-toolbar h1 { margin-top: 1px; font-size: 16px; line-height: 1.15; }
.compact-date input { width: 42px; height: 34px; padding: 0; border: 0; border-radius: 12px; background: #f5ecd9; color: transparent; position: relative; }
.compact-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .72; cursor: pointer; }
.text-button { background: transparent; color: var(--expense); padding-inline: 5px; }
.main-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(132,104,52,.24) transparent; }
.main-scroll::-webkit-scrollbar { width: 5px; }
.main-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(132,104,52,.24); }

.timeline-list { padding: 10px 12px 26px; }
.date-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.event-row { display: flex; margin: 5px 0; }
.event-row.income { justify-content: flex-start; }
.event-row.expense { justify-content: flex-end; }
.event-bubble { width: min(86%, 520px); padding: 10px 11px 8px; border-radius: 17px; }
.event-row.income .event-bubble { background: var(--income-soft); border-bottom-left-radius: 6px; }
.event-row.expense .event-bubble { background: var(--expense-soft); border-bottom-right-radius: 6px; }
.event-row.installment-group .event-bubble { width: min(94%, 560px); background: #f3efff; border: 1px solid rgba(111,86,174,.12); }
.event-bubble-head, .event-bubble-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.event-bubble-head strong { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-amount { flex: 0 0 auto; font-size: 14px; font-weight: 950; font-variant-numeric: tabular-nums; }
.income .event-amount { color: var(--income); }
.expense .event-amount { color: var(--expense); }
.event-bubble-foot { margin-top: 6px; color: var(--muted); font-size: 9px; }
.event-delete, .row-menu { padding: 2px 4px; background: transparent; color: var(--muted); font-size: 10px; }
.virtual-line-slot { min-height: 12px; display: flex; align-items: center; transition: background .12s; }
.virtual-line { width: 100%; height: 12px; position: relative; cursor: grab; touch-action: none; }
.virtual-line::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #d7a82e, #f4c95d, #d7a82e); box-shadow: 0 3px 10px rgba(180,132,24,.28); }
.virtual-line::after { content: ""; position: absolute; left: 50%; top: -2px; width: 18px; height: 18px; border: 3px solid #fff8dc; border-radius: 50%; background: #d7a82e; transform: translateX(-50%); box-shadow: 0 3px 9px rgba(77,57,20,.22); }
.virtual-line.dragging { opacity: .25; }
.drag-ghost { position: fixed; z-index: 1000; height: 8px; border-radius: 999px; background: var(--yellow); box-shadow: 0 6px 18px rgba(180,132,24,.35); pointer-events: none; }

.check-list, .subscription-list { padding: 10px 11px 24px; display: grid; gap: 8px; }
.check-item, .subscription-item { min-height: 68px; border: 1px solid var(--line); border-radius: 18px; background: #fffefa; padding: 10px; display: grid; align-items: center; gap: 9px; }
.check-item { grid-template-columns: auto minmax(0,1fr) auto; }
.subscription-item { grid-template-columns: minmax(0,1fr) auto auto; }
.check-item.checked { background: #fff8dc; border-color: rgba(215,168,46,.34); }
.round-check { width: 31px; height: 31px; border-radius: 50%; background: #f2eadb; color: transparent; font-weight: 950; }
.check-item.checked .round-check { background: var(--yellow); color: var(--ink); }
.item-main { min-width: 0; }
.item-name { display: block; font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 7px; color: var(--muted); font-size: 9px; }
.item-side { min-width: 72px; text-align: right; }
.item-side strong { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.item-side small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.toggle-switch { width: 40px; height: 23px; padding: 3px; border-radius: 999px; background: #ded8ca; position: relative; vertical-align: middle; }
.toggle-switch::after { content: ""; width: 17px; height: 17px; border-radius: 50%; background: #fff; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.16); transition: transform .2s; }
.toggle-switch.active { background: var(--mint); }
.toggle-switch.active::after { transform: translateX(17px); }
.empty-state { min-height: 150px; padding: 24px 12px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 14px; }
.empty-state p { margin-top: 5px; font-size: 10px; line-height: 1.55; }
.empty-bubble { width: 45px; height: 45px; margin-bottom: 8px; border-radius: 17px; display: grid; place-items: center; background: #fff1b8; color: #a97a11; font-weight: 950; font-size: 20px; }

.bottom-nav { min-height: 66px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; border-top: 1px solid var(--line); background: rgba(255,253,248,.97); backdrop-filter: blur(18px); z-index: 10; }
.nav-button { min-height: 48px; border-radius: 17px; display: grid; place-items: center; align-content: center; gap: 1px; background: transparent; color: var(--muted); }
.nav-button span { font-size: 16px; line-height: 1; }
.nav-button strong { font-size: 10px; }
.nav-button.active { background: var(--yellow-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(202,153,39,.15); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(43,35,23,.28); backdrop-filter: blur(2px); }
.sheet-backdrop.show { display: block; }
.mobile-sheet { position: fixed; z-index: 80; left: 50%; bottom: 0; width: min(100%, 620px); max-height: min(82dvh, 680px); padding: 9px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 28px 28px 0 0; background: var(--paper); box-shadow: 0 -18px 50px rgba(55,42,21,.22); transform: translate(-50%, 105%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2,.85,.25,1), opacity .18s; }
.mobile-sheet.mobile-open { transform: translate(-50%,0); opacity: 1; pointer-events: auto; }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: #ded5c3; }
.section-heading, .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2, .dialog-header h2 { margin-top: 2px; font-size: 20px; }
.sheet-close, .dialog-close { width: 36px; height: 36px; border-radius: 13px; background: #f4ecdf; font-size: 20px; }
.sign-toggle { margin: 12px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sign-button { min-height: 42px; border-radius: 15px; background: #f4ecdf; font-size: 12px; font-weight: 900; }
.sign-button.income.active { background: var(--income-soft); color: var(--income); box-shadow: inset 0 0 0 2px rgba(47,130,213,.18); }
.sign-button.expense.active { background: var(--expense-soft); color: var(--expense); box-shadow: inset 0 0 0 2px rgba(230,93,93,.18); }
.sheet-form { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { min-width: 0; display: grid; gap: 5px; }
.field.full, .primary-button.full { grid-column: 1 / -1; }
.field > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.field input, .field select, .money-input, .percent-input { width: 100%; min-height: 43px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.field input, .field select { padding: 0 11px; }
.money-input, .percent-input { display: flex; align-items: center; padding: 0 10px; }
.money-input span, .percent-input span { color: var(--muted); font-weight: 900; }
.money-input input, .percent-input input { min-width: 0; height: 39px; padding: 0 6px; border: 0; background: transparent; }
.primary-button { min-height: 44px; padding: 0 16px; border-radius: 15px; background: var(--yellow); font-size: 12px; font-weight: 950; box-shadow: 0 7px 16px rgba(202,153,39,.2); }
.quick-actions { margin-top: 9px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.quick-actions button { min-height: 34px; border-radius: 12px; background: #f6efe3; font-size: 10px; font-weight: 800; }
.calculation-note { margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.sheet-dialog { width: min(92vw, 620px); max-height: 86dvh; padding: 0; border: 0; border-radius: 26px; background: transparent; overflow: visible; }
.sheet-dialog::backdrop { background: rgba(43,35,23,.34); backdrop-filter: blur(3px); }
.dialog-shell { max-height: 86dvh; padding: 17px; border-radius: 26px; overflow-y: auto; background: var(--paper); box-shadow: 0 20px 60px rgba(55,42,21,.25); }
.dialog-copy { margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.asset-list { display: grid; gap: 7px; max-height: 35dvh; overflow-y: auto; }
.asset-row { display: grid; grid-template-columns: minmax(0,1fr) 110px auto; gap: 7px; align-items: center; padding: 8px; border-radius: 15px; background: #faf4e8; }
.asset-row > div { min-width: 0; }
.asset-name-edit, .asset-amount-edit { width: 100%; min-height: 35px; border: 1px solid var(--line); border-radius: 11px; padding: 0 9px; background: #fff; }
.asset-amount-edit { text-align: right; }
.asset-type-tag { margin: 3px 0 0 3px; color: var(--muted); font-size: 8px; }
.asset-add-grid { margin-top: 10px; display: grid; grid-template-columns: 1.2fr .8fr 1fr auto; gap: 7px; align-items: end; }
.dialog-footer { margin-top: 12px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.dialog-footer strong { font-size: 20px; }
.compact-button { min-height: 38px; }
.settings-list { margin-top: 12px; display: grid; gap: 7px; }
.settings-row { min-height: 60px; padding: 10px 12px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; text-align: left; background: #f7f0e4; }
.settings-row span { display: grid; gap: 3px; }
.settings-row strong { font-size: 12px; }
.settings-row small { color: var(--muted); font-size: 9px; }
.file-row { position: relative; cursor: pointer; }
.file-row input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.danger-row { color: var(--expense); }
.about-box { margin-top: 12px; padding: 13px; border-radius: 16px; background: #fff6d8; }
.about-box strong { font-size: 12px; }
.about-box p, .about-box small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 14px; background: rgba(56,47,33,.94); color: #fff; font-size: 11px; transform: translate(-50%,18px); opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 430px) {
  .jump-grid { width: 144px; }
  .jump-grid .mini-button { padding-inline: 5px; }
  .mode-panel { padding-inline: 8px; }
  .hero-card { padding: 12px 13px; }
  .summary-grid > div { padding-inline: 7px; }
  .summary-grid strong { font-size: 12px; }
  .content-toolbar { padding-inline: 10px; }
  .save-status { display: none; }
  .asset-add-grid { grid-template-columns: 1fr 1fr; }
  .asset-add-grid .field:nth-child(3), .asset-add-grid .primary-button { grid-column: span 1; }
}

@media (min-width: 700px) {
  .mode-panel { padding: 14px; gap: 12px; }
  .hero-card { width: 100%; padding: 16px 20px; }
  .content-card { border-radius: 26px; }
  .hero-number { font-size: 56px; }
  .content-toolbar { padding-inline: 18px; }
  .timeline-list, .check-list, .subscription-list { padding-inline: 18px; }
}

/* v1.3: richer simulation, commitments and expandable future list */
.simulator-panel {
  --future-hero-h: 174px;
  grid-template-rows: var(--future-hero-h) 18px minmax(0, 1fr);
  gap: 3px;
}
.simulator-panel .balance-card { height: 100%; transition: padding .18s ease; }
.future-resize-handle {
  min-height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  background: transparent;
  touch-action: none;
  cursor: ns-resize;
}
.future-resize-handle span { width: 46px; height: 5px; border-radius: 999px; background: #d9ccb3; box-shadow: inset 0 1px 1px rgba(255,255,255,.8); }
.future-resize-handle small { display: none; color: var(--muted); font-size: 7px; }
.simulator-panel.future-expanded .balance-card { padding-top: 9px; padding-bottom: 9px; }
.simulator-panel.future-expanded .hero-number { margin-top: 2px; font-size: clamp(31px, 8vw, 40px); }
.simulator-panel.future-expanded .balance-bar,
.simulator-panel.future-expanded .asset-strip { display: none; }
.simulator-panel.future-expanded .hero-date { margin-top: 0; }
.simulator-panel.future-expanded .balance-underrow { margin-top: 3px; }

.future-card { grid-template-rows: auto auto minmax(0,1fr); }
.filter-strip {
  padding: 6px 9px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.filter-strip::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eee7dc;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(82,64,32,.05);
}
.filter-chip.active { background: #fff0b7; color: #795811; box-shadow: inset 0 0 0 1px rgba(202,153,39,.2); }
.filter-chip.fixed { opacity: 1; background: var(--income-soft); color: var(--income); }
.filter-chip.asset-filter { background: #eff4ff; color: #496b9d; }

.event-bubble-head { align-items: flex-start; }
.event-bubble-head strong,
.item-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.event-row.excluded { opacity: .52; filter: saturate(.55); }
.event-row.excluded .event-bubble { border: 1px dashed rgba(100,85,63,.24); }
.event-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: 8px; }
.event-tags > span { padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.62); }
.status-badge.confirmed { color: var(--income); }
.status-badge.tentative { color: #a66c00; }
.status-badge.vague { color: #7655a6; }
.event-tags .excluded-tag { color: var(--expense); background: rgba(255,240,239,.9); }
.tiny-memo { margin-top: 5px; color: rgba(92,79,58,.56); font-size: 8px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: flex; gap: 8px; }
.row-actions button, .commitment-actions > button:not(.toggle-switch):not(.repay-button) { padding: 2px 3px; background: transparent; color: var(--muted); font-size: 9px; }
.breakdown-toggle { width: 100%; min-height: 28px; margin-top: 6px; padding: 0 8px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.58); color: #6f5b9f; font-size: 9px; font-weight: 900; }
.installment-breakdown { display: none; margin-top: 6px; border-top: 1px solid rgba(90,69,140,.1); }
.installment-breakdown.open { display: grid; }
.installment-detail-row { min-height: 38px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(90,69,140,.08); }
.installment-detail-row:last-child { border-bottom: 0; }
.installment-detail-row.excluded { opacity: .48; }
.installment-detail-row div { min-width: 0; }
.installment-detail-row strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.installment-detail-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.installment-detail-row > span { font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; }
.installment-detail-row > button { padding: 3px 4px; background: transparent; color: var(--muted); font-size: 8px; }
.input-hint { margin: -2px 0 2px; padding: 7px 9px; border-radius: 11px; background: #f7f0e4; color: var(--muted); font-size: 8px; line-height: 1.35; }

.field textarea {
  width: 100%;
  min-height: 58px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}

.asset-list { max-height: 40dvh; }
.asset-row {
  grid-template-columns: auto minmax(0,1fr) 100px auto;
  gap: 7px;
}
.asset-edit-stack { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.asset-type-edit { max-width: 116px; min-height: 35px; border: 1px solid var(--line); border-radius: 11px; padding: 0 6px; background: #fff; color: var(--muted); font-size: 9px; }
.asset-empty { min-height: 100px; }
.standalone-toggle { margin: 10px 0; min-height: 54px; padding: 9px 10px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f7f0e4; }
.standalone-toggle > span { min-width: 0; display: grid; gap: 2px; }
.standalone-toggle strong { font-size: 11px; }
.standalone-toggle small { color: var(--muted); font-size: 8px; line-height: 1.3; }

.bottom-nav { grid-template-columns: repeat(4,1fr); gap: 5px; }
.nav-button { border-radius: 15px; }
.nav-button strong { font-size: 9px; }

.commitments-summary .summary-grid > div { background: #f4f0ff; }
.commitment-toolbar { min-height: 50px; justify-content: center; }
.segment-control { width: 100%; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 14px; background: #f2ebdf; }
.segment-button { min-height: 34px; border-radius: 11px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 900; }
.segment-button.active { background: #fff; color: var(--ink); box-shadow: 0 3px 9px rgba(78,59,27,.09); }
.commitment-list { padding: 10px 11px 24px; display: grid; gap: 8px; }
.commitment-item {
  min-height: 84px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  grid-template-areas: "icon main side" "actions actions actions";
  align-items: center;
  gap: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fffefa;
  transition: opacity .18s, transform .18s, background .18s, box-shadow .18s;
}
.commitment-item.paused { opacity: .55; }
.commitment-icon { grid-area: icon; width: 34px; height: 34px; border-radius: 13px; display: grid; place-items: center; background: #f3eadc; font-weight: 950; }
.commitment-item.installment .commitment-icon { background: #eee9ff; color: #735caf; }
.commitment-item.debt.borrowed .commitment-icon { background: var(--expense-soft); color: var(--expense); }
.commitment-item.debt.lent .commitment-icon { background: var(--income-soft); color: var(--income); }
.commitment-item .item-main { grid-area: main; }
.commitment-item .item-side { grid-area: side; }
.commitment-actions { grid-area: actions; min-height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid rgba(92,72,36,.07); padding-top: 6px; }
.commitment-item.repaid { background: #f1f5ee; color: #74806e; }
.commitment-item.just-repaid { background: #e7ffe9; border-color: #6bc878; box-shadow: 0 0 0 3px rgba(91,202,109,.14), 0 10px 24px rgba(62,149,76,.12); animation: vivid-complete .5s ease both; }
@keyframes vivid-complete { 0% { transform: scale(.98); filter: brightness(1.12); } 60% { transform: scale(1.015); } 100% { transform: none; } }
.repay-button { min-height: 28px; padding: 0 10px; border-radius: 10px; background: #5bc46b; color: #fff; font-size: 9px; font-weight: 950; box-shadow: 0 4px 9px rgba(75,170,90,.2); }
.repay-button.undo { background: #fff; color: #4e8f58; box-shadow: inset 0 0 0 1px rgba(77,160,90,.28); }

.choice-sheet { max-height: 42dvh; }
.choice-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card { min-height: 126px; padding: 14px 10px; border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 5px; background: #fff6d7; border: 1px solid rgba(199,151,37,.14); }
.choice-card b { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: var(--yellow); font-size: 19px; }
.choice-card strong { font-size: 13px; }
.choice-card small { color: var(--muted); font-size: 8px; line-height: 1.35; text-align: center; }

.settings-section { margin-top: 12px; padding: 13px; border-radius: 17px; background: #fff6d8; }
.settings-section h3 { margin: 2px 0 10px; font-size: 14px; }
.settings-section p { margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 430px) {
  .jump-grid { width: 144px; }
  .jump-grid .mini-button { padding-inline: 5px; }
  .simulator-panel { --future-hero-h: 174px; }
  .event-bubble { width: min(92%, 520px); }
  .event-bubble-head { gap: 7px; }
  .event-bubble-head strong { font-size: 12px; }
  .event-amount { font-size: 13px; }
  .asset-row { grid-template-columns: auto minmax(0,1fr) 88px auto; }
  .asset-edit-stack { grid-template-columns: 1fr; }
  .asset-type-edit { max-width: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .choice-grid { gap: 8px; }
  .choice-card { min-height: 112px; }
  .mobile-sheet { max-height: 90dvh; }
}

@media (max-height: 700px) {
  .topbar { min-height: 58px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .brand-mark { width: 34px; height: 34px; }
  .bottom-nav { min-height: 58px; padding-top: 5px; }
  .nav-button { min-height: 42px; }
  .mode-panel { padding-top: 7px; }
  .simulator-panel { --future-hero-h: 156px; }
}