:root{--green:#0f6a4a;--green-light:#e6f4ee;--gold:#c9a86a;--bg:#f7f8fa;--card:#fff;--border:#dde3de;--text:#1f2937}

/* === ترويسة جديدة - تقسيم متساوي 1fr auto 1fr - لا يمس البطاقات === */
.form-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px 24px;
  margin:18px auto;
  max-width:800px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  text-align:center;
}

.athkar-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  width:100%;
  gap:12px;
}

.header-side{
  display:flex;
  align-items:center;
}
.header-left{ justify-content:flex-start; }
.header-right{ justify-content:flex-end; }
.header-center{
  justify-content:center;
  text-align:center;
}

.title{
  font-family:Tajawal,system-ui;
  font-weight:900;
  font-size:28px;
  color:var(--green);
  margin:0;
  line-height:1.2;
  text-align:center;
}

.athkar-form{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:65%;
  margin:0;
}
.select-wrap{ width:100%; max-width:260px; }

/* جوال: يبقى عمودي كما كان بدون تغيير */
@media (max-width: 600px){
  .athkar-header{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap:14px;
  }
  .header-center{ order:1; }
  .header-left{ order:2; justify-content:center; }
  .header-right{ order:3; justify-content:center; }
  .select-wrap{ max-width:100%; }
}

#branch{
  font-family:Tajawal;
  appearance:none;
  background:#f8faf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f6a4a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center;
  border:1.5px solid #c8d8c8;
  border-radius:12px;
  padding:11px 16px 11px 42px;
  font-size:15px;
  font-weight:700;
  color:var(--green);
  cursor:pointer;
  width:100%;
  transition:all .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#branch:hover{border-color:var(--green);background-color:#f0f8f2;}
#branch:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(15,106,74,.15);}

#toggleBtn{
  width:46px;height:46px;border-radius:12px;
  border:1.5px solid #c8d8c8;background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:all .2s ease;
}
#toggleBtn:hover{background:var(--green-light);border-color:var(--green);transform:translateY(-1px);}



/* باقي التنسيقات بدون تغيير */
.items-container{max-width:800px;margin:0 auto;padding:0 12px;contain:content}
.items-container.vertical{display:flex;flex-direction:column;gap:14px}
.items-container.horizontal{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:16px}

.items-container.vertical .item,
.items-container.horizontal .item{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  position:relative;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  content-visibility:auto;
  contain-intrinsic-size:0 180px;
}
.items-container.vertical .item:hover,
.items-container.horizontal .item:hover{
  transform:translateY(-2px);
  border-color:#c5d6c5;
  box-shadow:0 8px 24px rgba(15,106,74,.10), 0 2px 8px rgba(15,106,74,.06);
  background:linear-gradient(180deg, #ffffff 0%, #f0f8f2 100%);
}
.items-container.vertical .item.done,
.items-container.horizontal .item.done{
  border-color:var(--green);
  background:linear-gradient(0deg, var(--green-light), #fff);
}

.items-title{font-size:16px;color:var(--gold);font-weight:800;margin:0 0 8px;letter-spacing:.5px}
.order-value-container{position:absolute;top:14px;left:14px}
.order-value{width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--border);font-size:12px;color:#6b7280;font-family:Tajawal}

.repeat-circle{
  position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;
  background:#f1f5f1;border:2px solid #dce8dc;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;transition:all .3s ease;
}
.repeat-circle p{margin:0;color:#eab308;font-family:Tajawal;font-weight:900;z-index:2}
.repeat-circle.completed{background:#0f6a4a !important;border-color:#0f6a4a;box-shadow:0 4px 14px rgba(15,106,74,.35)}
.repeat-circle.completed p{color:#fff !important;font-size:20px}

.item pre{
  font-family:Tajawal,Amiri,serif;font-size:20px;line-height:2.1;
  white-space:pre-wrap;word-wrap:break-word;color:var(--text);
  margin:40px auto 0;text-align:center;font-weight:500;max-width:90%;
}