.notification-button{position:relative;width:40px;height:40px;border:1px solid var(--line);background:white;border-radius:11px;font-size:19px}
.notification-button b{position:absolute;right:-5px;top:-6px;width:19px;height:19px;border-radius:50%;background:#b43a32;color:white;display:grid;place-items:center;font-size:9px}
.bill-alert-banner{margin-bottom:18px}.bill-alert-banner>div{display:flex;align-items:center;gap:13px;border-radius:16px;padding:17px 20px;background:#fff3df;border:1px solid #ead2a5}.bill-alert-banner .all-clear{background:#eaf4ed;border-color:#c8dfce}.bill-alert-banner strong{font-size:13px}.bill-alert-banner p{margin:4px 0 0;font-size:11px;color:#766341}.alert-bell,.all-clear>span{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#9b6b18;color:white;display:grid;place-items:center;font-size:20px}.all-clear>span{background:var(--success)}
.bill-summary{grid-template-columns:repeat(3,1fr)}.bill-summary article{min-height:125px}.bill-summary .warning-card{border-color:#ead2a5}.bill-summary .danger-card{background:#3b2928;color:white;border-color:#3b2928}.bill-summary .danger-card small,.bill-summary .danger-card em{color:#dbc8c7}
.bill-form{display:grid;grid-template-columns:1.5fr 1fr .8fr 1fr 1fr auto;align-items:end;gap:11px;margin-bottom:17px}.bill-form label{margin:0}.bill-form button{height:42px;white-space:nowrap}
.due-tag{display:inline-flex;padding:6px 9px;border-radius:20px;font-size:10px;font-weight:750;background:var(--soft)}.due-tag.paid{background:#e7f1ea;color:var(--success)}.due-tag.soon,.due-tag.today{background:#fff0d5;color:#8b5b0e}.due-tag.overdue{background:#f4dfdd;color:#a4312a}.due-tag.future{color:var(--muted)}
.bill-actions{display:flex;gap:6px}.bill-actions button{border:1px solid var(--line);background:white;border-radius:8px;padding:6px 9px;font-size:10px;white-space:nowrap}.bill-actions .delete{width:29px;color:#9b302a;font-size:16px;padding:0}
#billRows td small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:1150px){.bill-form{grid-template-columns:repeat(2,1fr)}.bill-form button{grid-column:1/-1}}
@media(max-width:700px){.bill-form{grid-template-columns:1fr}.bill-form button{grid-column:auto}.bill-summary{grid-template-columns:1fr}.notification-button{margin-left:auto}header>div{margin-right:0}}