.upload-choice { min-height:68px; justify-content:flex-start; gap:13px; padding:12px 15px; text-align:left; }
.upload-choice > span:last-child { display:flex; flex-direction:column; gap:3px; }
.upload-choice strong { font-size:13px; }
.upload-choice small { color:var(--muted); font-size:10px; font-weight:400; }
.upload-choice-icon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:6px; background:#263429; color:var(--lime); font-size:20px; }
.upload-choice:focus-within { outline:2px solid var(--lime); outline-offset:2px; }
.upload-choice { color:inherit; text-decoration:none; }
:root { --bg:#0D0D12; --surface:#0D0D12; --surface-2:#1A1B22; --line:#6E7178; --muted:#6E7178; --text:#C8CACE; --lime:#2563EB; --lime-deep:#1A1B22; --red:#6E7178; --orange:#2563EB; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Manrope, sans-serif; font-size:13px; } button,a { font:inherit; color:inherit; } button { cursor:pointer; } a { text-decoration:none; }
.app-shell { display:flex; min-height:100vh; } .sidebar { width:248px; flex:none; background:#111414; border-right:1px solid var(--line); padding:26px 14px 16px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; } .brand { height:36px; display:flex; align-items:center; gap:9px; padding:0 10px; font-size:19px; font-weight:800; letter-spacing:-.7px; } .brand-mark { width:24px; height:24px; display:grid; place-items:center; background:var(--lime); color:#10130c; border-radius:7px; font-size:14px; font-weight:800; }.workspace-switcher { margin:30px 4px 25px; padding:10px; display:flex; gap:9px; align-items:center; background:#1a1f1e; border:1px solid #272f2d; border-radius:6px; font-size:12px; font-weight:600; }.workspace-dot { width:8px; height:8px; background:#edaa5e; border-radius:50%; }.chevron { color:var(--muted); margin-left:auto; font-size:15px; }.nav-label { color:#66706d; text-transform:uppercase; letter-spacing:1.2px; font-size:10px; font-weight:800; margin:0 10px 8px; }.nav-label-lower { margin-top:26px; }.nav-item { height:39px; display:flex; align-items:center; gap:11px; border-radius:6px; padding:0 10px; color:#aeb8b5; font-weight:600; margin:2px 0; }.nav-item:hover,.nav-item.active { background:#202725; color:#f8fbf5; }.nav-item.active { box-shadow:inset 2px 0 var(--lime); }.nav-icon { color:#99a4a0; width:15px; text-align:center; font-size:17px; }.nav-item.active .nav-icon { color:var(--lime); }.nav-count { margin-left:auto; min-width:21px; padding:2px 5px; border-radius:10px; background:#2f3934; color:var(--lime); text-align:center; font:10px 'DM Mono', monospace; }.sidebar-bottom { margin-top:auto; }.invite-button { border:1px dashed #3a4640; color:#c4ceca; background:transparent; border-radius:6px; width:100%; height:38px; text-align:left; padding:0 10px; font-weight:600; }.user-card { margin:19px 5px 0; display:flex; align-items:center; gap:9px; }.avatar,.client-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#7a9976; color:#eef7e8; font-size:10px; font-weight:800; }.user-card strong,.user-card small { display:block; }.user-card strong { font-size:11px; }.user-card small { margin-top:2px; color:var(--muted); font-size:10px; }.more { margin-left:auto; border:0; background:none; color:var(--muted); letter-spacing:1px; }
main { width:calc(100% - 248px); margin-left:248px; }.topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 42px; }.page-title span,.page-title small { display:block; }.page-title span { font-size:14px; font-weight:700; }.page-title small { color:var(--muted); margin-top:3px; font-size:11px; }.topbar-actions { display:flex; align-items:center; gap:13px; }.icon-button { width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; background:#171c1b; color:#a6b0ac; position:relative; }.notification-dot { width:5px; height:5px; border-radius:50%; background:var(--lime); position:absolute; right:8px; top:8px; }.primary-button { height:36px; padding:0 13px; border:0; border-radius:6px; background:var(--lime); color:#17200e; font-size:12px; font-weight:800; }.mobile-menu { display:none; }
.content { max-width:1420px; margin:auto; padding:39px 42px 64px; }.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:29px; }.eyebrow { margin:0 0 9px; color:#7e8985; font:10px 'DM Mono', monospace; text-transform:uppercase; letter-spacing:.8px; }.welcome-row h1 { font-size:25px; letter-spacing:-.7px; margin:0; }.subtitle { margin:7px 0 0; color:var(--muted); }.date-picker,.quiet-button { background:#181d1c; border:1px solid var(--line); color:#c8d0cd; height:34px; border-radius:5px; padding:0 10px; font-size:11px; font-weight:600; }.date-picker span,.quiet-button span { color:#89938f; margin-left:10px; }.metrics-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }.metric-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:7px; }.metric-card { min-height:143px; padding:17px; }.metric-heading { display:flex; align-items:center; justify-content:space-between; color:#9ca7a3; font-size:11px; font-weight:700; }.metric-icon { display:grid; place-items:center; width:25px; height:25px; background:#202725; border-radius:5px; color:var(--lime); font-size:13px; }.metric-card strong { display:block; font-size:23px; letter-spacing:-.8px; margin:15px 0 7px; }.metric-card p { margin:0; font:10px 'DM Mono', monospace; }.positive { color:var(--lime); }.neutral { color:#9ca7a3; }.insight-strip { margin:17px 0; min-height:68px; display:flex; align-items:center; gap:13px; padding:13px 16px; background:#1b2418; border:1px solid #35442a; border-radius:7px; }.insight-icon { display:grid; place-items:center; width:31px; height:31px; background:#334324; border-radius:5px; color:var(--lime); }.insight-strip strong { font-size:12px; }.insight-strip p { margin:3px 0 0; color:#a6b19e; font-size:11px; }.insight-strip a { margin-left:auto; color:var(--lime); font-size:11px; font-weight:800; white-space:nowrap; }.insight-strip a span { margin-left:4px; }.dashboard-grid { display:grid; grid-template-columns:1.47fr 1fr; gap:17px; }.panel { min-width:0; }.panel-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border-bottom:1px solid var(--line); }.panel-header h2 { font-size:13px; letter-spacing:-.2px; margin:0; }.panel-header p { font-size:10px; color:var(--muted); margin:4px 0 0; }.panel-header a { color:var(--lime); font-size:10px; font-weight:800; }.chart-summary { display:flex; gap:30px; padding:17px 17px 4px; }.chart-summary span { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }.chart-summary strong { font:500 13px 'DM Mono', monospace; }.chart-summary .net { margin-left:auto; text-align:right; }.chart-summary .net strong { color:var(--lime); }.chart { height:186px; margin:0 17px; position:relative; }.chart-grid { position:absolute; inset:10px 0 25px; background:repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #29302e 36px); }.chart svg { height:145px; width:100%; position:absolute; inset:4px 0 auto; }.chart-labels { color:#69736f; font:9px 'DM Mono',monospace; display:flex; justify-content:space-between; position:absolute; bottom:8px; left:0; right:0; }.task-list { padding:3px 17px 9px; }.task { min-height:63px; display:grid; grid-template-columns:31px minmax(100px,1fr) auto auto; align-items:center; column-gap:9px; border-bottom:1px solid #242b29; }.task:last-child { border:0; }.vendor-mark { width:27px; height:27px; display:grid; place-items:center; color:#d9e0dc; font-size:10px; font-weight:800; border-radius:6px; background:#2c3533; }.vendor-mark.amazon { background:#46331c; color:#ffc66d; }.vendor-mark.travel { background:#26374b; color:#98c9f5; }.task strong,.invoice-row strong,.activity-row strong { display:block; font-size:11px; }.task small,.invoice-row small,.activity-row small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }.amount { font:500 10px 'DM Mono',monospace; color:#e1e5e2; }.categorize { margin-left:8px; border:1px solid #3a4640; color:#c8d3cd; background:transparent; border-radius:4px; padding:5px 7px; font-size:9px; font-weight:700; }.categorize.done { color:var(--lime); border-color:#4b6535; }.lower-grid { margin-top:17px; grid-template-columns:1.08fr .92fr; }.invoice-list,.activity-list { padding:0 17px; }.invoice-row,.activity-row { min-height:57px; display:grid; align-items:center; column-gap:10px; border-bottom:1px solid #242b29; }.invoice-row:last-child,.activity-row:last-child { border:0; }.invoice-row { grid-template-columns:27px 1fr auto auto; }.client-avatar { width:25px; height:25px; font-size:9px; background:#3f665b; }.invoice-amount { font:500 10px 'DM Mono',monospace; }.status { min-width:59px; padding:4px 5px; border-radius:3px; text-align:center; font-size:8px; font-weight:800; }.due-soon { background:#493b24; color:#f3c774; }.sent { background:#24383a; color:#93d6d0; }.overdue { background:#492a28; color:#fa9d90; }.activity-row { grid-template-columns:27px 1fr auto; }.vendor-mark.income { background:#274230; color:var(--lime); }.amount.income { color:var(--lime); }.toast { opacity:0; transform:translateY(12px); position:fixed; z-index:2; bottom:25px; right:25px; background:#e6eee0; color:#1b2118; border-radius:5px; padding:11px 14px; font-size:11px; font-weight:700; transition:.2s ease; pointer-events:none; }.toast.show { opacity:1; transform:translateY(0); }
@media (max-width:1050px) { .dashboard-grid,.lower-grid { grid-template-columns:1fr; }.content { padding:30px 25px; }.topbar { padding:0 25px; } }
@media (max-width:720px) { .sidebar { display:none; }.sidebar.mobile-open { display:flex; z-index:60; box-shadow:2px 0 24px rgba(0,0,0,.45); }.sidebar-backdrop { display:none; }.sidebar-backdrop.show { display:block; position:fixed; inset:0; background:rgba(6,10,9,.6); z-index:55; } main { width:100%; margin:0; }.topbar { height:65px; padding:0 16px; }.mobile-menu { display:block; border:0; background:none; color:var(--muted); font-size:18px; }.topbar-actions .icon-button { display:none; }.page-title { margin-right:auto; margin-left:13px; }.topbar-actions .primary-button { font-size:0; width:36px; padding:0; }.topbar-actions .primary-button::first-letter { font-size:15px; }.content { padding:25px 16px 42px; }.welcome-row { align-items:flex-start; gap:15px; }.welcome-row h1 { font-size:21px; }.subtitle { font-size:11px; }.date-picker { font-size:0; width:34px; padding:0; }.date-picker span { font-size:14px; margin:0; }.metrics-grid { gap:9px; }.metric-card { min-height:125px; padding:13px; }.metric-card strong { font-size:19px; }.insight-strip { align-items:flex-start; }.insight-strip a { display:none; }.chart-summary { gap:14px; }.task { grid-template-columns:27px minmax(90px,1fr) auto; }.task .categorize { display:none; }.invoice-row { grid-template-columns:25px 1fr auto; }.status { display:none; }.data-head { display:none !important; }.data-row { display:grid !important; grid-template-columns:1fr auto; align-items:center; gap:6px 10px; padding:14px 16px; min-height:auto; grid-template-areas:"vendor vendor" "category amount" "status date"; }.sub-ledger-row.data-row { grid-template-areas:"vendor vendor" "amount status" "date date"; }.data-row > span:first-child { grid-area:date; justify-self:end; color:var(--muted); font:10px 'DM Mono', monospace; }.data-row > strong:first-of-type { grid-area:vendor; }.data-row .category-chip { grid-area:category; justify-self:start; }.data-row > strong:nth-of-type(2) { grid-area:amount; justify-self:end; margin-left:0; }.data-row > span:last-child { grid-area:status; justify-self:start; }.sub-ledger-row.data-row > span:last-child { justify-self:end; }.mini-list > div { display:grid !important; grid-template-columns:auto 1fr; grid-template-areas:"icon info" "status status" "actions actions"; align-items:center; gap:8px 10px; min-height:auto; padding:14px 16px; }.mini-list > div > .vendor-mark { grid-area:icon; }.mini-list > div > p { grid-area:info; }.mini-list > div > span:not(.vendor-mark) { grid-area:status; justify-self:start; }.mini-list .doc-actions { grid-area:actions; justify-self:stretch; display:flex; justify-content:flex-end; margin-left:0; }.view-toolbar { flex-wrap:wrap; gap:10px; } }
.tab-view { max-width:1040px; }.view-heading { margin-bottom:28px; }.view-heading h1 { margin:0; font-size:25px; letter-spacing:-.7px; }.view-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.view-toolbar strong { font-size:12px; color:#bdc7c2; }.data-head,.data-row { display:grid; grid-template-columns:.65fr 1.8fr 1.2fr 1fr .85fr; gap:18px; align-items:center; padding:0 18px; min-height:58px; }.data-head { min-height:42px; border-bottom:1px solid var(--line); color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.data-row { border-bottom:1px solid #242b29; font-size:11px; }.data-row:last-child { border:0; }.data-row strong { font-size:11px; }.category-chip { width:max-content; padding:4px 6px; background:#263029; color:#bcc8bd; border-radius:3px; font-size:9px; }.approved { display:inline-flex; align-items:center; padding:3px 8px; border-radius:10px; background:rgba(198,243,107,.16); color:var(--lime); font-size:10px; font-weight:700; }.invoice-head { grid-template-columns:1.55fr 1fr 1fr 1fr .75fr; }.upload-zone { padding:45px 20px; text-align:center; border:1px dashed #3d4a45; border-radius:7px; background:#141918; margin-bottom:17px; }.upload-zone > span { display:grid; place-items:center; width:30px; height:30px; margin:auto auto 12px; background:#263429; border-radius:5px; color:var(--lime); font-size:18px; }.upload-zone strong,.upload-zone p { display:block; }.upload-zone p { color:var(--muted); font-size:11px; margin:6px 0 15px; }.upload-zone { transition:border-color .15s ease, background .15s ease; }.upload-zone.drag-over { border-color:var(--lime); background:#182016; }.upload-zone form,.upload-zone { max-width:380px; margin-left:auto; margin-right:auto; }.file-field { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:10px; }.file-field input[type="file"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.file-picker-button { display:flex; align-items:center; justify-content:center; width:100%; border:1px solid var(--line); border-radius:5px; background:#181d1c; color:#c8d0cd; padding:9px 10px; font:600 11px Manrope, sans-serif; cursor:pointer; }.file-picker-button:hover,.file-picker-button:active { background:#202725; }.file-name { color:var(--muted); font-size:10px; }.document-note { display:block; width:100%; height:36px; border:1px solid var(--line); border-radius:5px; background:#181d1c; color:var(--text); padding:0 10px; font:11px Manrope, sans-serif; margin:0 0 12px; }.document-note::placeholder { color:#75807b; }.upload-zone .primary-button { width:100%; height:38px; font-size:12px; }.upload-limit-message { margin:10px 0 0; color:var(--muted); font-size:11px; }.upload-sign-up { appearance:none; border:0; padding:0; background:transparent; color:var(--lime); font:inherit; font-weight:800; cursor:pointer; text-decoration:underline; }.review-status { display:inline-flex; align-items:center; padding:3px 8px; border-radius:10px; background:rgba(230,170,101,.18); color:var(--orange); font-size:10px; font-weight:700; }.receipt-file { background:#263429; color:var(--lime); }.empty-documents { justify-content:center; text-align:center; }.uploads-section { margin-top:22px; }.uploads-section .panel-header { padding:0 0 12px; }.doc-actions { display:flex; gap:8px; margin-left:auto; }.quiet-button.danger { border-color:#4a2c28; color:var(--red); }.quiet-button.danger:hover { background:#2a1815; }.section-heading { font-size:15px; margin:26px 0 12px; }.sub-ledger { margin-bottom:10px; overflow:hidden; }.sub-ledger summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; font-weight:700; font-size:12px; }.sub-ledger summary::-webkit-details-marker { display:none; }.sub-ledger summary span:last-child { color:var(--muted); font:11px 'DM Mono', monospace; font-weight:600; }.sub-ledger[open] summary { border-bottom:1px solid var(--line); }.sub-ledger-row { grid-template-columns:.85fr 1.8fr 1fr .85fr; }.mini-list > div { display:flex; align-items:center; gap:10px; min-height:70px; padding:0 18px; border-bottom:1px solid #242b29; }.mini-list > div:last-child { border:0; }.mini-list p { margin:0; flex:1; }.mini-list p strong,.mini-list p small { display:block; }.mini-list p strong { font-size:11px; }.mini-list p small { margin-top:4px; color:var(--muted); font-size:10px; }.mini-list p small.meta-date { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.report-card { min-height:190px; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:19px; display:flex; flex-direction:column; align-items:flex-start; }.report-card > span { color:var(--muted); font-size:11px; }.report-card strong { font:500 25px 'DM Mono',monospace; letter-spacing:-1px; margin:20px 0 5px; }.report-card small { color:var(--muted); font-size:10px; }.report-card .quiet-button { margin-top:auto; }.bank-logo { width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:#3d5f61; color:#e6f5f2; font-weight:800; }.bank-logo.teal { background:#285b53; }

.date-range { display:flex; align-items:center; gap:6px; }
.date-range label { display:flex; align-items:center; gap:5px; color:var(--muted); font:10px "DM Mono", monospace; }
.date-range input { width:122px; height:34px; border:1px solid var(--line); border-radius:5px; background:#181d1c; color:var(--text); padding:0 7px; font:11px Manrope, sans-serif; color-scheme:dark; }
.clear-date-range { flex:none; }
.range-caption { display:block; color:var(--muted); margin-top:8px; font:10px "DM Mono", monospace; }
@media (max-width:1050px) { .date-range { order:3; width:100%; justify-content:flex-end; } .topbar { height:auto; min-height:78px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px; } }
@media (max-width:720px) { .date-range label { font-size:0; } .date-range input { width:128px; } .topbar-actions { flex-wrap:wrap; justify-content:flex-end; } .topbar-actions > .quiet-button,.topbar-actions > .palette-picker,.topbar-actions > .theme-toggle,.topbar-actions > .clerk-auth { display:none; } }