:root {
  --ink: #173232;
  --ink-soft: #58706e;
  --forest: #123b3b;
  --forest-2: #1d5550;
  --mint: #59b6a2;
  --mint-pale: #dff1eb;
  --coral: #e67950;
  --coral-pale: #f9e8df;
  --paper: #f4f1ea;
  --surface: #fffdf9;
  --line: #dde5e1;
  --danger: #c64e4e;
  --success: #248564;
  --shadow: 0 16px 45px rgba(25, 59, 56, .10);
  --shadow-soft: 0 7px 24px rgba(25, 59, 56, .07);
  --radius: 22px;
  --radius-sm: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.muted { color: var(--ink-soft); }
.eyebrow, .step-label { margin: 0 0 8px; color: var(--coral); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: 1.05rem; }

.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: var(--mint); color: var(--forest); font-size: 1.4rem; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(18,59,59,.11); }
.brand-mark.large { width: 76px; height: 76px; border-radius: 24px; font-size: 2.1rem; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 17px; background: radial-gradient(circle at 50% 35%, #fffdf9 0, var(--paper) 48%); color: var(--ink-soft); }
.boot-pulse { width: 110px; height: 4px; overflow: hidden; border-radius: 99px; background: #d6e0dc; }
.boot-pulse::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--coral); animation: loading 1.1s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(125%); } }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; padding: 0 17px; background: #e7ece9; font-weight: 750; cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--coral); color: #fff; box-shadow: 0 8px 18px rgba(230,121,80,.22); }
.button.secondary { background: var(--forest); color: #fff; }
.button.ghost { background: transparent; border: 1px solid var(--line); }
.button.danger { background: #f7e5e5; color: var(--danger); }
.button.small { min-height: 36px; padding: 0 12px; font-size: .84rem; }
.button.icon-only { width: 42px; padding: 0; }
.button.wide { width: 100%; }
.button svg, .nav-item svg, .icon-button svg { width: 19px; height: 19px; }

input, select, textarea { width: 100%; border: 1px solid #cfdad5; border-radius: 12px; outline: 0; padding: 11px 13px; background: #fff; color: var(--ink); transition: border .15s, box-shadow .15s; }
input, select { min-height: 45px; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(89,182,162,.15); }
label { display: grid; gap: 6px; font-size: .88rem; font-weight: 700; }
label small { color: var(--ink-soft); font-weight: 500; }
fieldset { min-width: 0; display: grid; gap: 14px; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 12px; font-size: .92rem; font-weight: 850; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.checkbox { grid-template-columns: auto 1fr; align-items: center; }
.checkbox input { width: 20px; min-height: 20px; }
.alert { padding: 13px 15px; border-radius: 12px; font-size: .9rem; }
.alert.error { background: #f9e5e3; color: #923c36; }
.alert.success { background: var(--mint-pale); color: #17634f; }

/* Setup and login */
.setup-page { background: var(--forest); }
.setup-shell { width: min(1180px, 100%); min-height: 100vh; display: grid; grid-template-columns: .8fr 1.2fr; margin: auto; }
.setup-intro { display: flex; flex-direction: column; justify-content: center; padding: 8vw 6vw; color: #fff; background: radial-gradient(circle at 25% 15%, rgba(89,182,162,.22), transparent 34%); }
.setup-intro .brand-mark { margin-bottom: 34px; }
.setup-intro h1 { max-width: 430px; margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.setup-intro > p:not(.eyebrow) { max-width: 480px; color: #cce0da; line-height: 1.65; }
.feature-list { display: grid; gap: 12px; padding: 25px 0 0; list-style: none; color: #edf7f4; }
.feature-list li::before { content: "✓"; display: inline-grid; width: 25px; height: 25px; place-items: center; margin-right: 10px; border-radius: 50%; background: rgba(89,182,162,.2); color: #88dfca; font-weight: 900; }
.setup-card { align-self: center; display: grid; gap: 22px; margin: 35px; padding: clamp(25px, 5vw, 52px); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); }
.setup-card h2 { margin-bottom: 6px; }
.setup-form { display: grid; gap: 25px; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, .86fr) 1.14fr; background: var(--surface); }
.login-panel { display: grid; align-content: center; padding: clamp(30px, 8vw, 110px); }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 70px; font-weight: 900; }
.login-panel h1 { margin-bottom: 10px; }
.login-form { max-width: 430px; display: grid; gap: 16px; margin-top: 30px; }
.login-version { margin-top: 30px; color: #70817f; font-size: .77rem; }
.login-art { position: relative; overflow: hidden; display: grid; align-content: end; padding: clamp(40px, 7vw, 90px); background: var(--forest); color: #fff; }
.login-art::before, .login-art::after { content: ""; position: absolute; border-radius: 50%; }
.login-art::before { width: 520px; height: 520px; top: -180px; right: -120px; border: 90px solid rgba(89,182,162,.13); }
.login-art::after { width: 280px; height: 280px; top: 15%; left: 8%; background: rgba(230,121,80,.12); }
.login-quote { position: relative; z-index: 1; max-width: 630px; }
.login-quote p { font-size: clamp(1.8rem, 4vw, 3.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; }
.login-quote span { color: #a9cdc4; }

/* App shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 26px 18px 20px; background: var(--forest); color: #d9ece7; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 28px; color: #fff; font-weight: 900; }
.sidebar-brand small { display: block; margin-top: 2px; color: #82aaa1; font-size: .69rem; font-weight: 650; letter-spacing: .03em; }
.household-select { margin-bottom: 24px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.075); }
.household-select label { display: block; color: #8db2aa; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.household-select select { min-height: 36px; margin-top: 4px; padding: 3px 1px; border: 0; background: transparent; color: #fff; font-weight: 750; box-shadow: none; }
.household-select option { color: var(--ink); }
.main-nav { display: grid; gap: 5px; }
.nav-item { min-height: 47px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border: 0; border-radius: 13px; background: transparent; color: #a8c5be; font-weight: 700; text-align: left; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(89,182,162,.16); color: #8de1cc; }
.sidebar-footer { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.09); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar { flex: 0 0 auto; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 850; }
.user-chip strong, .user-chip small { overflow: hidden; display: block; max-width: 135px; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { margin-top: 2px; color: #83a7a0; font-size: .72rem; }
.main-area { min-width: 0; padding: 0 clamp(22px, 4vw, 58px) 60px; }
.topbar { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-title p { margin: 0 0 3px; color: var(--ink-soft); font-size: .78rem; }
.topbar-title h1 { margin: 0; font-size: 1.55rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.month-picker { display: flex; align-items: center; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.month-picker button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.month-picker button:hover { background: var(--mint-pale); }
.month-picker strong { min-width: 120px; text-align: center; font-size: .83rem; }
.page { animation: pageIn .22s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 5px 0 24px; }
.page-header h2 { margin-bottom: 5px; }
.page-header p { margin-bottom: 0; color: var(--ink-soft); }

.card { border: 1px solid rgba(215,224,220,.8); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 21px 22px 0; }
.card-head h3 { margin: 0; }
.card-body { padding: 21px 22px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card { position: relative; overflow: hidden; min-height: 145px; padding: 21px; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; top: -32px; right: -23px; border-radius: 50%; background: var(--stat-accent, var(--mint)); opacity: .13; }
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .79rem; font-weight: 750; }
.stat-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stat-accent, var(--mint)); }
.stat-value { margin: 25px 0 5px; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 850; letter-spacing: -.045em; }
.stat-hint { margin: 0; color: var(--ink-soft); font-size: .76rem; }
.stat-card.balance.negative .stat-value { color: var(--danger); }
.stat-card.balance.positive .stat-value { color: var(--success); }
.dashboard-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; margin-top: 16px; }
.distribution { min-height: 345px; }
.distribution-body { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 28px; }
.donut { position: relative; width: 170px; height: 170px; border-radius: 50%; background: conic-gradient(var(--mint) 0 100%); }
.donut::after { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: var(--surface); }
.donut-center { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 1.1rem; }
.donut-center span { color: var(--ink-soft); font-size: .7rem; }
.legend { display: grid; gap: 11px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; font-size: .8rem; }
.legend-row i { width: 9px; height: 9px; border-radius: 50%; }
.legend-row strong { font-size: .79rem; }
.upcoming-list, .entry-list, .member-list { display: grid; }
.upcoming-row, .entry-row, .member-row { display: grid; align-items: center; border-bottom: 1px solid #edf0ee; }
.upcoming-row:last-child, .entry-row:last-child, .member-row:last-child { border-bottom: 0; }
.upcoming-row { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 12px 0; }
.date-tile { display: grid; width: 40px; height: 44px; place-content: center; border-radius: 11px; background: var(--mint-pale); color: var(--forest-2); text-align: center; }
.date-tile strong { font-size: .95rem; line-height: 1; }
.date-tile small { margin-top: 2px; font-size: .58rem; text-transform: uppercase; }
.row-main { min-width: 0; }
.row-main strong { overflow: hidden; display: block; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .72rem; }
.amount { font-weight: 850; white-space: nowrap; }
.amount.expense { color: var(--ink); }
.amount.income { color: var(--success); }
.empty-state { display: grid; min-height: 220px; place-content: center; justify-items: center; padding: 30px; color: var(--ink-soft); text-align: center; }
.empty-state .empty-icon { display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 13px; border-radius: 20px; background: var(--mint-pale); color: var(--forest-2); }
.empty-state svg { width: 28px; }
.empty-state strong { color: var(--ink); }

/* Costs */
.toolbar { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.search-box { position: relative; flex: 1; }
.search-box svg { position: absolute; width: 19px; left: 14px; top: 13px; color: var(--ink-soft); pointer-events: none; }
.search-box input { padding-left: 42px; background: var(--surface); }
.toolbar select { width: auto; min-width: 165px; background: var(--surface); }
.entries-card { overflow: hidden; }
.entry-row { grid-template-columns: 48px minmax(160px, 1fr) 145px 115px 42px; gap: 14px; padding: 15px 20px; cursor: pointer; }
.entry-row:hover { background: #fbfaf6; }
.category-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; }
.category-icon svg { width: 20px; }
.entry-cycle { color: var(--ink-soft); font-size: .78rem; }
.status-pill, .role-pill { display: inline-flex; width: max-content; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 9px; background: var(--mint-pale); color: #256b5b; font-size: .7rem; font-weight: 800; }
.status-pill.inactive { background: #eceeec; color: #6e7a77; }
.row-menu { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.row-menu:hover { background: #edf1ee; }

/* Receipts */
.receipt-share-tip {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 17px;
  border-radius: 16px;
  background: var(--forest);
  color: #fff;
}

.receipt-share-tip > svg {
  width: 23px;
  color: #8de1cc;
}

.receipt-share-tip div {
  display: grid;
  gap: 3px;
}

.receipt-share-tip span {
  color: #c9ddd8;
  font-size: .8rem;
  line-height: 1.4;
}

.receipt-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.receipts-card { overflow: hidden; }
.receipt-list { margin-top: 9px; }
.receipt-row { width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; padding: 14px 20px; border: 0; border-bottom: 1px solid #edf0ee; background: transparent; text-align: left; cursor: pointer; }
.receipt-row:last-child { border-bottom: 0; }
.receipt-row:hover { background: #fbfaf6; }
.receipt-row > svg { width: 18px; color: var(--ink-soft); }
.receipt-date { display: grid; width: 56px; min-height: 48px; place-content: center; border-radius: 12px; background: var(--mint-pale); color: var(--forest-2); text-align: center; }
.receipt-date strong { font-size: .84rem; }
.receipt-date small { margin-top: 2px; font-size: .62rem; }
.receipt-modal { width: min(980px, 100%); }
.receipt-import { border: 1px solid var(--line); border-radius: 15px; background: #f7faf8; }
.receipt-import summary { display: flex; align-items: center; gap: 9px; padding: 14px 16px; font-weight: 800; cursor: pointer; }
.receipt-import summary svg { width: 19px; }
.receipt-import-body { display: grid; gap: 12px; padding: 0 16px 16px; }
.receipt-import-body p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.receipt-import-body > small { color: var(--ink-soft); }
.receipt-import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-import-status { padding: 10px 12px; border-radius: 10px; background: #e9efec; color: var(--ink-soft); font-size: .8rem; }
.receipt-import-status.success { background: var(--mint-pale); color: #17634f; }
.receipt-import-status.warning { background: #fff1d8; color: #805b17; }
.receipt-import-status.error { background: #f9e5e3; color: #923c36; }
.receipt-import-preview { overflow: auto; max-height: 420px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #e9eeeb; text-align: center; }
.receipt-import-preview img, .receipt-import-preview canvas { display: block; max-width: 100%; height: auto; margin: auto; border-radius: 7px; }

.receipt-file-card { display: grid; gap: 12px; padding: 14px 16px; border: 1px dashed #cfdad5; border-radius: 15px; background: #f4f7f5; }
.receipt-file-card.has-stored { border-style: solid; border-color: var(--mint); background: var(--mint-pale); }
.receipt-file-card.has-pending { border-style: solid; border-color: var(--coral); background: var(--coral-pale); }
.receipt-file-card-head { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 12px; }
.receipt-file-card-head svg { width: 22px; color: var(--forest); }
.receipt-file-card-head p { margin: 0 0 4px; font-size: .94rem; }
.receipt-file-card-head small { color: var(--ink-soft); font-size: .8rem; line-height: 1.4; }
.receipt-file-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-attach-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: -5px; border-radius: 7px; background: var(--mint-pale); color: var(--forest); }
.receipt-attach-badge svg { width: 14px; }

.receipt-viewer-backdrop { z-index: 150; padding: 12px; background: rgba(7,18,18,.82); }
.receipt-viewer { width: min(1100px, 100%); max-width: 100%; max-height: calc(100vh - 24px); display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: #1d2826; color: #f4f7f5; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.receipt-viewer .modal-head { position: static; padding: 14px 18px; background: #0e1716; border-bottom: 1px solid rgba(255,255,255,.1); color: #f4f7f5; gap: 12px; backdrop-filter: none; }
.receipt-viewer .modal-head h2 { color: #f4f7f5; }
.receipt-viewer-title { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; min-width: 0; color: #f4f7f5; }
.receipt-viewer-title svg { width: 22px; color: #8de1cc; }
.receipt-viewer-title strong { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8de1cc; font-weight: 800; }
.receipt-viewer-title small { display: block; color: #f4f7f5; font-size: .96rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-viewer-controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.receipt-viewer .receipt-viewer-controls .icon-button { width: 40px; height: 40px; background: rgba(255,255,255,.08); color: #f4f7f5; border: 1px solid rgba(255,255,255,.1); }
.receipt-viewer .receipt-viewer-controls .icon-button:hover { background: rgba(255,255,255,.18); }
.receipt-viewer .receipt-viewer-controls a.icon-button { display: inline-grid; place-items: center; text-decoration: none; color: #f4f7f5; }
.receipt-viewer .receipt-viewer-controls [data-close-viewer] { background: var(--coral); border-color: rgba(255,255,255,.18); color: #fff; }
.receipt-viewer .receipt-viewer-controls [data-close-viewer]:hover { background: #d96541; }
.receipt-viewer-body { overflow: auto; padding: 16px; background: repeating-linear-gradient(45deg, #1d2826 0 12px, #20302d 12px 24px); display: flex; align-items: safe center; justify-content: safe center; min-height: 50vh; }
.receipt-viewer-body.viewer-mode-image { padding: 0; align-items: safe center; justify-content: safe center; }
.receipt-viewer-body.viewer-mode-image .viewer-stage { min-width: 100%; min-height: 100%; padding: 24px; display: grid; place-items: center; }
.receipt-viewer-body.viewer-mode-image img { transform-origin: center center; max-width: none; transition: transform .12s ease-out; box-shadow: 0 12px 40px rgba(0,0,0,.6); border-radius: 6px; }
.receipt-viewer-body.viewer-mode-pdf { flex-direction: column; align-items: safe center; justify-content: flex-start; gap: 12px; padding-top: 16px; }
.viewer-pdf-pages { display: grid; gap: 12px; place-items: center; }
.viewer-pdf-page { max-width: 100%; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.45); border-radius: 4px; }
.viewer-pdf-status { padding: 18px 22px; color: #d4ddda; }
.receipt-viewer-body.viewer-mode-text { padding: 22px; align-items: flex-start; justify-content: stretch; }
.viewer-text { width: 100%; margin: 0; padding: 18px 20px; border-radius: 12px; background: #0e1716; color: #e5efec; font: 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; transition: font-size .12s ease-out; }
.receipt-viewer-empty { display: grid; gap: 14px; place-items: center; padding: 40px 24px; color: #d4ddda; text-align: center; }
.receipt-skipped { padding: 0; }
.receipt-skipped-details { border: 1px dashed var(--line); border-radius: 12px; background: #fbfaf3; padding: 10px 14px; }
.receipt-skipped-details summary { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; color: #805b17; }
.receipt-skipped-details summary svg { width: 16px; }
.receipt-skipped-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #fff1d8; color: #805b17; font-size: .72rem; }
.receipt-skipped-hint { margin: 8px 0 10px; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.receipt-skipped-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.receipt-skipped-row { display: grid; gap: 6px 12px; grid-template-columns: 1fr auto; align-items: start; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.receipt-skipped-row.receipt-skipped-learned { background: #f4f0ea; }
.receipt-skipped-row.receipt-skipped-used { opacity: .55; }
.receipt-skipped-info { display: grid; gap: 2px; min-width: 0; }
.receipt-skipped-name { font-weight: 700; word-break: break-word; }
.receipt-skipped-amount { font-variant-numeric: tabular-nums; color: var(--ink); font-size: .9rem; }
.receipt-skipped-reason { color: var(--ink-soft); font-size: .72rem; }
.receipt-skipped-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.receipt-skipped-actions .button { padding: 6px 10px; font-size: .78rem; }
.receipt-skipped-actions .button svg { width: 14px; }
@media (max-width: 540px) {
  .receipt-skipped-row { grid-template-columns: 1fr; }
  .receipt-skipped-actions { justify-content: flex-start; }
}
.receipt-items-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.receipt-items-head h3 { margin: 0 0 4px; }
.receipt-items-head p { margin: 0; color: var(--ink-soft); font-size: .76rem; }
.receipt-items { display: grid; gap: 10px; }
.receipt-item { display: grid; grid-template-columns: minmax(180px, 1.35fr) minmax(160px, 1fr) 85px 110px 38px; align-items: end; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfa; }
.receipt-item label > span { font-size: .74rem; color: var(--ink-soft); }
.receipt-item input, .receipt-item select { min-height: 41px; padding: 8px 10px; }
.receipt-item-remove { margin-bottom: 2px; color: var(--danger); }
.receipt-total { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 15px; padding: 14px 16px; border-radius: 14px; background: var(--mint-pale); }
.receipt-total span { color: var(--forest-2); font-size: .8rem; font-weight: 800; }
.receipt-total strong { font-size: 1.2rem; }
.receipt-total small { grid-column: 1 / -1; color: var(--ink-soft); text-align: right; }
.receipt-total.mismatch { background: #f9e5e3; color: #923c36; }
.mobile-more-menu { display: grid; gap: 8px; }
.more-link { display: grid; grid-template-columns: 42px 1fr 20px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-align: left; cursor: pointer; }
.more-link:hover { background: #f7faf8; }
.more-link > svg:first-child { width: 22px; color: var(--forest-2); }
.more-link > svg:last-child { width: 17px; color: var(--ink-soft); }
.more-link span { display: grid; gap: 3px; }
.more-link small { color: var(--ink-soft); }
/* Reports */
.year-nav { display: flex; align-items: center; gap: 7px; }
.year-nav strong { min-width: 55px; text-align: center; }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.mini-stat { padding: 19px 22px; }
.mini-stat span { color: var(--ink-soft); font-size: .77rem; }
.mini-stat strong { display: block; margin-top: 7px; font-size: 1.35rem; }
.chart-card { padding: 24px; }
.bar-chart { height: 300px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: clamp(5px, 1.5vw, 14px); margin-top: 35px; padding: 0 5px 25px; border-bottom: 1px solid var(--line); }
.bar-group { height: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; position: relative; }
.bar { width: 42%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--coral); transition: height .35s ease; }
.bar.income { background: var(--mint); }
.bar-label { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); color: var(--ink-soft); font-size: .66rem; }
.chart-legend { display: flex; gap: 18px; justify-content: flex-end; margin-top: 30px; font-size: .75rem; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 50%; }
.category-report { margin-top: 16px; }
.category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: .78rem; color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.filter-chip:hover { background: #f4f8f6; }
.filter-chip.active { background: var(--mint-pale); border-color: var(--forest-2); color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest-2); }
.filter-chip i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.filter-chip small { color: var(--ink-soft); font-size: .7rem; }
.filter-chip.active small { color: var(--forest); }
.stacked-chart { margin-top: 18px; }
.bar-group.stacked { align-items: end; }
.stacked-bar { width: 60%; min-height: 2px; border-radius: 6px 6px 2px 2px; overflow: hidden; display: flex; flex-direction: column-reverse; background: #eef2ef; transition: height .35s ease; }
.stacked-seg { display: block; min-height: 1px; }
.stacked-seg:last-child { border-radius: 6px 6px 0 0; }
.category-legend { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: flex-start; margin-top: 22px; font-size: .75rem; color: var(--ink-soft); }
.category-legend span { display: inline-flex; align-items: center; gap: 6px; }
.category-legend i { width: 9px; height: 9px; border-radius: 50%; }
.bar-group-button { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; border-radius: 8px 8px 0 0; transition: background .15s ease; }
.bar-group-button:hover { background: rgba(89,182,162,.12); }
.bar-group-button.selected { background: rgba(89,182,162,.22); box-shadow: inset 0 -2px 0 var(--forest-2); }
.bar-group-button:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.month-detail { padding: 24px; margin-top: 16px; }
.month-detail .icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-soft); cursor: pointer; }
.month-detail .icon-button:hover { color: var(--ink); background: #f4f8f6; }
.month-detail .icon-button svg { width: 16px; height: 16px; }
.month-cat-list { margin-top: 18px; display: grid; gap: 9px; }
.month-cat-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 4px; font-size: .82rem; color: var(--ink-soft); }
.month-cat-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.month-cat-row.muted-row { opacity: .45; }
.month-cat-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .88rem; }
.month-cat-name i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.month-cat-bar { display: block; height: 6px; border-radius: 999px; background: #eef2ef; overflow: hidden; }
.month-cat-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.month-cat-amount { text-align: right; display: flex; flex-direction: column; gap: 1px; min-width: 80px; }
.month-cat-amount small { color: var(--ink-soft); font-size: .7rem; }

/* Members / settings */
.member-row { grid-template-columns: 46px 1fr 110px auto; gap: 13px; padding: 15px 20px; }
.member-row .avatar { background: var(--mint-pale); color: var(--forest); }
.role-pill.admin { background: var(--coral-pale); color: #9a4a2d; }
.member-actions { display: flex; gap: 7px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-card { padding: 23px; }
.settings-card h3 { margin-bottom: 8px; }
.settings-card > p { color: var(--ink-soft); font-size: .85rem; line-height: 1.55; }
.settings-card form { display: grid; gap: 12px; margin-top: 19px; }
.category-settings-card { grid-column: 1 / -1; }
.category-list { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.category-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.category-row .category-icon { width: 40px; height: 40px; border-radius: 12px; }
.category-unused { color: var(--success) !important; }
.category-actions { display: flex; align-items: center; gap: 7px; }
.category-delete { color: var(--danger); }
.category-delete:disabled { color: #9aa7a4; cursor: not-allowed; opacity: .55; }
.category-edit-preview { display: flex; align-items: center; gap: 13px; padding: 13px; border-radius: 14px; background: var(--mint-pale); }
.category-edit-preview small { display: block; margin-top: 4px; color: var(--ink-soft); }
.app-version { display: inline-flex; margin-top: 8px; padding: 5px 9px; border-radius: 8px; background: #e6ece9; color: #405b58; font-size: .75rem; font-weight: 800; }
.settings-card .update-button { margin-top: 9px; }
.update-status { display: block; margin-top: 11px; color: #647775; font-size: .75rem; }
.install-help { color: var(--ink-soft); line-height: 1.55; }
.install-help ol { margin: 16px 0; padding-left: 22px; }
.install-help li + li { margin-top: 8px; }

/* Modal, toasts, mobile nav */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,30,29,.64); backdrop-filter: blur(4px); animation: fadeIn .15s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(690px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 25px; background: var(--surface); box-shadow: 0 25px 80px rgba(0,0,0,.28); }
.modal-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.96); backdrop-filter: blur(8px); }
.modal-head h2 { margin: 0; font-size: 1.25rem; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 11px; background: #edf0ee; cursor: pointer; }
.modal-body { padding: 23px; }
.modal-form { display: grid; gap: 18px; }
.kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 13px; background: #edf0ee; }
.kind-switch label { display: block; }
.kind-switch input { position: absolute; opacity: 0; pointer-events: none; }
.kind-switch span { display: grid; min-height: 39px; place-items: center; border-radius: 10px; color: var(--ink-soft); cursor: pointer; }
.kind-switch input:checked + span { background: #fff; color: var(--forest); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.toast-region { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 9px; }
.toast { min-width: 260px; max-width: 390px; padding: 14px 17px; border-radius: 13px; background: var(--forest); color: #fff; box-shadow: var(--shadow); animation: toastIn .2s ease-out; }
.toast.error { background: #9d3f3f; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.mobile-nav { display: none; }
.mobile-top { display: none; }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .entry-row { grid-template-columns: 48px 1fr 110px 42px; }
  .entry-cycle { display: none; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .setup-shell, .login-layout { grid-template-columns: 1fr; }
  .setup-intro { min-height: auto; padding: 48px 25px; }
  .setup-intro h1 { font-size: 2.5rem; }
  .setup-card { margin: 0; border-radius: 28px 28px 0 0; }
  .login-art { display: none; }
  .login-panel { min-height: 100vh; align-content: center; padding: 28px; }
  .login-brand { margin-bottom: 55px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main-area { padding: 0 15px 25px; }
  .topbar { height: auto; display: block; padding: 16px 0 18px; }
  .topbar-title { display: none; }
  .topbar-actions { justify-content: space-between; }
  .month-picker { flex: 1; justify-content: space-between; }
  .mobile-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 15px 7px; background: var(--paper); }
  .mobile-top .sidebar-brand { padding: 0; color: var(--forest); }
  .mobile-top .sidebar-brand small { color: var(--ink-soft); }
  .mobile-top .brand-mark { width: 39px; height: 39px; border-radius: 12px; font-size: 1.2rem; }
  .mobile-household { max-width: 145px; border: 0; padding: 0 5px; background: transparent; font-size: .78rem; font-weight: 800; box-shadow: none; }
  .page-header { align-items: center; margin-top: 4px; }
  .page-header h2 { font-size: 1.35rem; }
  .page-header p { display: none; }
  .page-header .button span { display: none; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 122px; padding: 16px; }
  .stat-value { margin-top: 20px; font-size: 1.4rem; }
  .distribution-body { grid-template-columns: 130px 1fr; gap: 16px; }
  .donut { width: 130px; height: 130px; }
  .donut::after { inset: 23px; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .toolbar { align-items: stretch; flex-wrap: wrap; }
  .search-box { min-width: 100%; }
  .toolbar select { flex: 1; min-width: 0; }
  .entry-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 13px 14px; }
  .entry-row > .status-pill { display: none; }
  .entry-row .row-menu { display: none; }
  .category-icon { width: 39px; height: 39px; }
  .receipt-share-tip {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 17px;
  border-radius: 16px;
  background: var(--forest);
  color: #fff;
}

.receipt-share-tip > svg {
  width: 23px;
  color: #8de1cc;
}

.receipt-share-tip div {
  display: grid;
  gap: 3px;
}

.receipt-share-tip span {
  color: #c9ddd8;
  font-size: .8rem;
  line-height: 1.4;
}

.receipt-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
  .receipt-summary .mini-stat:last-child { grid-column: 1 / -1; }
  .receipt-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .receipt-row > svg { display: none; }
  .receipt-row .row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .receipt-date { width: 48px; min-height: 45px; }
  .receipt-item { grid-template-columns: 1fr 1fr 38px; }
  .receipt-item label:nth-child(1), .receipt-item label:nth-child(2) { grid-column: 1 / -1; }
  .receipt-item label:nth-child(4) { grid-column: 2; }
  .receipt-item-remove { grid-column: 3; grid-row: 3; }
  .receipt-import-actions .button { flex: 1; }
  .receipt-items-head { align-items: center; }
  .report-summary { grid-template-columns: 1fr; gap: 9px; }
  .bar-chart { height: 235px; gap: 5px; padding-left: 0; padding-right: 0; }
  .bar-label { font-size: .58rem; }
  .month-detail { padding: 18px; }
  .month-cat-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px; }
  .month-cat-bar { grid-column: 1 / -1; order: 3; }
  .month-cat-amount { text-align: right; }
  .settings-grid { grid-template-columns: 1fr; }
  .category-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px; }
  .category-actions .button { width: 38px; padding: 0; font-size: 0; }
  .category-actions .button::before { content: "✎"; font-size: 1rem; }
  .member-row { grid-template-columns: 40px 1fr auto; padding: 13px 14px; }
  .member-row .role-pill { display: none; }
  .member-actions .button span { display: none; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { max-height: 92vh; border-radius: 25px 25px 0 0; }
  .receipt-viewer-backdrop { padding: 0; }
  .receipt-viewer { max-height: 100vh; border-radius: 0; }
  .receipt-viewer-head { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .receipt-viewer-controls { width: 100%; justify-content: flex-end; }
  .receipt-viewer-body { padding: 10px; }
  .receipt-file-card-actions .button { flex: 1; }
  .mobile-nav { position: fixed; z-index: 50; inset: auto 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(18,59,59,.96); box-shadow: 0 15px 40px rgba(18,59,59,.28); backdrop-filter: blur(12px); }
  .mobile-nav .nav-item { min-height: 51px; display: grid; place-items: center; gap: 1px; padding: 4px; border-radius: 14px; font-size: .58rem; }
  .mobile-nav .nav-item svg { width: 19px; }
  .mobile-nav .nav-add { transform: translateY(-16px); width: 52px; height: 52px; justify-self: center; border: 5px solid var(--paper); border-radius: 18px; background: var(--coral); color: #fff; box-shadow: 0 8px 18px rgba(230,121,80,.35); }
  .toast-region { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 12px; }
  .toast { min-width: 0; width: 100%; }
}

@media (max-width: 430px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 116px; }
  .stat-label { font-size: .69rem; }
  .stat-hint { display: none; }
  .distribution-body { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}