@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --paper:#f7f4ee; --paper-2:#fcfaf6; --ink:#242621; --muted:#8b8d85; --line:#e8e4da; --coral:#e8794f; --coral-soft:#f9e5da; --sage:#8da58a; --sage-dark:#56735f; --sage-soft:#e8f0e7; --yellow:#edc868; --yellow-soft:#fbf1cc; --lavender:#aaa3d8; --lavender-soft:#eeebfa; --shadow:0 16px 40px rgba(47,47,38,.07); --radius:18px; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font:14px/1.5 'DM Sans',ui-sans-serif,system-ui,sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:246px; flex:0 0 246px; padding:32px 18px 24px; border-right:1px solid var(--line); background:var(--paper-2); display:flex; flex-direction:column; }
.brand-mark { display:flex; align-items:center; gap:11px; padding:0 13px; font-size:13px; line-height:1.05; letter-spacing:.02em; color:var(--muted); }
.brand-mark strong { font-size:18px; color:var(--ink); letter-spacing:-.045em; }
.brand-house { display:grid; place-items:center; background:var(--coral); color:white; width:38px; height:38px; border-radius:13px; font-size:25px; line-height:1; padding-bottom:4px; }
.sidebar-family { display:flex; gap:11px; align-items:center; margin:54px 10px 27px; padding-bottom:23px; border-bottom:1px solid var(--line); font-size:13px; }
.sidebar-family small { display:block; color:var(--muted); margin-top:2px; font-size:11px; }
.avatar-stack { display:flex; padding-left:3px; }
.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--paper-2); color:white; font-weight:700; font-size:11px; margin-left:-4px; }
.avatar-matteo { background:var(--coral); }
.avatar-sara { background:var(--sage); }
.main-nav { display:grid; gap:6px; }
.nav-item { width:100%; border:0; background:transparent; text-align:left; border-radius:12px; padding:11px 12px; display:flex; align-items:center; gap:11px; cursor:pointer; color:#73766d; transition:.18s ease; }
.nav-item:hover { background:var(--paper); color:var(--ink); }
.nav-item.active { background:var(--coral-soft); color:var(--coral); font-weight:600; }
.nav-icon { width:20px; font-size:19px; text-align:center; line-height:1; font-weight:500; }
.nav-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:var(--coral); color:white; font-size:10px; }
.nav-badge.green { background:var(--sage); }
.sidebar-bottom { margin-top:auto; }
.sync-note { display:flex; align-items:center; gap:7px; padding:18px 12px 0; border-top:1px solid var(--line); margin-top:18px; color:var(--muted); font-size:10px; }
.sync-dot { width:7px; height:7px; background:var(--sage); border-radius:50%; }
.main-content { flex:1; min-width:0; max-width:1400px; margin:0 auto; padding:0 46px 56px; }
.topbar { height:88px; display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.mobile-brand { display:none; }
.topbar-context { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; }
.context-dot { width:7px; height:7px; background:var(--yellow); border-radius:50%; }
.icon-button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; display:none; }
.view { display:none; animation:fade-in .2s ease; }
.active-view { display:block; }
@keyframes fade-in { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
.eyebrow { color:var(--coral); text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700; margin:0 0 8px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:700 clamp(32px,4vw,47px)/1.05 'Playfair Display',Georgia,serif; letter-spacing:-.045em; margin-bottom:12px; }
h2 { font-size:19px; letter-spacing:-.03em; margin-bottom:4px; }
h3 { font-size:14px; margin-bottom:4px; }
.muted { color:var(--muted); }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:31px; }
.page-head p { color:var(--muted); margin-bottom:0; }
.actions { display:flex; gap:9px; align-items:center; }
.primary-button,.secondary-button { border:0; border-radius:11px; padding:11px 16px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-weight:600; transition:.18s ease; }
.primary-button { background:var(--coral); color:white; box-shadow:0 5px 15px rgba(232,121,79,.19); }
.primary-button:hover { background:#d96841; transform:translateY(-1px); }
.secondary-button { background:var(--paper-2); border:1px solid var(--line); color:var(--ink); }
.secondary-button:hover { border-color:#d5cfc3; background:white; }
.small-button { padding:8px 12px; font-size:12px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(260px,.8fr); gap:18px; }
.card { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.balance-card { min-height:286px; padding:28px 31px; position:relative; overflow:hidden; background:#e8f0e6; border-color:#dde9dc; }
.balance-card:after { content:''; position:absolute; width:230px; height:230px; border:1px solid rgba(86,115,95,.15); border-radius:50%; right:-64px; bottom:-108px; box-shadow:0 0 0 17px rgba(86,115,95,.04),0 0 0 34px rgba(86,115,95,.03); }
.balance-card .eyebrow { color:var(--sage-dark); }
.balance-card h2 { font:700 42px/1.1 'Playfair Display',Georgia,serif; letter-spacing:-.05em; margin:14px 0 4px; }
.balance-card .balance-caption { color:var(--sage-dark); font-size:13px; }
.balance-bottom { display:flex; gap:39px; margin-top:34px; position:relative; z-index:1; }
.mini-stat label { display:block; color:var(--sage-dark); font-size:10px; text-transform:uppercase; letter-spacing:.11em; margin-bottom:4px; }
.mini-stat strong { font-size:16px; }
.balance-card .spark { position:absolute; right:32px; top:34px; font-size:27px; color:var(--sage-dark); opacity:.65; }
.quick-actions { padding:24px; display:flex; flex-direction:column; justify-content:space-between; min-height:286px; }
.quick-actions h2 { margin-bottom:17px; }
.quick-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.quick-card { border:1px solid var(--line); border-radius:13px; background:white; padding:13px 12px; cursor:pointer; text-align:left; min-height:88px; transition:.18s ease; }
.quick-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.quick-card .quick-icon { font-size:19px; display:block; margin-bottom:9px; }
.quick-card strong { display:block; font-size:12px; }
.quick-card small { color:var(--muted); font-size:10px; }
.quick-card.coral .quick-icon { color:var(--coral); }.quick-card.sage .quick-icon { color:var(--sage-dark); }.quick-card.yellow .quick-icon { color:#c09a37; }.quick-card.lavender .quick-icon { color:#7972af; }
.section-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.72fr); gap:18px; margin-top:18px; }
.panel { padding:23px 24px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.panel-head h2 { margin:0; }
.text-link { border:0; padding:0; background:transparent; color:var(--coral); font-weight:600; font-size:12px; cursor:pointer; }
.expense-list { display:grid; gap:5px; }
.expense-row { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:11px; padding:8px 0; }
.expense-icon { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; font-size:16px; }
.icon-coral { background:var(--coral-soft); color:var(--coral); }.icon-sage { background:var(--sage-soft); color:var(--sage-dark); }.icon-yellow { background:var(--yellow-soft); color:#a58024; }.icon-lavender { background:var(--lavender-soft); color:#7972af; }
.expense-main strong { display:block; font-size:13px; font-weight:600; }.expense-main small { color:var(--muted); font-size:11px; }
.expense-amount { text-align:right; font-size:13px; font-weight:700; }.expense-amount small { display:block; color:var(--muted); font-size:10px; font-weight:400; }
.person-chip { display:inline-flex; align-items:center; gap:4px; }.person-dot { display:inline-block; width:6px; height:6px; border-radius:50%; }.person-dot.matteo { background:var(--coral); }.person-dot.sara { background:var(--sage); }
.event-list { display:grid; gap:12px; }.event-row { display:grid; grid-template-columns:39px minmax(0,1fr); gap:11px; align-items:center; }.event-date { background:var(--coral-soft); color:var(--coral); border-radius:10px; text-align:center; padding:5px 3px; font-size:10px; text-transform:uppercase; font-weight:700; line-height:1.15; }.event-date strong { display:block; font-size:16px; }.event-row strong { font-size:12px; display:block; }.event-row small { color:var(--muted); font-size:11px; }
.grocery-summary { background:#fbf1cd; border-color:#f4e7bd; }.grocery-summary .panel-head { margin-bottom:11px; }.progress-track { height:7px; background:rgba(192,154,55,.16); border-radius:10px; overflow:hidden; margin:12px 0 14px; }.progress-track span { display:block; height:100%; background:#d0a944; border-radius:inherit; }.grocery-count { color:#987720; font-size:11px; }.grocery-preview { display:flex; flex-wrap:wrap; gap:7px; }.grocery-pill { padding:5px 9px; border-radius:8px; background:rgba(255,255,255,.52); font-size:11px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:18px; }.stat-card { padding:18px 20px; }.stat-card small { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }.stat-card strong { display:block; font:700 25px/1.15 'Playfair Display',Georgia,serif; letter-spacing:-.04em; }.stat-card .trend { margin-top:8px; color:var(--sage-dark); font-size:10px; }.stat-card.coral-stat { background:var(--coral-soft); border-color:#f2d8cc; }.stat-card.yellow-stat { background:var(--yellow-soft); border-color:#f2e7bf; }.stat-card.sage-stat { background:var(--sage-soft); border-color:#dae7d9; }
.budget-panel { padding:24px 25px; margin-bottom:18px; background:#fffdf8; }.budget-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:19px; }.budget-head h2 { margin:0 0 3px; font:700 25px/1.1 'Playfair Display',Georgia,serif; letter-spacing:-.04em; }.budget-head p { margin-bottom:0; font-size:11px; }.budget-head-actions { display:flex; align-items:center; gap:12px; }.budget-top-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }.budget-metric { border-radius:13px; padding:15px 16px; border:1px solid var(--line); }.budget-metric small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }.budget-metric strong { display:block; font:700 24px/1.1 'Playfair Display',Georgia,serif; letter-spacing:-.04em; }.budget-metric span { display:block; color:var(--muted); font-size:10px; margin-top:7px; }.income-metric { background:var(--coral-soft); border-color:#f2d8cc; }.fund-metric { background:var(--sage-soft); border-color:#dae7d9; }.saving-metric { background:var(--yellow-soft); border-color:#f2e7bf; }.budget-person-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.budget-person { border:1px solid var(--line); border-radius:13px; padding:16px; background:white; }.budget-person-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }.budget-person-title .avatar { border:0; margin:0; width:32px; height:32px; }.budget-person-title strong { display:block; font-size:13px; }.budget-person-title small { display:block; color:var(--muted); font-size:10px; }.budget-lines { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; padding-bottom:13px; border-bottom:1px solid var(--line); }.budget-lines span { display:block; color:var(--muted); font-size:10px; }.budget-lines strong { display:block; font-size:12px; margin-top:2px; }.budget-person-result { padding-top:13px; }.budget-person-result span { display:block; color:var(--sage-dark); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.budget-person-result strong { display:block; color:var(--sage-dark); font:700 22px/1.1 'Playfair Display',Georgia,serif; margin-top:3px; }.budget-person-result small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }.budget-note { color:var(--muted); font-size:10px; margin:15px 0 0; }.modal-help { color:var(--muted); font-size:11px; background:var(--yellow-soft); border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }.month-switcher { display:flex; align-items:center; gap:8px; }.month-switcher button { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--paper-2); cursor:pointer; }.month-switcher strong { min-width:104px; text-align:center; font-size:13px; }.filter-tabs { display:flex; background:var(--paper-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:3px; }.filter-tabs button { border:0; border-radius:7px; background:transparent; padding:7px 10px; cursor:pointer; color:var(--muted); font-size:11px; }.filter-tabs button.active { background:white; color:var(--ink); box-shadow:0 1px 5px rgba(0,0,0,.07); }
.full-panel { padding:22px 25px; }.table-head,.table-row { display:grid; grid-template-columns:minmax(180px,1.2fr) 100px 120px 120px 82px; gap:10px; align-items:center; }.table-head { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; padding:0 12px 10px; border-bottom:1px solid var(--line); }.table-row { padding:12px; border-bottom:1px solid #f0ede7; }.table-row:last-child { border-bottom:0; }.table-row .expense-row { padding:0; }.type-pill { display:inline-flex; width:max-content; border-radius:100px; padding:5px 8px; font-size:10px; }.type-common { color:var(--sage-dark); background:var(--sage-soft); }.type-personal { color:#8d6b1c; background:var(--yellow-soft); }.table-cell { font-size:12px; }.table-cell.right { text-align:right; }.danger-button { color:#b66f63; border:0; background:transparent; cursor:pointer; font-size:16px; opacity:.7; }.empty-state { text-align:center; padding:38px 10px; color:var(--muted); }
.calendar-shell { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,.75fr); gap:18px; }.calendar-card { padding:22px 24px; }.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.weekday { padding:10px 4px; color:var(--muted); font-size:10px; text-transform:uppercase; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.day-cell { min-height:78px; padding:7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; }.day-cell:hover { background:#fffefa; }.day-cell.other-month { background:#faf8f3; color:#c0bdb4; }.day-cell.today { background:#fff6f0; }.day-number { font-size:11px; font-weight:600; margin-bottom:5px; }.day-cell.today .day-number { color:var(--coral); }.calendar-event { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-radius:5px; padding:3px 5px; margin-top:3px; font-size:9px; }.calendar-event.shared { background:var(--coral-soft); color:#b95837; }.calendar-event.matteo { background:var(--lavender-soft); color:#7168aa; }.calendar-event.sara { background:var(--sage-soft); color:var(--sage-dark); }.calendar-side { padding:23px; }.legend { display:grid; gap:9px; margin:17px 0 25px; }.legend-item { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }.legend-dot { width:9px; height:9px; border-radius:3px; }.upcoming-list { display:grid; gap:13px; }.upcoming-item { display:flex; gap:11px; align-items:start; }.upcoming-item .date-box { width:34px; flex:0 0 34px; border-radius:9px; text-align:center; padding:5px 1px; background:var(--paper); color:var(--coral); font-size:9px; text-transform:uppercase; font-weight:700; line-height:1.1; }.upcoming-item .date-box strong { display:block; font-size:14px; }.upcoming-item strong { display:block; font-size:12px; }.upcoming-item small { color:var(--muted); font-size:10px; }
.grocery-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.7fr); gap:18px; }.grocery-card { padding:23px 25px; }.grocery-add { display:flex; gap:8px; margin-bottom:19px; }.input { background:white; border:1px solid var(--line); border-radius:10px; padding:11px 12px; outline:none; color:var(--ink); width:100%; }.input:focus { border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }.select { appearance:none; background:white; border:1px solid var(--line); border-radius:10px; padding:11px 12px; width:100%; color:var(--ink); }.category-heading { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.13em; margin:20px 0 7px; }.grocery-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f1eee7; }.check { appearance:none; width:19px; height:19px; border-radius:6px; border:1.5px solid #c5c7bf; background:transparent; cursor:pointer; position:relative; flex:0 0 auto; }.check:checked { background:var(--sage); border-color:var(--sage); }.check:checked:after { content:'✓'; color:white; font-size:12px; position:absolute; left:3px; top:-1px; }.grocery-item.done .item-name { text-decoration:line-through; color:var(--muted); }.item-name { flex:1; font-size:13px; }.item-meta { color:var(--muted); font-size:10px; }.remove-item { border:0; color:#bbb8ae; background:transparent; cursor:pointer; }.base-list { padding:23px; }.base-list p { color:var(--muted); font-size:11px; margin-bottom:15px; }.base-items { display:flex; flex-wrap:wrap; gap:7px; }.base-item { border:1px solid var(--line); background:white; border-radius:8px; padding:7px 9px; font-size:11px; cursor:pointer; }.base-item:hover { border-color:var(--coral); color:var(--coral); }.base-item.added { opacity:.42; cursor:default; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.75fr); gap:18px; }.settings-card { padding:24px 26px; }.setting-block { padding:21px 0; border-bottom:1px solid var(--line); }.setting-block:first-child { padding-top:0; }.setting-block:last-child { border-bottom:0; padding-bottom:0; }.setting-block h3 { font-size:15px; margin-bottom:4px; }.setting-block p { color:var(--muted); font-size:11px; margin-bottom:18px; }.split-display { display:flex; justify-content:space-between; margin-bottom:11px; }.split-person { display:flex; align-items:center; gap:8px; font-weight:600; }.split-person strong { font-size:19px; }.split-person small { display:block; color:var(--muted); font-size:10px; font-weight:400; }.split-person.right { text-align:right; flex-direction:row-reverse; }.range { width:100%; accent-color:var(--coral); cursor:pointer; }.setting-footnote { margin-top:13px; color:var(--muted); font-size:10px; }.profile-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }.profile-row .avatar { margin:0; border:0; width:35px; height:35px; }.profile-row input { max-width:180px; }.about-card { background:var(--coral-soft); border-color:#f2d8cc; padding:24px; }.about-card h2 { font:700 27px/1.05 'Playfair Display',Georgia,serif; margin-bottom:9px; }.about-card p { color:#9c644c; font-size:12px; }.feature-list { display:grid; gap:10px; margin-top:23px; }.feature-list span { display:flex; gap:8px; align-items:center; color:#8e604d; font-size:11px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(36,38,33,.35); display:grid; place-items:center; padding:20px; z-index:20; }.modal-backdrop[hidden] { display:none; }.modal { max-width:485px; width:100%; max-height:calc(100vh - 40px); overflow:auto; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:25px; box-shadow:0 24px 70px rgba(0,0,0,.16); }.modal-head { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:21px; }.modal-head h2 { font:700 26px/1.1 'Playfair Display',Georgia,serif; margin:0; }.close-button { border:0; background:transparent; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.form-field { display:grid; gap:6px; margin-bottom:14px; }.form-field.full { grid-column:1/-1; }.form-field label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.segmented { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.segmented label { border:1px solid var(--line); background:white; border-radius:10px; padding:10px 9px; text-align:center; color:var(--muted); font-size:11px; cursor:pointer; }.segmented input { display:none; }.segmented input:checked+span { color:var(--coral); font-weight:700; }.segmented label:has(input:checked) { border-color:var(--coral); background:var(--coral-soft); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,90px); background:var(--ink); color:white; padding:10px 15px; border-radius:10px; font-size:12px; opacity:0; transition:.25s ease; z-index:40; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }.bottom-nav { display:none; }
@media (max-width:980px) { .sidebar{width:205px;flex-basis:205px}.main-content{padding-left:28px;padding-right:28px}.dashboard-grid,.section-grid,.calendar-shell,.grocery-layout,.settings-grid{grid-template-columns:1fr}.quick-actions{min-height:auto}.table-head,.table-row{grid-template-columns:minmax(150px,1.2fr) 85px 100px 95px 42px} }
@media (max-width:980px) { .budget-top-grid{grid-template-columns:1fr}.budget-head-actions{flex-wrap:wrap;justify-content:flex-end} }
@media (max-width:680px) { body{padding-bottom:72px}.app-shell{display:block}.sidebar{display:none}.main-content{padding:0 16px 26px}.topbar{height:68px;justify-content:space-between}.mobile-brand{display:flex;align-items:center;gap:6px;font-size:14px;letter-spacing:-.03em}.mobile-brand strong{font-weight:700}.mobile-brand .brand-house{width:28px;height:28px;border-radius:9px;font-size:19px}.topbar-context{display:none}.icon-button{display:block}.page-head{align-items:start;flex-direction:column;margin-bottom:23px}.page-head .actions{width:100%}.page-head .actions .primary-button{flex:1;justify-content:center}h1{font-size:35px}.balance-card{min-height:250px;padding:24px}.balance-card h2{font-size:36px}.balance-bottom{gap:22px;margin-top:27px}.section-grid{margin-top:14px;gap:14px}.stat-row{gap:8px}.stat-card{padding:13px 12px}.stat-card strong{font-size:21px}.stat-card .trend{display:none}.panel,.full-panel,.calendar-card,.calendar-side,.grocery-card,.base-list,.settings-card,.about-card{padding:19px}.toolbar{align-items:stretch;flex-direction:column}.month-switcher{justify-content:space-between}.filter-tabs{justify-content:space-between}.filter-tabs button{flex:1}.table-wrap{overflow-x:auto;margin:0 -8px;padding:0 8px}.table-head,.table-row{min-width:560px}.calendar-grid{min-width:610px}.calendar-card{overflow-x:auto}.day-cell{min-height:65px}.grocery-add{flex-direction:column}.grocery-add .primary-button{justify-content:center}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);bottom:0;left:0;right:0;height:70px;padding:7px 10px max(7px,env(safe-area-inset-bottom));background:rgba(252,250,246,.96);border-top:1px solid var(--line);z-index:10;backdrop-filter:blur(12px)}.bottom-item{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;gap:2px;border-radius:10px;cursor:pointer}.bottom-item span{font-size:20px;line-height:1}.bottom-item small{font-size:10px}.bottom-item.active{color:var(--coral);background:var(--coral-soft)} }
@media (max-width:680px) { .budget-head{flex-direction:column}.budget-head-actions{width:100%;align-items:stretch;flex-direction:column}.budget-head-actions .month-switcher{justify-content:space-between}.budget-head-actions .secondary-button{justify-content:center}.budget-person-grid{grid-template-columns:1fr}.budget-metric strong{font-size:22px} }