@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap";:root{--bg:#1c1e26;--bg-card:#242730;--bg-card-hover:#2a2d38;--line:#363a47;--text:#edebe4;--text-dim:#9a9ca8;--text-faint:#6b6d78;--amber:#e8a33d;--amber-dim:#8a6a38;--green:#6fbf8b;--green-dim:#4a7a5c;--blue:#7c9cf0;--serif:"Fraunces", serif;--sans:"Inter", sans-serif;box-sizing:border-box}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0}.wrap{max-width:920px;margin:0 auto;padding:56px 28px 80px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;margin-bottom:48px;padding-bottom:24px;display:flex}h1{font-family:var(--serif);letter-spacing:-.01em;margin:0;font-size:34px;font-weight:500}.logout{font-family:var(--sans);color:var(--text-dim);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:3px;padding:8px 16px;font-size:13px;transition:border-color .15s,color .15s}.logout:hover{border-color:var(--text-dim);color:var(--text)}.hero{background:var(--line);border-radius:4px;grid-template-columns:1.4fr 1fr;gap:2px;margin-bottom:56px;display:grid;overflow:hidden}.hero-main{background:var(--bg-card);padding:36px 32px}.hero-side{background:var(--bg-card);flex-direction:column;display:flex}.hero-side>div{flex-direction:column;flex:1;justify-content:center;padding:20px 28px;display:flex}.hero-side>div+div{border-top:1px solid var(--line)}.label{color:var(--text-dim);margin:0 0 10px;font-size:13px}.big-number{font-family:var(--serif);color:var(--green);font-variant-numeric:tabular-nums;margin:0;font-size:56px;font-weight:500;line-height:1}.big-number sup{color:var(--text-dim);margin-left:4px;font-size:24px;font-weight:400}.mid-number{font-family:var(--serif);font-variant-numeric:tabular-nums;margin:0;font-size:28px;font-weight:500}.mid-number.amber{color:var(--amber)}.sub-note{color:var(--text-faint);margin-top:6px;font-size:12px}section{margin-bottom:48px}h2{font-family:var(--serif);color:var(--text);margin:0 0 20px;font-size:20px;font-weight:500}h2 .count{font-family:var(--sans);color:var(--text-faint);margin-left:10px;font-size:13px;font-weight:400}.accounts{background:var(--line);border:1px solid var(--line);border-radius:4px;grid-template-columns:repeat(2,1fr);gap:1px;display:grid;overflow:hidden}.account{background:var(--bg-card);padding:18px 22px;transition:background .15s}.account:hover{background:var(--bg-card-hover)}.account-name{color:var(--text-dim);margin-bottom:10px;font-size:13px}.account-input-row{align-items:baseline;gap:6px;display:flex}.account input{color:var(--text);font-family:var(--serif);font-variant-numeric:tabular-nums;background:0 0;border:none;border-bottom:1px solid #0000;width:100%;padding:2px 0;font-size:22px;font-weight:500}.account input:focus{border-bottom-color:var(--amber);outline:none}.account-currency{color:var(--text-faint);font-size:13px}.payments{background:var(--line);border:1px solid var(--line);border-radius:4px;flex-direction:column;gap:1px;display:flex;overflow:hidden}.payment{background:var(--bg-card);align-items:center;gap:14px;padding:14px 20px;font-size:15px;display:flex}.payment.done{background:#202229}.check{border:1.5px solid var(--text-faint);cursor:pointer;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:border-color .15s,background .15s;display:flex}.check.checked{background:var(--green-dim);border-color:var(--green)}.check.checked:after{content:"✓";color:var(--bg);font-size:12px}.payment-date{color:var(--text-faint);font-variant-numeric:tabular-nums;flex-shrink:0;width:70px}.payment-name{color:var(--text);flex:1}.payment.done .payment-name{color:var(--text-faint);text-decoration:line-through;-webkit-text-decoration-color:var(--text-faint);text-decoration-color:var(--text-faint)}.payment-amount{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:14px}.payment.done .payment-amount{color:var(--text-faint)}footer{text-align:center;color:var(--text-faint);margin-top:60px;font-size:12px}@media (width<=640px){.wrap{padding:32px 18px 60px}h1{font-size:26px}.hero{grid-template-columns:1fr}.big-number{font-size:42px}.accounts{grid-template-columns:1fr}}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f5f3ee;--bg-card:#fff;--bg-card-hover:#faf8f3;--line:#e4e0d5;--text:#22221e;--text-dim:#6b6a62;--text-faint:#a5a396}.payment.done{background:#f0ede4}}
