:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#101214;color:#f4f5f6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#252a31,#101214 55%);min-height:100vh}main{max-width:760px;margin:auto;padding:28px 20px 56px}.eyebrow{color:#9ba3ad;text-transform:uppercase;letter-spacing:.14em;font-size:12px}header{display:flex;justify-content:space-between;align-items:center}button{border:0;border-radius:14px;background:#2b3037;color:#fff;padding:12px 16px;font:inherit;cursor:pointer}h1{font-size:clamp(34px,8vw,62px);margin:12px 0 22px}.month{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.month h1{font-size:28px;margin:0;text-transform:capitalize}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.summary div,.list{background:#1b1e23;border:1px solid #30353c;border-radius:20px;padding:18px}.summary span{display:block;color:#9ba3ad;font-size:13px}.summary strong{display:block;font-size:24px;margin-top:8px}.summary div:nth-child(3) strong{color:#65d68b}section{margin-top:26px}h2{font-size:20px}.list{padding:0;overflow:hidden}.row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid #30353c}.row:last-child{border:0}.muted{color:#9ba3ad;font-size:13px}.amount{white-space:nowrap}.paid-payment{background:#173526;color:#9be7b5}.paid-payment .muted{color:#72bb8c}.pin{text-align:center;max-width:380px;padding-top:16vh}.dots{font-size:24px;letter-spacing:8px;margin:24px}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.keys button{font-size:24px;padding:18px}.error{height:20px;color:#ff7777}dialog{background:#1b1e23;color:#fff;border:1px solid #3b414a;border-radius:20px;padding:24px;width:min(420px,calc(100% - 32px))}dialog::backdrop{background:#000b}form{display:grid;gap:14px}label{display:grid;gap:6px;color:#b8bec7}input,select{background:#101214;color:#fff;border:1px solid #454c56;border-radius:10px;padding:12px;font:inherit}form button[type=submit]{background:#65d68b;color:#07100a}#close{justify-self:end;padding:4px 10px}@media(max-width:600px){.summary{grid-template-columns:1fr}.summary div{display:flex;justify-content:space-between;align-items:center}.summary strong{margin:0}.row{padding:14px 12px}}
