@font-face{font-family:"Lexend";src:url("/fonts/lexend.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#eef2f6;--card:#fff;--ink:#16202c;--mu:#5f6b7a;--ln:#e3e8ef;--acc:#0b6bcb;--acc-ink:#fff;--ok:#1a7f4b;--okb:#dcf3e6;--wn:#9a5b00;--wnb:#fdeccf;--er:#b42318;--erb:#fde4e1;--sh:0 1px 2px rgba(16,24,40,.05),0 10px 30px -18px rgba(16,24,40,.25)}
@media (prefers-color-scheme:dark){:root{--bg:#0f1318;--card:#171c23;--ink:#e7eaee;--mu:#97a2b0;--ln:#262d37;--acc:#4d9bf0;--acc-ink:#06121f;--okb:#143324;--ok:#5cc88a;--wnb:#392a0f;--wn:#e9b45e;--erb:#3b1b18;--er:#f58a80;--sh:0 1px 2px rgba(0,0,0,.4)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Lexend","Segoe UI",system-ui,sans-serif;font-weight:350;min-height:100vh}
button,input{font:inherit;color:inherit}
a{color:var(--acc)}
.boot{padding:20vh 0;text-align:center;color:var(--mu)}
.wrap{max-width:1040px;margin:0 auto;padding:24px 20px 60px}
/* sign in */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px}
.signin .card{width:min(420px,100%);padding:30px 28px}
.signin h1{font-size:22px;font-weight:500;margin:0 0 6px;letter-spacing:-.01em}
.signin p{color:var(--mu);margin:0 0 20px}
label{display:block;font-size:13px;color:var(--mu);margin:0 0 6px}
input{width:100%;border:1px solid var(--ln);background:var(--card);border-radius:12px;padding:11px 13px;outline:0;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
input.code{font-size:26px;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:10px 18px;background:var(--acc);color:var(--acc-ink);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:default}
.btn.g{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.btn.sm{padding:6px 13px;font-size:13px}
.full{width:100%;margin-top:16px}
.msg{margin-top:14px;font-size:14px;color:var(--mu)}
.msg.err{color:var(--er)}
.link{background:none;border:0;padding:0;color:var(--acc);cursor:pointer;font-size:14px}
.card{background:var(--card);border-radius:20px;box-shadow:var(--sh)}
/* top */
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.top img{height:40px;max-width:160px;object-fit:contain}
.top .who{margin-left:auto;text-align:right;font-size:13px;color:var(--mu);line-height:1.3}
.top .who b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.org{font-size:18px;font-weight:500}
.org small{display:block;color:var(--mu);font-size:13px;font-weight:350}
/* balance */
.bal{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:0;overflow:hidden;margin-bottom:22px}
.bal .owe{padding:24px 26px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,var(--card)),var(--card))}
.bal .owe small{color:var(--mu);font-size:13px}
.bal .owe b{display:block;font-size:34px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:4px 0 14px}
.age{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--ln)}
.age div{padding:24px 14px;border-right:1px solid var(--ln)}
.age div:last-child{border-right:0}
.age small{display:block;color:var(--mu);font-size:12px}
.age span{font-variant-numeric:tabular-nums;font-size:15px}
.age .late span{color:var(--er)}
/* tabs: one track, the selected one highlighted */
.tabs{display:flex;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.tabs button{border:0;background:transparent;border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap;color:var(--ink);transition:background-color .2s,color .2s}
.tabs button:hover{color:var(--acc)}
.tabs button.on{background:var(--card);color:var(--acc);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(16,24,40,.12)}
.tabs i{font-style:normal;font-size:12px;color:var(--mu);margin-left:6px}
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:400;color:var(--mu);text-align:left;padding:12px 16px;border-bottom:1px solid var(--ln)}
td{padding:12px 16px;border-bottom:1px solid var(--ln);vertical-align:middle}
tr:last-child td{border-bottom:0}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;font-size:12px;border-radius:999px;padding:2px 10px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pill.ok{background:var(--okb);color:var(--ok)}.pill.wn{background:var(--wnb);color:var(--wn)}.pill.er{background:var(--erb);color:var(--er)}
.empty{padding:34px 16px;text-align:center;color:var(--mu)}
.bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;width:110px;display:inline-block;vertical-align:middle;margin-right:8px}
.bar i{display:block;height:100%;background:var(--acc)}
.mu{color:var(--mu)}
.intro{margin:-6px 0 18px;color:var(--mu)}
.foot{margin-top:28px;text-align:center;color:var(--mu);font-size:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:760px){.bal{grid-template-columns:1fr}.age{grid-template-columns:repeat(5,minmax(80px,1fr));border-left:0;border-top:1px solid var(--ln);overflow-x:auto}.hide-s{display:none}th,td{padding:10px 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}