:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #1c211d; background: #f4f2ec; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(760px, 100%); margin: auto; padding: max(24px, env(safe-area-inset-top)) 18px 72px; }
header, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { font-size: clamp(32px, 9vw, 56px); letter-spacing: -.055em; margin: 0; }
h2 { font-size: 20px; margin: 0 0 16px; }
.eyebrow { margin: 0 0 5px; color: #647066; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.muted, small { color: #6c756d; }
.hidden { display: none !important; }
section { margin-top: 32px; }
.login { min-height: 80vh; display: grid; align-content: center; max-width: 430px; margin: auto; }
.hero { background: #1d472f; color: #f7f3e8; padding: 24px; border-radius: 22px; }
.hero p { margin: 0 0 10px; color: #c9d5ca; }
.hero strong { display: block; font-size: clamp(40px, 12vw, 72px); letter-spacing: -.06em; }
.hero small { color: #c9d5ca; }
.status { background: #e3e7df; border-radius: 100px; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.status[data-state="connected"] { background: #d9ebda; color: #225c35; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cards article { background: #fff; padding: 17px; border: 1px solid #e1ded6; border-radius: 15px; display: grid; gap: 20px; }
.cards strong { font-size: 22px; }
.list { border-top: 1px solid #d8d5cc; }
.list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 2px; border-bottom: 1px solid #d8d5cc; }
.list span, .list small { display: block; }
.list strong { white-space: nowrap; }
.list .income-action { display: flex; align-items: center; gap: 10px; }
.list .receive-income { border: 1px solid #b8c7ba; padding: 0 10px; }
.expense { color: #9d3733; } .income { color: #25713d; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 7px; color: #5c645d; font-size: 14px; }
input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #cfcac0; background: #fff; border-radius: 12px; font: inherit; }
button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 18px; background: #1d472f; color: #fff; font: 600 15px inherit; cursor: pointer; }
button.secondary { margin-top: 12px; background: #e2e7df; color: #1d472f; width: 100%; }
button.quiet { min-height: 36px; background: transparent; color: #1d472f; padding: 0 6px; }
.error { color: #a1342f; }
@media (max-width: 480px) { header { align-items: flex-start; } .status { margin-top: 4px; } }