:root{
  --brand:#0a7b5f;
  --bg:#f7f8fa;
  --card:#fff;
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,"Segoe UI",Tahoma,Arial}
body{background:var(--bg);color:var(--text);text-align:right}

.topbar{background:var(--brand);color:#fff;text-align:center;padding:14px 16px}
.container{max-width:820px;margin:12px auto;padding:8px}

/* سطر نص + رقم بدون فراغات كبيرة */
.row{
  display:flex; align-items:center; justify-content:flex-start;
  gap:6px; padding:8px 10px; margin:6px 0;
  background:var(--card); border:1px solid var(--border); border-radius:10px; font-size:16px;
}
.label{color:var(--muted); font-weight:600}
.val{font-variant-numeric:tabular-nums}

/* بطاقة الالتزامات */
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:10px 0}
.total{background:#f1f3f4; border-radius:8px; margin-bottom:6px}

/* تفاصيل الالتزامات كسطور ملاصقة */
.list{list-style:none; padding:0; margin:0}
.list li{
  display:flex; align-items:center; justify-content:flex-start; gap:6px;
  padding:6px 0; border-bottom:1px dashed #eee; font-size:15px;
}
.list li:last-child{border-bottom:none}

.nav{display:flex; gap:8px; justify-content:center; margin:14px 0 22px}
.nav button{
  background:#111; color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-size:14px
}
.nav button:hover{opacity:.9}