* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #f4f5f7;
    color: #1b1f24;
    font-size: 15px;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 10px 12px 80px; }
nav { display: flex; gap: 6px; background: #1b1f24; padding: 8px 10px; position: sticky; top: 0; z-index: 10; overflow-x: auto; }
nav a { color: #cfd3d8; text-decoration: none; font-size: 13px; padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
nav a.active, nav a:hover { background: #30363d; color: #fff; }
h1 { font-size: 18px; margin: 14px 0 8px; }
h2 { font-size: 15px; margin: 18px 0 6px; color: #444; }
.card { background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jar { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
.jar:last-child { border-bottom: none; }
.jar .amt { font-weight: 600; }
.bar { background: #e5e7eb; border-radius: 6px; height: 10px; overflow: hidden; margin-top: 4px; }
.bar > div { background: #2f8f5b; height: 100%; }
form { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 13px; color: #555; }
input, select, textarea, button {
    font-size: 15px; padding: 9px 10px; border: 1px solid #d0d4da; border-radius: 8px; width: 100%;
}
button { background: #1b1f24; color: #fff; border: none; cursor: pointer; }
button.secondary { background: #e5e7eb; color: #1b1f24; }
button.small { width: auto; padding: 5px 9px; font-size: 13px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th, table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #eee; }
.txn { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.txn .meta { flex: 1; min-width: 160px; }
.txn .name { font-weight: 600; }
.txn .sub { color: #777; font-size: 12px; }
.neg { color: #c0392b; }
.pos { color: #2f8f5b; }
.pill { display: inline-block; padding: 2px 7px; border-radius: 10px; background: #eef1f4; font-size: 11px; color: #555; }
.msg { background: #eaf6ee; border: 1px solid #bfe3cb; padding: 8px 10px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.msg.err { background: #fdecea; border-color: #f3c0bb; }