:root {
  color-scheme: light;
  --ink: #252b24;
  --muted: #777b70;
  --line: #e8e4d9;
  --cream: #f4f1e8;
  --green: #284f3f;
  --green-soft: #e8eee7;
  --gold: #b58a49;
  --white: #fff;
  --shadow: 0 12px 38px rgba(41, 47, 37, .045);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.shell { max-width: 1120px; margin: auto; padding: 0 20px 28px; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(92, 93, 77, .12); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 37px; height: 37px; border-radius: 50%; background: var(--green); color: #f5f1df; display: grid; place-items: center; font: 22px Georgia, serif; }
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand strong { font-size: 13px; letter-spacing: .17em; }
.brand small { margin-top: 5px; font-size: 9px; color: var(--muted); letter-spacing: normal; }
.secure { font-size: 11px; color: #647364; background: rgba(255,255,255,.65); padding: 8px 11px; border-radius: 30px; }
.secure span { font-size: 8px; color: #609267; margin-right: 5px; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; padding: 42px 0 22px; gap: 20px; }
.eyebrow { font-size: 10px; letter-spacing: normal; font-weight: 700; color: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
.hero h1, .state-card h1 { font: 500 clamp(31px, 5vw, 43px)/1.12 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 8px 0 9px; letter-spacing: normal; }
.hero p { color: var(--muted); margin: 0; font-size: 14px; }
.updated { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; padding-bottom: 5px; }
.updated strong { color: var(--ink); font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #73926f; box-shadow: 0 0 0 4px #e4eadd; }
.demo-banner { display: flex; align-items: center; gap: 10px; border: 1px solid #ead7ad; background: #fffaf0; color: #795e2b; border-radius: 10px; padding: 11px 14px; font-size: 12px; margin-bottom: 15px; }
.demo-banner span { background: #ead8b5; border-radius: 4px; padding: 3px 6px; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.metrics { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.metric { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 19px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 122px; }
.metric span { font-size: 11px; color: var(--muted); }
.metric strong { font-size: 23px; line-height: 1.25; margin: 11px 0 4px; letter-spacing: -.035em; }
.metric small { font-size: 9px; color: var(--muted); }
.metric-primary { background: var(--green); color: #fff; }
.metric-primary span, .metric-primary small { color: #d5dfd3; }
.metric-primary strong { font-size: 26px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 20px 22px; margin-bottom: 14px; box-shadow: var(--shadow); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-heading h2 { font: 500 20px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 4px 0 0; letter-spacing: normal; }
.pill, .private-lock { font-size: 9px; letter-spacing: normal; padding: 6px 9px; border-radius: 20px; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.member-card { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; min-width: 0; }
.member-index { font: 18px Georgia, serif; color: var(--gold); }
.member-card div { min-width: 0; flex: 1; }
.member-card strong, .member-card small { display: block; }
.member-card strong { font-size: 13px; }
.member-card small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.member-card b { font-size: 13px; white-space: nowrap; }
.table-total { font-size: 13px; font-weight: 700; color: var(--green); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 670px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #efede7; font-size: 11px; }
th { color: var(--muted); font-size: 9px; letter-spacing: normal; text-transform: uppercase; font-weight: 600; }
td strong { font-size: 11px; font-weight: 600; }
.amount { text-align: right; white-space: nowrap; font-weight: 700; }
.status { font-size: 8px; letter-spacing: normal; color: #557454; background: #edf3e9; border-radius: 20px; padding: 4px 7px; white-space: nowrap; }
.status-pending { color: #8a622b; background: #fbf0d8; white-space: normal; }
.expense-cards { display: none; }
.private-panel { border-color: #dfe4da; background: #fdfdf9; }
.private-lock { background: #f2ebdf; color: #89683b; }
.private-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.private-stat { background: #f7f7f1; border-radius: 8px; padding: 12px; }
.private-stat span, .private-stat strong { display: block; }
.private-stat span { font-size: 10px; color: var(--muted); }
.private-stat strong { font-size: 16px; margin-top: 5px; }
.private-disclaimer { font-size: 9px; color: #9b7140; margin: 9px 0 0; grid-column: 1 / -1; }
.private-panel h3 { font-size: 12px; margin: 18px 0 8px; }
.detail-row, .payment-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; }
.detail-row strong, .detail-row small, .payment-row strong, .payment-row small { display: block; }
.detail-row strong, .payment-row strong { font-size: 11px; }
.detail-row small, .payment-row small { font-size: 9px; color: var(--muted); margin-top: 4px; }
.detail-amount { text-align: right; }
.detail-amount b { font-size: 13px; }
.payment-row { display: grid; grid-template-columns: 1fr auto auto; }
.payment-row b { font-size: 12px; white-space: nowrap; }
.payment-row > small { text-align: right; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; color: #85867b; font-size: 9px; }
.state-card { max-width: 540px; margin: 13vh auto; padding: 35px 28px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.state-card h1 { font-size: 30px; }
.state-card p { font-size: 13px; color: var(--muted); }
.small-note { font-size: 10px !important; }
.loader { width: 22px; height: 22px; border: 2px solid #dce4d9; border-top-color: var(--green); border-radius: 50%; margin: 16px auto 0; animation: spin .8s linear infinite; }
.hidden { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
  .shell { padding: 0 14px 20px; }
  .topbar { height: 64px; }
  .secure { font-size: 10px; padding: 7px 9px; }
  .hero { display: block; padding: 29px 0 17px; }
  .hero h1 { font-size: 33px; line-height: 1.2; }
  .hero p { font-size: 12px; max-width: 320px; }
  .updated { padding: 0; margin-top: 15px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric { padding: 15px; min-height: 106px; }
  .metric-primary { grid-column: 1 / -1; min-height: 113px; }
  .metric strong { font-size: 19px; }
  .metric-primary strong { font-size: 25px; }
  .panel { padding: 16px 14px; border-radius: 11px; }
  .section-heading h2 { font-size: 18px; }
  .member-grid { grid-template-columns: 1fr; gap: 7px; }
  .member-card { padding: 11px; }
  .member-card b { font-size: 13px; }
  .table-scroll { display: none; }
  .expense-cards { display: grid; gap: 8px; }
  .expense-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 8px; padding: 12px 0; border-top: 1px solid #efede7; }
  .expense-card div span, .expense-card div strong { display: block; }
  .expense-card div span { font-size: 9px; color: var(--muted); }
  .expense-card div strong { font-size: 11px; margin-top: 3px; }
  .expense-card > b { font-size: 12px; white-space: nowrap; }
  .expense-card > .status { grid-column: 1 / -1; justify-self: start; }
  .private-summary { grid-template-columns: 1fr 1fr; gap: 7px; }
  .private-stat { padding: 10px; }
  .private-stat strong { font-size: 14px; }
  .detail-row { align-items: flex-start; }
  .detail-amount b { font-size: 12px; }
  .detail-amount small { max-width: 150px; }
  .payment-row { grid-template-columns: 1fr auto; gap: 5px; }
  .payment-row > small { grid-column: 1 / -1; text-align: left; margin: 0; }
  footer { display: block; line-height: 1.8; }
  .state-card { margin: 10vh 0; padding: 29px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }