/* رتِّل — المكوّنات: البطاقات، الحقول، التنبيهات، النوافذ، التبويبات */
.clay{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-inner),var(--shadow-soft);padding:1.5rem;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.clay-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--green-100)}
.tile{display:grid;gap:.6rem}
.tile-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--green-50);color:var(--green-700)}
.tile-ico.gold{background:var(--gold-50);color:var(--gold-700)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:var(--radius-pill);font-size:.74rem;font-weight:700;background:var(--green-100);color:var(--green-800)}
.badge.gold{background:var(--gold-50);color:var(--gold-700)}
.badge.grey{background:var(--muted);color:var(--text-muted)}
.badge.red{background:var(--danger-50);color:var(--danger)}
.badge.info{background:var(--info-50);color:var(--info)}

/* الحقول */
label.field{display:grid;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
input,select,textarea{
  width:100%;padding:.78rem 1rem;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:#fff;color:var(--text);font:inherit;font-size:.95rem;transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:var(--ring)}
input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-50)}
.field-error{color:var(--danger);font-size:.8rem;font-weight:600}
.hint{font-size:.78rem;color:var(--text-muted)}
.input-group{position:relative}
.input-group .toggle-eye{position:absolute;inset-inline-end:.5rem;top:50%;transform:translateY(-50%)}

/* التنبيهات */
.toast-wrap{position:fixed;bottom:1.25rem;inset-inline-start:1.25rem;z-index:120;display:grid;gap:.5rem;max-width:min(92vw,360px)}
.toast{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:var(--radius);font-size:.9rem;font-weight:600;background:var(--card);box-shadow:var(--shadow-lift);border:1px solid var(--border);animation:slideIn .32s var(--ease)}
.toast.success{border-color:#A9DCC4;color:var(--green-800);background:#F2FBF7}
.toast.error{border-color:#F0BDB7;color:var(--danger);background:var(--danger-50)}
.toast.info{border-color:#C3D2F7;color:var(--info);background:var(--info-50)}
.toast.out{animation:slideOut .28s var(--ease) forwards}

/* النوافذ */
.overlay{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:1rem;background:rgba(6,35,28,.45);backdrop-filter:blur(4px);animation:fadeIn .2s ease}
.modal{background:var(--card);border-radius:var(--radius-lg);padding:1.75rem;max-width:520px;width:100%;box-shadow:var(--shadow-lift);animation:popIn .26s var(--ease);max-height:88vh;overflow:auto}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}

/* التبويبات */
.tabs{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:var(--radius-pill);background:var(--muted);flex-wrap:wrap}
.tab{padding:.5rem 1.1rem;border-radius:var(--radius-pill);border:0;background:transparent;font:inherit;font-weight:600;font-size:.88rem;color:var(--text-muted);cursor:pointer;transition:all .2s var(--ease)}
.tab:hover{color:var(--green-800)}
.tab.active{background:var(--card);color:var(--green-800);box-shadow:0 2px 8px rgba(6,35,28,.1)}

/* الهياكل المؤقتة والحالات الفارغة */
.skeleton{background:linear-gradient(90deg,#EFEEE7 25%,#F7F6F1 50%,#EFEEE7 75%);background-size:200% 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--radius-sm)}
.sk-line{height:14px;margin-bottom:.6rem}
.empty{display:grid;gap:.7rem;place-items:center;text-align:center;padding:2.5rem 1rem;color:var(--text-muted);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:rgba(255,255,255,.5)}
.spinner{width:22px;height:22px;border:2.5px solid var(--green-100);border-top-color:var(--green-600);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideOut{to{opacity:0;transform:translateY(10px)}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .5s var(--ease) both}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}.d3{animation-delay:.21s}.d4{animation-delay:.28s}

/* إضافات: روابط البطاقات وحالة ما قبل الظهور */
a.lesson-card,a.clay{text-decoration:none;color:inherit}
.pre{opacity:0}
.fade-up.pre{animation:none}
button.icon-btn,button.btn,a.btn,a.lesson-card{a cursor:pointer}
i[data-lucide]{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em}
.ico{width:1.15em;height:1.15em}
.brand-mark .ico{width:22px;height:22px}
.view-stack{display:contents}