/* A shared household, then its people. No exchange-rate assumptions. */
.solomin-brand { font-family:var(--font-sans); font-weight:800; font-size:31px; letter-spacing:-1.3px; line-height:1; }
.sidebar nav { margin-top:42px; }
.current-rate { display:flex; flex-direction:column; align-items:flex-end; gap:7px; padding-bottom:5px; }
.rate-value { font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }
.rate-caption,.rate-neutral { color:var(--muted); font-size:12px; }
.household .rate-caption,.household .rate-neutral { color:var(--accent-muted); }
.account-rate { display:flex; flex-direction:column; gap:5px; min-height:42px; }
.account-rate .rate-value { font-size:13px; }
.account-rate .rate-caption { font-size:11px; }
.person-accounts { border-top:1px solid var(--line); margin-top:20px; padding-top:6px; }
.personal-account { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:12px; font-size:12px; }
.personal-account span { color:var(--muted); overflow-wrap:anywhere; }
.personal-account strong { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
.current-summary-note { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:8px; }
.current-summary-note .summary-note { margin:0; }
.current-summary-note .footer-link { flex-shrink:0; }
.current-recent { margin-top:24px; }
.current-recent .tx-note { max-width:none; }
.account-footer { border-top:1px solid var(--line); margin-top:18px; padding-top:10px; }
.delete-account { display:inline-flex; gap:7px; align-items:center; min-height:44px; font-size:12px; }
.delete-account:hover { color:var(--danger); }
.archived-accounts { margin-top:24px; }
.archived-accounts summary { cursor:pointer; font-weight:500; }
.archived-accounts > p { margin-top:12px; }
.archived-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0 0; margin-top:18px; border-top:1px solid var(--line); }
.archived-row strong { font-size:14px; }
.brand-mark .bi { font-size:23px; line-height:1; }
.bi { flex-shrink:0; }
nav .bi { width:22px; text-align:center; }
nav button:hover:not(.active) { background:var(--bg); color:var(--ink); }
nav button.active { background:var(--accent-soft); color:var(--on-accent); }
.topbar h1 { font-size:30px; letter-spacing:-1px; }
.topbar { margin-bottom:28px; }
.top-actions input { background:var(--paper); border-color:var(--line); }
main { max-width:1490px; }
.household {
  padding:30px;
  background:var(--accent);
  border-radius:28px;
  color:var(--on-accent);
}
.household-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.household-heading h2 { display:flex; align-items:center; gap:10px; font-size:21px; letter-spacing:-.5px; }
.household-heading h2 .bi { font-size:21px; }
.household .currency-switch { margin:0; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.household .chip { background:transparent; color:var(--accent-muted); border-color:transparent; min-height:40px; padding:8px 12px; font-size:12px; font-weight:500; }
.household .chip:hover:not(.active) { background:#ffffff50; }
.household .chip.active { background:var(--paper); color:var(--on-accent); }
.household-summary { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:end; padding:30px 0; }
.balance-caption { font-size:13px; color:var(--accent-muted); margin-bottom:8px; }
.balance-value { font-size:clamp(36px,4.1vw,60px); font-weight:500; line-height:1.12; letter-spacing:-2.6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.month-caption { color:var(--accent-muted); font-size:12px; margin-bottom:12px; }
.month-caption::first-letter { text-transform:uppercase; }
.household-flow,.person-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; }
.household-flow dt,.person-flow dt { display:flex; align-items:center; gap:6px; color:var(--accent-muted); font-size:12px; }
.household-flow dd { margin:7px 0 0; font-size:20px; font-weight:500; letter-spacing:-.5px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quick-action { border:0; border-radius:18px; padding:12px 18px; min-height:70px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:15px; font-weight:500; text-align:left; }
.quick-expense { background:var(--action); color:var(--on-action); }
.quick-expense:hover { background:var(--action-hover); }
.quick-income { background:var(--paper); color:var(--ink); }
.quick-income:hover { background:#f6f4fd; }
.action-sign { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#ffffff1c; flex-shrink:0; font-size:23px; }
.quick-income .action-sign { background:var(--accent-soft); }
.people-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.person-card { background:var(--paper); padding:24px; border-radius:22px; min-width:0; }
.person-heading { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.person-heading h3 { font-size:17px; overflow-wrap:anywhere; }
.person-avatar { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; font-size:14px; font-weight:500; }
.person-avatar-0 { background:#eee9fb; color:#574782; }
.person-avatar-1 { background:#e8efeb; color:#38624b; }
.person-card .balance-caption { color:var(--muted); font-size:12px; }
.person-balance { font-size:clamp(22px,2.5vw,32px); letter-spacing:-1px; line-height:1.2; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.person-flow { border-top:1px solid var(--line); padding-top:17px; margin-top:20px; }
.person-flow dt { color:var(--muted); }
.person-flow dd { margin:6px 0 0; font-size:16px; font-weight:500; letter-spacing:-.3px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.person-empty { font-size:11px; color:var(--muted); margin-top:14px; }
.overview-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:18px; margin-top:28px; }
.overview-grid .card { border-radius:22px; }
.section-heading > .bi { color:var(--muted); font-size:20px; }
.section-heading h3 { font-size:17px; }
.footer-link { display:inline-flex; gap:7px; align-items:center; min-height:44px; }
.category-row { margin-top:24px; }
.bar { height:6px; }
.spending-card .bar-fill { background:#b8a9eb; }
.recent-card .section-heading { margin-bottom:4px; }
.recent-card .tx-row-preview { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:17px 0; }
.tx-row-preview .tx-date,.tx-row-preview .tx-actions { display:none; }
.recent-card .tx-note { max-width:230px; }
.recent-card .tx-value { font-size:13px; }
.tx-icon { font-size:16px; }
.tx-icon.expense { background:#f3efeb; color:#84664d; }
.tx-icon.income,.tx-icon.refund { background:#edf4ef; }
.summary-note { max-width:85ch; font-size:11px; line-height:1.65; margin-top:14px; }
.icon-button { min-height:44px; min-width:44px; font-size:18px; }
.tx-actions button { min-height:44px; }
.row-top { align-items:baseline; }
.row-top strong { text-align:right; font-variant-numeric:tabular-nums; }

@media(max-width:1150px) {
  .current-rate { align-items:flex-start; }
  .household-summary { grid-template-columns:1fr; gap:22px; }
  .household-month { border-top:1px solid #51446625; padding-top:18px; }
  .household-flow { max-width:500px; }
  .household-flow dd { font-size:22px; }
  .overview-grid { grid-template-columns:1fr; }
  .recent-card .tx-note { max-width:400px; }
}
@media(max-width:800px) {
  .sidebar nav { margin-top:0; }
  .solomin-brand { font-size:28px; }
  .personal-account { display:block; }
  .personal-account strong { display:block; text-align:left; margin-top:3px; font-size:12px; }
  .personal-account span { font-size:11px; }
  .current-summary-note { align-items:flex-start; gap:12px; margin-top:14px; }
  .current-summary-note .footer-link { min-height:30px; }
  .current-rate { padding:0; }
  .current-rate .rate-value { font-size:15px; }
  main { padding:24px 18px 110px; }
  .topbar { flex-wrap:nowrap; align-items:center; gap:10px; margin-bottom:22px; }
  .topbar h1 { font-size:26px; }
  .top-actions { width:auto; gap:8px; }
  .top-actions input { width:158px; min-height:42px; font-size:14px; padding:9px; }
  .top-actions .primary { padding:10px 14px; }
  .topbar:has(#add:not([hidden])) { flex-wrap:wrap; }
  .household { padding:22px; border-radius:24px; }
  .household-heading { flex-wrap:wrap; gap:12px; }
  .household-heading h2 { font-size:20px; }
  .household .chip { min-height:36px; padding:6px 9px; font-size:11px; }
  .household-summary { padding:25px 0 22px; gap:22px; }
  .balance-value { font-size:42px; letter-spacing:-1.8px; }
  .balance-caption { font-size:12px; }
  .household-flow dd { font-size:19px; }
  .quick-actions { gap:10px; }
  .quick-action { min-height:66px; padding:12px; gap:10px; border-radius:15px; font-size:13px; line-height:1.35; }
  .action-sign { width:32px; height:32px; font-size:20px; }
  .people-grid { gap:12px; margin-top:12px; }
  .person-card { padding:17px 14px; border-radius:20px; }
  .person-heading { gap:8px; margin-bottom:18px; }
  .person-heading h3 { font-size:15px; }
  .person-avatar { width:30px; height:30px; font-size:12px; }
  .person-card .balance-caption { font-size:11px; }
  .person-balance { font-size:22px; letter-spacing:-.8px; }
  .person-flow { grid-template-columns:1fr; gap:12px; padding-top:14px; margin-top:16px; }
  .person-flow dt { font-size:11px; }
  .person-flow dd { font-size:15px; margin-top:3px; }
  .overview-grid { margin-top:24px; gap:16px; }
  .summary-note { font-size:10px; }
  .recent-card .tx-note { max-width:155px; }
  .recent-card .tx-row-preview { grid-template-columns:30px minmax(0,1fr) auto; gap:8px; }
  .recent-card .tx-icon { width:30px; height:30px; font-size:14px; }
  .recent-card .tx-value { font-size:12px; }
  .brand-mark .bi { font-size:21px; }
  nav { background:var(--paper); border-color:var(--line); box-shadow:0 4px 24px #1515150a; }
  nav button { min-height:52px; }
  nav button.active { background:var(--accent-soft); }
  .family-label { width:min(190px,52vw); }
}
@media(max-width:359px) {
  .people-grid { grid-template-columns:1fr; }
  .person-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .household { padding:18px; }
  .balance-value { font-size:34px; }
  .quick-action { flex-direction:column; text-align:center; }
  .top-actions input { width:145px; }
}