<style>
/* --- CARDS --- */
.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- TOPBAR --- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2c3e50;
  color: white;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* --- SUMMARY --- */
.summary {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  background: #f4f6f8;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* --- DEFUALTER --- */
.defaulter-row {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.defaulter-row span:last-child {
  color: #c0392b;
  font-weight: bold;
}

/* --- STATUS COLORS --- */
.unpaid {
  background-color: #ffe6e6 !important;
}

.adjusted {
  background-color: #fff7cc;
}

/* --- BADGES --- */
.badge {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}

.paid { background: #e8f8f5; }
.unpaid-badge { background: #fdecea; color: #c0392b; }
.adjusted-badge { background: #fff7cc; }

/* --- STICKY BAR --- */
.sticky-summary {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 8px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  z-index: 100;
}
body { font-family: "Segoe UI", Arial; background:#f2f5f9; margin:0; }
.container { max-width:520px; margin:auto; padding:15px; }

.card {
  background:#fff;
  padding:15px;
  margin-bottom:15px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.bill-card {
  border-left:6px solid;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
}

.paid { border-color:#16a34a; }
.unpaid { border-color:#dc2626; }
.adjust { border-color:#f59e0b; }

select, button {
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
}

.hidden { display:none; }
.small { font-size:12px; color:#555; }
.app-version {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 10px;
}

.pay-btn{
  display:inline-block;
  background:#2c3e50;
  color:white;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  margin-top:8px;
}

.qr-code{
  width:180px;
  max-width:100%;
  margin-top:10px;
  border-radius:10px;
  background:white;
  padding:8px;
}
</style>