:root{
  --accent: #2f9b57; /* أخضر موحد */
  --accent-2: #2aa66a;
  --muted: #666;
  --card-border: #2f9b57;
  --bg: #ffffff;
  --shadow: 0 8px 28px rgba(0,0,0,0.08);
  --radius: 14px;
  --nav-size: 95px;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Tahoma", "Arial", sans-serif;
  background:#f6f7f8;
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction: rtl;
}

/* محتوى مركزي */
.page{
  max-width: 420px;
  margin: 18px auto;
  padding: 5px;
  background: transparent;
  padding-top: 0px;
}

/* أعلى الصفحة */
.top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  height: calc(var(--nav-size) + 10px);
}
.nav-btn {
  width: var(--nav-size);
  height: var(--nav-size);
  min-width: var(--nav-size);
  min-height: var(--nav-size);
  flex: 0 0 var(--nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.nav-btn img { width:84%; height:84%; object-fit:contain; display:block; mix-blend-mode:multiply; isolation:isolate; }
.nav-btn.no-blend img { mix-blend-mode:normal; }

/* الفاصل */
.divider-line {
  position: absolute;
  left: calc(var(--nav-size) + 12px);
  right: calc(var(--nav-size) + 12px);
  top: calc(var(--nav-size) + 2px);
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
  z-index: 0;
}

/* العنوان */
.title-wrap{
  text-align:center;
  margin: 28px 0 18px;
}
.page-title{
  margin:0;
  font-size:34px;
  line-height:1;
  color:var(--accent);
  font-weight:700;
  letter-spacing:0.6px;
}

/* البطاقات */
.cards-container{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom: 40px;
}
.card{
  background: #fff;
  border-radius: 14px;
  border: 2px solid var(--card-border);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align:right;
}
.card h2{ margin: 0 0 10px 0; color: var(--accent); font-size:20px; font-weight:700; }
.card .meta{ display:flex; flex-direction:column; gap:6px; color:#222; margin-bottom: 12px; }
.meta .label{ color:var(--muted); font-size:14px; }
.meta .value{ font-size:20px; font-weight:700; }

/* أزرار */
.card .card-footer{ display:flex; align-items:center; justify-content:flex-start; }
.btn{ padding:10px 18px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:16px; min-width:110px; }
.btn.primary{ background: var(--accent); color:#fff; box-shadow: 0 8px 20px rgba(47,155,87,0.18); }
.btn.ghost{ background: transparent; border:1px solid #e6e6e6; color:#333; }

/* تحميل */
.loading{ padding:18px; color:var(--muted); text-align:center; }

/* مودال */
.modal{ display:none; position:fixed; inset:0; align-items:center; justify-content:center; z-index:40000; }
.modal.show{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.45); }
.modal-dialog{
  position:relative;
  z-index:2;
  background:#fff;
  border-radius:12px;
  width:92%;
  max-width:420px;
  padding:18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  text-align:right;
}
.modal-dialog h3{ margin:0 0 8px; color:var(--accent); font-size:20px; }
.modal-dialog .modal-sub{ color:#333; margin:10px 0 12px; font-size:15px; }
.modal-dialog label{ display:block; margin-bottom:6px; color:#666; font-size:14px; }
.modal-dialog input[type="number"]{ width:100%; padding:10px 12px; font-size:16px; border-radius:8px; border:1px solid #e6e6e6; outline:none; box-sizing:border-box; }
.modal-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }

/* Toast */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:26px; padding:10px 16px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,0.12); background:#fff; color:#333; z-index:60000; }
.toast.hidden{ display:none; }

/* Responsive */
@media (max-width:380px){
  :root{ --nav-size: 64px; }
  .page-title{ font-size:28px; }
  .card{ padding:14px; }
  .btn{ min-width:96px; padding:8px 14px; font-size:15px; }
}