:root {
  --ink: #17211d; --muted: #6d7772; --line: #dfe5e1; --paper: #fff;
  --canvas: #f4f6f3; --green: #1f7354; --green-soft: #e5f3ec; --amber: #9a6415;
  --red: #a23b3b; --shadow: 0 12px 35px rgba(23, 33, 29, .06);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.topbar { height: 68px; padding: 0 max(24px, calc((100vw - 1240px)/2)); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: white; background: var(--ink); font-family: Georgia, serif; }
nav { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; }
nav a { padding: 8px 11px; color: var(--muted); text-decoration: none; border-radius: 8px; font-size: 14px; }
nav a:hover, nav a.active { background: #edf0ed; color: var(--ink); }
.nav-toggle { display:none; width:42px; height:42px; padding:10px; place-content:center; gap:4px; background:#edf0ed; }.nav-toggle span { display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .18s ease,opacity .18s ease; }.nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(6px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }.nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-6px) rotate(-45deg); }
.nav-form { display:flex; }.nav-form button { padding:8px 11px; color:var(--muted); background:transparent; font-size:14px; font-weight:400; }.nav-form button:hover { color:var(--ink); background:#edf0ed; filter:none; }
.shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 80px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 6px; font: 500 clamp(34px, 5vw, 48px)/1.05 Georgia, serif; letter-spacing: -.035em; } h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.02em; } h3 { margin-bottom: 6px; }
.eyebrow { margin-bottom: 7px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }.page-heading .muted { margin: 0; }
.month-picker { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.month-picker label { margin: 0; font-size: 12px; color: var(--muted); }
.month-picker input { width: auto; padding: 7px 8px; border: 0; background: #f1f3f1; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.metric { min-height: 138px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.metric span, .metric small { display: block; color: var(--muted); font-size: 12px; }.metric strong { display: block; margin: 12px 0 15px; font: 500 26px/1 Georgia, serif; }
.metric.accent { background: var(--green-soft); border-color: #c9e3d6; }.metric.warning strong { color: var(--amber); }.metric.dark { color: #fff; background: var(--ink); border-color: var(--ink); }.metric.dark span, .metric.dark small { color: #b7c2bd; }
.panel { margin-bottom: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { min-height: 78px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.panel-heading .eyebrow { margin-bottom: 4px; }
.actions { display: flex; gap: 8px; }.button, button { border: 0; border-radius: 9px; padding: 10px 15px; background: var(--green); color: #fff; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; }.button:hover, button:hover { filter: brightness(.92); }.button.secondary { color: var(--ink); background: #edf0ed; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 12px 20px; color: var(--muted); background: #fafbfa; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } td { padding: 16px 20px; border-bottom: 1px solid #edf0ed; white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; }.subtle td { background: #fafbfa; color: var(--muted); }.positive { color: var(--green); }.negative { color: var(--amber); }.right { text-align: right; }
.empty { padding: 58px 24px; text-align: center; color: var(--muted); }.empty h3 { color: var(--ink); }.empty .button { display: inline-block; margin-top: 8px; }
.split-layout { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }.form-panel { padding: 24px; }.form-panel.wide { padding: 0; }.form-panel.wide form { padding: 24px; }.form-panel > h2 { margin-bottom: 22px; }
.stack { display: grid; gap: 16px; }.stack button { margin-top: 4px; }
label { display: grid; gap: 6px; color: #4f5b55; font-size: 12px; font-weight: 700; } label small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid #ccd4cf; border-radius: 8px; padding: 10px 11px; color: var(--ink); background: white; font: inherit; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,115,84,.1); } textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: end; }.form-grid.compact { grid-template-columns: repeat(4, 1fr); }.span-two { grid-column: span 2; }.align-end { align-self: end; }
.money-input { display: flex; align-items: center; border: 1px solid #ccd4cf; border-radius: 8px; overflow: hidden; }.money-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,115,84,.1); }.money-input span { padding-left: 11px; color: var(--muted); }.money-input input { border: 0; box-shadow: none !important; padding-left: 5px; }
.card-list { display: grid; }.record-card { border-bottom: 1px solid var(--line); }.record-card:last-child { border-bottom: 0; }.record-card summary { padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }.record-card summary::-webkit-details-marker { display:none; }.record-card summary div { display:grid; }.record-card summary span { color: var(--muted); font-size: 13px; }.record-body { padding: 18px 22px 22px; background: #fafbfa; border-top: 1px solid var(--line); }.inline-fields { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; }.inline-fields.three { grid-template-columns: repeat(3, 1fr) auto; }.danger-zone { margin-top: 15px; }.ghost { padding: 5px 0; background: transparent; }.danger { color: var(--red); }.icon-button { padding: 3px 9px; color: var(--muted); background: transparent; font-size: 20px; }.pill { display: inline-block; width: fit-content; padding: 4px 8px; background: #eef1ef; border-radius: 999px; color: #56615b; font-size: 11px; white-space: nowrap; }
.notice { margin-bottom: 20px; padding: 12px 16px; color: #14573f; background: var(--green-soft); border: 1px solid #c9e3d6; border-radius: 10px; }.notice.info { color: #5b4a28; background: #f8f0de; border-color: #ead9b5; }
.notice.error { color:#7d2929; background:#f8e4e4; border-color:#ecc2c2; }.setup-panel { padding:28px; }.setup-panel > p { max-width:760px; }.code-block { margin:18px 0; padding:16px 18px; white-space:pre-line; color:#d8e7df; background:#17211d; border-radius:10px; font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }.capitalize { text-transform:capitalize; }.banking-metrics { grid-template-columns:repeat(3,1fr); }.bank-item { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 22px; border-bottom:1px solid var(--line); }.bank-item:last-child { border-bottom:0; }.bank-item > div { display:flex; align-items:center; gap:13px; }.bank-item small { display:block; color:var(--muted); }.bank-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:white; background:var(--ink); font:500 20px Georgia,serif; }
.inbox-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }.inbox-summary a { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; color:var(--muted); background:white; border:1px solid var(--line); border-radius:11px; text-decoration:none; }.inbox-summary a.active { color:var(--ink); border-color:#9ecbb7; box-shadow:0 0 0 2px rgba(31,115,84,.08); }.inbox-summary strong { color:var(--ink); font-size:19px; }.inbox-filter { padding:14px 18px; }.filter-row { display:grid; grid-template-columns:2fr 1fr auto; align-items:end; gap:12px; }.transaction-row { display:grid; grid-template-columns:55px minmax(220px,1fr) 120px minmax(250px,1fr); gap:18px; align-items:center; min-height:92px; padding:16px 22px; border-bottom:1px solid var(--line); }.transaction-row:last-child { border-bottom:0; }.transaction-date { text-align:center; }.transaction-date strong, .transaction-date span, .transaction-main span, .suggestion span, .suggestion small { display:block; }.transaction-date strong { font-size:19px; }.transaction-date span, .transaction-main span { color:var(--muted); font-size:11px; }.transaction-main > strong { display:block; margin-bottom:3px; }.transaction-amount { text-align:right; }.transaction-review { display:flex; justify-content:flex-end; align-items:center; gap:10px; }.transaction-review details { position:relative; }.transaction-review summary { list-style:none; cursor:pointer; }.transaction-review summary::-webkit-details-marker { display:none; }.suggestion { min-width:150px; }.suggestion span { color:var(--green); font-size:10px; font-weight:800; text-transform:uppercase; }.suggestion strong { display:block; font-size:13px; }.suggestion small { max-width:230px; color:var(--muted); }.pending-label { display:inline-block !important; width:fit-content; margin-top:4px; padding:2px 6px; color:#7b5318 !important; background:#f7ecd6; border-radius:99px; }.quick-expense,.quick-rent { position:absolute; z-index:5; right:0; top:38px; width:360px; padding:16px; display:grid; gap:12px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 45px rgba(23,33,29,.18); }.quick-rent select { width:100%; }
.mini-metrics { display:flex; gap:10px; }.mini-metrics > div { min-width:130px; padding:12px 15px; background:white; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); }.mini-metrics span, .table-note { display:block; color:var(--muted); font-size:11px; }.mini-metrics strong { display:block; margin-top:3px; font-size:18px; }.overdue-text { color:var(--red) !important; }.segmented { display:flex; padding:3px; background:#eef1ef; border-radius:9px; }.segmented a { padding:6px 11px; color:var(--muted); border-radius:7px; font-size:12px; text-decoration:none; }.segmented a.active { color:var(--ink); background:white; box-shadow:0 1px 4px rgba(0,0,0,.08); }.status { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:750; text-transform:capitalize; }.status.open { color:#7b5318; background:#f7ecd6; }.status.paid { color:#176044; background:var(--green-soft); }.bill-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }.pay-form { display:flex; gap:5px; }.pay-form input { width:132px; padding:6px 7px; font-size:12px; }.pay-form button { padding:6px 10px; font-size:12px; }
.report-filter { padding:20px 24px; }.statement { max-width:880px; margin-left:auto; margin-right:auto; padding:42px 52px; }.statement-header { display:flex; justify-content:space-between; gap:30px; padding-bottom:28px; border-bottom:2px solid var(--ink); }.statement-header > div:first-child { display:flex; align-items:center; gap:9px; }.statement-header h2 { margin:0 0 4px; font:500 25px/1.2 Georgia,serif; }.statement-header p, .statement-header small { margin:0; color:var(--muted); }.statement-section { padding:28px 0 8px; }.statement-section h3 { padding-bottom:9px; border-bottom:1px solid var(--line); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }.statement-line { display:flex; justify-content:space-between; gap:20px; padding:8px 4px; }.statement-line.total { margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }.statement-net { display:flex; justify-content:space-between; margin-top:28px; padding:19px 4px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font-size:21px; }.statement footer { margin-top:28px; color:var(--muted); font-size:11px; text-align:center; }
.summary-badges { display:flex !important; flex-direction:row; gap:7px; align-items:center; }.record-card summary small { color:var(--green); font-size:11px; }.unit-fields { display:grid; gap:12px; }.inline-fields .unit-fields { grid-template-columns:110px minmax(220px,1fr); }.text-link { color:var(--green); font-size:12px; font-weight:700; text-decoration:none; }.text-link:hover { text-decoration:underline; }.record-body > .text-link { display:inline-block; margin-top:13px; }.document-cell { min-width:210px; max-width:300px; white-space:normal; }.document-link { display:flex; align-items:center; justify-content:space-between; gap:6px; }.document-link a { max-width:210px; overflow:hidden; text-overflow:ellipsis; color:var(--green); font-size:12px; }.document-link form { display:inline; }.document-link .icon-button { padding:0 5px; font-size:16px; }.mini-upload { display:grid; gap:7px; min-width:220px; margin-top:8px; padding:10px; background:#f4f6f3; border-radius:8px; }.mini-upload input { padding:6px; font-size:11px; }.mini-upload button { padding:6px 9px; font-size:11px; }.compact-metrics { grid-template-columns:repeat(4,1fr); }.compact-metrics .metric { min-height:105px; }.payment-filter { grid-template-columns:repeat(5,minmax(130px,1fr)) auto auto; }.rent-roll-filter { grid-template-columns:repeat(4,minmax(150px,1fr)) auto; }
.lease-occupants { min-width:210px; }.lease-occupants > div + div { margin-top:8px; }.lease-occupants details { margin-top:10px; }
.payment-type-form { margin-top:4px; }.payment-type-form button { padding:0; font-size:11px; }.payment-totals { display:flex; gap:18px; color:var(--muted); font-size:12px; }.payment-totals strong { margin-left:4px; color:var(--ink); }
.property-report-actions { justify-content:flex-end; margin-bottom:14px; }
.embedded-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }.embedded-section h3 { margin-bottom:2px; }.embedded-section p { margin-bottom:14px; }.property-tenant-form { display:grid; grid-template-columns:1.2fr 1fr 1.2fr 1fr auto; gap:12px; align-items:end; }
.property-lease-form { display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)); gap:12px; align-items:end; }.property-lease-form .lease-notes { grid-column:span 2; }.compact-notice { margin:0; }
.scan-field { display:grid; gap:6px; color:#4f5b55; font-size:12px; font-weight:700; }.scan-field small { color:var(--muted); font-weight:400; }.scanner-dialog { width:min(720px,calc(100% - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:18px; color:var(--ink); background:white; box-shadow:0 28px 90px rgba(10,20,15,.38); overflow:auto; }.scanner-dialog::backdrop { background:rgba(10,18,14,.72); backdrop-filter:blur(4px); }.scanner-shell { padding:20px; }.scanner-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.scanner-header h2 { margin-bottom:14px; }.scanner-camera { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/3; overflow:hidden; background:#0a0e0c; border-radius:14px; }.scanner-camera video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.scanner-frame { position:relative; z-index:1; height:88%; aspect-ratio:8.5/11; border:2px solid rgba(255,255,255,.9); border-radius:4px; box-shadow:0 0 0 999px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.18); }.scanner-frame::before,.scanner-frame::after { content:""; position:absolute; width:24px; height:24px; border-color:#82e2b7; }.scanner-frame::before { left:-3px; top:-3px; border-left:4px solid #82e2b7; border-top:4px solid #82e2b7; }.scanner-frame::after { right:-3px; bottom:-3px; border-right:4px solid #82e2b7; border-bottom:4px solid #82e2b7; }.scanner-frame span { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:max-content; max-width:90%; padding:4px 8px; color:white; background:rgba(0,0,0,.58); border-radius:6px; font-size:11px; text-align:center; }.scanner-message { margin:12px 0; color:var(--muted); font-size:12px; }.scanner-thumbnails { display:flex; gap:10px; overflow-x:auto; }.scanner-page { position:relative; flex:0 0 92px; padding:6px; background:#eef1ef; border-radius:9px; }.scanner-page img { display:block; width:80px; height:104px; object-fit:cover; border-radius:5px; }.scanner-page span { display:block; margin-top:4px; font-size:10px; text-align:center; }.scanner-page button { position:absolute; top:1px; right:1px; width:24px; height:24px; padding:0; color:white; background:rgba(0,0,0,.68); }.scanner-controls { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }.scanner-controls button:disabled { opacity:.45; cursor:not-allowed; }.mini-upload-actions { display:flex; gap:6px; }.mini-upload-actions button { flex:1; }
.auth-body { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(145deg,#eef3ef,#f8faf8); }.auth-shell { width:min(430px,100%); }.auth-brand { width:fit-content; margin:0 auto 22px; }.auth-panel { padding:32px; }.auth-panel h1 { font-size:38px; }.auth-panel .stack { margin-top:24px; }.auth-link { display:block; margin-top:20px; color:var(--green); text-align:center; font-weight:700; }.account-panel { max-width:620px; }.account-panel form { padding:26px; }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(3, 1fr); }.form-grid, .form-grid.compact { grid-template-columns: repeat(2,1fr); }.transaction-row { grid-template-columns:45px 1fr 100px; }.transaction-review { grid-column:2 / 4; justify-content:flex-start; }.payment-filter,.rent-roll-filter,.property-tenant-form,.property-lease-form { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .topbar { height:64px; padding:0 14px; align-items:center; }.nav-toggle { display:grid; } nav { display:none; position:absolute; top:calc(100% + 8px); left:14px; right:14px; max-height:calc(100vh - 88px); padding:10px; flex-direction:column; gap:2px; overflow-y:auto; white-space:normal; background:white; border:1px solid var(--line); border-radius:13px; box-shadow:0 18px 50px rgba(23,33,29,.2); } nav.open { display:flex; } nav a { width:100%; padding:11px 12px; font-size:14px; } .nav-form { width:100%; border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }.nav-form button { width:100%; padding:11px 12px; text-align:left; }.shell { width: min(100% - 28px, 1240px); padding-top: 34px; }.page-heading { align-items: flex-start; flex-direction: column; }.metrics { grid-template-columns: repeat(2,1fr); }.metric:last-child { grid-column: span 2; }.split-layout { grid-template-columns: 1fr; }.inline-fields, .inline-fields.three { grid-template-columns: 1fr; }.panel-heading { align-items:flex-start; gap: 12px; }.actions { flex-wrap:wrap; }.statement { padding:28px 22px; }.statement-header { flex-direction:column; }.statement-header .right { text-align:left; }.mini-metrics { width:100%; }.mini-metrics > div { flex:1; min-width:0; } }
@media (max-width: 480px) { nav a { padding: 7px; font-size: 12px; }.metrics, .form-grid, .form-grid.compact, .inbox-summary,.property-tenant-form,.property-lease-form { grid-template-columns: 1fr; }.metric:last-child, .span-two,.property-lease-form .lease-notes { grid-column: auto; }.month-picker { width:100%; justify-content:space-between; }.filter-row { grid-template-columns:1fr; }.transaction-row { grid-template-columns:42px 1fr; }.transaction-amount { grid-column:2; text-align:left; }.transaction-review { grid-column:1 / 3; }.bank-item { align-items:flex-start; }.banking-metrics { grid-template-columns:1fr; }.scanner-shell { padding:12px; }.scanner-camera { aspect-ratio:3/4; }.scanner-frame { width:82%; height:auto; }.scanner-controls { display:grid; grid-template-columns:1fr 1fr; }.scanner-controls [data-scan-use] { grid-column:1 / 3; } }