:root{--bg: #1b1a17;--surface: #211f1c;--surface-2: #272521;--ink: #f2f0ea;--ink-2: rgba(242, 240, 234, .62);--ink-3: rgba(242, 240, 234, .5);--ink-4: rgba(242, 240, 234, .36);--line: rgba(242, 240, 234, .12);--line-2: rgba(242, 240, 234, .07);--up: #34d399;--warn: #e0a72e;--down: #f87171;--accent: #7da6ff;--accent-bg: rgba(125, 166, 255, .13);--accent-bd: rgba(125, 166, 255, .34);--mono: "Fira Code", ui-monospace, monospace;--sans: "Fira Sans", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}#root{display:flex;flex-direction:column;min-height:100vh}.masthead{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;gap:10px}.wordmark{font-weight:700;font-size:15px;letter-spacing:.22em;text-transform:uppercase}.wordmark b{color:var(--accent)}.nav{display:flex;gap:6px}.nav-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:2px;cursor:pointer;transition:all .2s}.nav-btn:hover{color:var(--ink);border-color:var(--line)}.nav-btn.active{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent)}main{flex:1;padding:24px;max-width:960px;width:100%;margin:0 auto}.view[hidden]{display:none}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.card{background:var(--surface);border:1px solid var(--line-2);border-radius:2px;padding:16px;box-shadow:0 1px #f2f0ea0d inset}.label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.value{font-family:var(--mono);font-weight:600;font-size:26px;margin-top:4px;font-variant-numeric:tabular-nums}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}.toolbar h2{font-size:15px;letter-spacing:.1em;text-transform:uppercase}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);font-family:var(--sans);font-size:12.5px;padding:8px 14px;border-radius:2px;cursor:pointer;transition:all .2s}.btn:hover{border-color:var(--line)}.btn.primary{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent)}.form{background:var(--surface);border:1px solid var(--line-2);border-radius:2px;padding:16px;margin-bottom:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}input,select{width:100%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);font-family:var(--sans);font-size:14px;padding:8px 10px;border-radius:2px}input:focus,select:focus{outline:none;border-color:var(--accent)}.actions{display:flex;gap:8px;margin-top:4px}.item{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line-2);border-radius:2px;padding:12px 14px;margin-bottom:8px;gap:10px;flex-wrap:wrap}.item .name{font-weight:600}.item .meta{font-size:12px;color:var(--ink-3)}.item .amt{font-family:var(--mono);font-size:15px;font-weight:600}.tag{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:2px;letter-spacing:.05em}.tag.paid{color:var(--up);background:#34d3991a}.tag.sent{color:var(--warn);background:#e0a72e1a}.tag.draft{color:var(--ink-3);background:#f2f0ea0d}.tag.active{color:var(--up);background:#34d3991a}.tag.past{color:var(--ink-3);background:#f2f0ea0d}.small-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--line-2);color:var(--ink-3);font-size:11px;padding:4px 8px;border-radius:2px;cursor:pointer}.small-btn:hover{color:var(--down);border-color:var(--down)}footer{border-top:1px solid var(--line-2);padding:14px 24px;font-size:11px;color:var(--ink-3)}@media (max-width: 640px){.grid3,.grid2{grid-template-columns:1fr}.nav{width:100%;overflow-x:auto}}.canvas-container{width:100%;height:300px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);overflow:hidden}.form-enter{animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card:hover{border-color:var(--line)}