:root {
  --ink: #102b50;
  --ink-soft: #294466;
  --muted: #73819a;
  --canvas: #f1f4fa;
  --paper: #ffffff;
  --cobalt: #1457c8;
  --cobalt-soft: #dbe8ff;
  --coral: #ff7658;
  --coral-soft: #ffe1d8;
  --butter: #ffc95d;
  --mint: #8bcbb3;
  --lavender: #a78bd8;
  --line: #dce3ee;
  --shadow: 0 20px 55px rgba(27, 55, 91, .12);
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "DM Sans", "Segoe UI", sans-serif;
  --mono: "Space Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(20,87,200,.42); outline-offset: 3px; }
.page-shell { min-height: 100vh; padding-bottom: 94px; }
.topbar { width: min(100% - 32px, 920px); margin: 0 auto; padding: 20px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 35px; height: 35px; position: relative; flex: 0 0 auto; border-radius: 11px; background: var(--ink); transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--coral); }
.brand-mark i { position: absolute; border-radius: 4px; background: var(--butter); }.brand-mark i:nth-child(1) { width: 14px; height: 5px; top: 9px; left: 7px; }.brand-mark i:nth-child(2) { width: 20px; height: 5px; top: 16px; left: 7px; }.brand-mark i:nth-child(3) { width: 10px; height: 5px; top: 23px; left: 7px; }
.brand strong, .brand small { display: block; }.brand strong { font-family: var(--display); font-size: 17px; line-height: 1; letter-spacing: .02em; }.brand small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.month-pill { padding: 8px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.66); font-family: var(--mono); font-size: 8px; text-transform: capitalize; }
.main-content { width: min(100% - 28px, 760px); margin: 0 auto; }
.eyebrow { display: block; color: var(--muted); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.month-card { position: relative; overflow: hidden; margin-bottom: 14px; padding: 24px 21px 20px; border: 1px solid #d7e0ed; border-radius: 29px; background: var(--paper); box-shadow: var(--shadow); }
.month-copy { position: relative; z-index: 3; max-width: 330px; }.month-copy h1 { margin: 8px 0 10px; font-family: var(--display); font-size: clamp(39px, 10vw, 66px); line-height: .92; letter-spacing: -.055em; }.month-copy h1 em { color: var(--coral); font-style: normal; }.month-copy p { max-width: 300px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.object-collage { height: 220px; position: relative; margin: 9px -21px -4px; overflow: hidden; }.collage-shape { width: 240px; height: 240px; position: absolute; top: 2px; left: 50%; border-radius: 50%; background: var(--cobalt-soft); transform: translateX(-50%); }.collage-item { position: absolute; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(25,54,90,.13)); }.collage-income { width: 166px; height: 166px; top: 20px; left: calc(50% - 128px); transform: rotate(-9deg); }.collage-food { width: 180px; height: 180px; top: 28px; left: calc(50% - 16px); transform: rotate(8deg); }.collage-other { width: 112px; height: 112px; right: 8px; bottom: -12px; transform: rotate(12deg); }
.summary-receipt { position: relative; z-index: 3; display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; border-radius: 18px; color: #fff; background: var(--ink); }.receipt-hole { width: 13px; height: 13px; position: absolute; top: 11px; left: 50%; border-radius: 50%; background: var(--canvas); transform: translateX(-50%); }.balance-copy { padding: 17px 15px; }.balance-copy span { display: block; color: #9baabe; font-size: 8px; }.balance-copy strong { display: block; margin-top: 6px; font-family: var(--display); font-size: clamp(24px, 7vw, 34px); line-height: 1; letter-spacing: -.04em; }.summary-split { display: grid; border-left: 1px dashed rgba(255,255,255,.2); }.summary-split span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; padding: 9px 11px; color: #aab6c7; font-size: 7px; }.summary-split span:first-child { border-bottom: 1px dashed rgba(255,255,255,.2); }.summary-split strong { grid-column: 1 / -1; color: #fff; font-family: var(--mono); font-size: 9px; }.income-dot, .expense-dot { width: 6px; height: 6px; border-radius: 50%; }.income-dot { background: var(--mint); }.expense-dot { background: var(--coral); }
.quick-card { margin-bottom: 30px; padding: 18px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.72); }.quick-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.quick-heading h2, .section-heading h2, .style-note h2 { margin: 4px 0 0; font-family: var(--display); font-size: 23px; line-height: 1; letter-spacing: -.035em; }.detail-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 8px; font-weight: 700; }.quick-form { height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 4px; border: 1px solid #cfdae8; border-radius: 14px; background: var(--paper); }.quick-form > span { padding-left: 10px; color: var(--cobalt); font-family: var(--mono); font-size: 20px; }.quick-form input { width: 100%; min-width: 0; padding: 0 8px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.quick-form input::placeholder { color: #9ba6b8; }.quick-form button { height: 42px; padding: 0 12px; border: 0; border-radius: 10px; color: #fff; background: var(--cobalt); font-size: 9px; font-weight: 700; }
.quick-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }.quick-options > span { max-width: 130px; color: var(--muted); font-size: 7px; line-height: 1.35; text-align: right; }.image-choice { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }.image-choice input, .dialog-image-choice input { position: absolute; opacity: 0; pointer-events: none; }.choice-switch { width: 32px; height: 19px; position: relative; flex: 0 0 auto; border-radius: 99px; background: #cdd5e1; transition: background .2s; }.choice-switch i { width: 13px; height: 13px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(16,43,80,.2); transition: transform .2s; }.image-choice input:checked + .choice-switch, .dialog-image-choice input:checked ~ .choice-switch { background: var(--cobalt); }.image-choice input:checked + .choice-switch i, .dialog-image-choice input:checked ~ .choice-switch i { transform: translateX(13px); }.image-choice strong, .image-choice small { display: block; }.image-choice strong { font-size: 8px; }.image-choice small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.collection-section { margin-bottom: 33px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }.section-heading h2 { font-size: 28px; }.reset-button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 7px; text-decoration: underline; text-underline-offset: 3px; }.filter-row { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }.filter-button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.58); font-size: 8px; font-weight: 700; }.filter-button.is-active { border-color: var(--ink); color: #fff; background: var(--ink); }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.ledger-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); animation: item-in .32s both; }.ledger-item.has-image { min-width: 0; }.item-illustration { height: 155px; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--visual-bg, var(--cobalt-soft)); }.item-illustration::before { content: ""; width: 115px; height: 115px; position: absolute; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; }.item-illustration img { width: 134px; height: 134px; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 9px 6px rgba(16,43,80,.13)); }.type-badge { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 5px 7px; border-radius: 7px; font-family: var(--mono); font-size: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.type-badge.income { color: #225c48; background: #d6f0e6; }.type-badge.expense { color: #93452f; background: #ffe1d8; }.item-body { padding: 11px; }.item-body h3 { margin: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.item-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; text-transform: capitalize; }.item-amount { display: block; margin-top: 9px; font-family: var(--mono); font-size: 11px; }.item-amount.income { color: #2d7e60; }.item-amount.expense { color: #c85e42; }.card-actions { display: flex; justify-content: space-between; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf0f5; }.card-actions button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 7px; text-decoration: underline; text-underline-offset: 2px; }.card-actions .delete-action { color: #b85a42; }
.generation-status { position: absolute; z-index: 3; right: 7px; bottom: 7px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; color: #fff; background: rgba(16,43,80,.82); font-family: var(--mono); font-size: 6px; backdrop-filter: blur(4px); }.card-actions { flex-wrap: wrap; justify-content: flex-start; }.card-actions .delete-action { margin-left: auto; }
.item-illustration img.concept-image { width: 100%; height: 100%; object-fit: cover; filter: none; }
.ledger-item.no-image { grid-column: 1 / -1; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; padding: 10px; }.plain-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-family: var(--mono); font-size: 14px; }.plain-icon.income { color: #2e765d; background: #d9f0e7; }.plain-icon.expense { color: #b25036; background: var(--coral-soft); }.plain-copy { min-width: 0; }.plain-copy h3, .plain-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.plain-copy h3 { margin: 0; font-size: 10px; }.plain-copy small { margin-top: 3px; color: var(--muted); font-size: 7px; text-transform: capitalize; }.plain-side { text-align: right; }.plain-side .item-amount { margin-top: 0; }.plain-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 6px; }.plain-actions button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 7px; }.plain-actions .delete-action { color: #b85a42; }.empty-state { grid-column: 1 / -1; padding: 25px 17px; border: 1px dashed #c8d2e1; border-radius: 15px; color: var(--muted); text-align: center; font-size: 9px; }.empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); font-family: var(--display); font-size: 16px; }
.style-note { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 14px; margin-bottom: 22px; padding: 15px; border: 1px solid #cec3ee; border-radius: 19px; background: #ece8fb; }.style-swatch { width: 80px; height: 80px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: #d8d0f4; transform: rotate(-3deg); }.style-swatch img { width: 76px; height: 76px; object-fit: contain; transform: rotate(3deg); }.style-note h2 { font-size: 19px; }.style-note p { margin: 6px 0 0; color: #70678b; font-size: 8px; line-height: 1.45; }
.floating-add { height: 48px; position: fixed; z-index: 20; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 0 16px 0 11px; border: 5px solid var(--canvas); border-radius: 16px; color: #fff; background: var(--ink); box-shadow: 0 10px 28px rgba(16,43,80,.25); font-size: 9px; font-weight: 700; }.floating-add span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--ink); background: var(--butter); font-size: 17px; }
.transaction-dialog { width: min(calc(100% - 24px), 430px); max-height: calc(100vh - 24px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 25px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(16,43,80,.3); }.transaction-dialog::backdrop { background: rgba(16,43,80,.58); backdrop-filter: blur(5px); }.transaction-form { padding: 22px; }.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }.dialog-heading h2 { margin: 5px 0 0; font-family: var(--display); font-size: 25px; line-height: .98; letter-spacing: -.035em; }.dialog-close { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--canvas); font-size: 18px; }.type-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--canvas); }.type-option { padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }.type-option.is-selected { color: #fff; background: var(--ink); box-shadow: 0 5px 12px rgba(16,43,80,.14); }.field { display: block; margin-bottom: 11px; color: var(--muted); font-size: 8px; font-weight: 700; }.field > span { display: block; margin: 0 0 6px 2px; }.field input, .field select { width: 100%; min-width: 0; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: #fbfcfe; font-size: 10px; }.field input:focus, .field select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(20,87,200,.09); }.amount-field div { height: 57px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }.amount-field div:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(20,87,200,.09); }.amount-field b { padding-left: 13px; color: var(--muted); font-family: var(--mono); font-size: 11px; }.amount-field input { height: 100%; border: 0; background: transparent; font-family: var(--display); font-size: 22px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.dialog-image-choice { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; margin: 4px 0 15px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); cursor: pointer; }.dialog-preview { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: var(--cobalt-soft); }.dialog-preview img { width: 52px; height: 52px; object-fit: contain; }.dialog-image-choice strong, .dialog-image-choice small { display: block; }.dialog-image-choice strong { font-size: 9px; }.dialog-image-choice small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }.save-button { width: 100%; padding: 13px; border: 0; border-radius: 12px; color: #fff; background: var(--cobalt); font-size: 9px; font-weight: 700; }
.toast { max-width: calc(100% - 28px); position: fixed; z-index: 50; right: 14px; bottom: 72px; padding: 10px 13px; border-radius: 10px; color: #fff; background: var(--ink); box-shadow: 0 11px 30px rgba(16,43,80,.22); font-size: 9px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }.sr-only { width: 1px; height: 1px; position: absolute; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 720px) {
  .page-shell { padding-bottom: 45px; }.topbar { padding-top: 28px; padding-bottom: 23px; }.main-content { width: min(100% - 48px, 920px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: start; gap: 18px; }.month-card { grid-row: span 2; position: sticky; top: 18px; }.quick-card, .collection-section, .style-note { grid-column: 2; }.object-collage { height: 260px; }.collage-income { width: 190px; height: 190px; }.collage-food { width: 205px; height: 205px; }.collection-grid { gap: 10px; }.floating-add { right: max(22px, calc((100vw - 920px) / 2)); }.toast { right: max(22px, calc((100vw - 920px) / 2)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }