/* ============================================================
   نظام الألوان — غيّر السمة من config.js فقط (theme: "jade" ...)
   ============================================================ */
:root{
  --canvas:#F4F6F1;
  --surface:#FFFFFF;
  --ink:#20281F;
  --ink-muted:#6C766A;
  --line:#E3E7DE;
  --gold:#C1873A;
  --gold-contrast:#FFFFFF;
  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow:0 20px 45px -20px rgba(32,40,31,.28);
}
body[data-theme="jade"]{ --accent:#1F6F54; --accent-soft:#E3F0EA; --accent-contrast:#FFFFFF; }
body[data-theme="amber"]{ --accent:#B5772E; --accent-soft:#F5EADA; --accent-contrast:#FFFFFF; }
body[data-theme="rose"]{ --accent:#A23B4E; --accent-soft:#F6E3E7; --accent-contrast:#FFFFFF; }
body[data-theme="ocean"]{ --accent:#235A85; --accent-soft:#E1EBF2; --accent-contrast:#FFFFFF; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100dvh;
  background:var(--canvas);
  color:var(--ink);
  font-family:"Cairo", system-ui, sans-serif;
  display:flex;
  justify-content:center;
  padding:28px 16px 40px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.card{
  width:100%;
  max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:36px 26px 28px;
  animation:rise .5s ease both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Hero ---------- */
.hero{ text-align:center; margin-bottom:26px; }
.avatar{
  width:92px; height:92px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-contrast);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800;
  overflow:hidden;
  border:3px solid var(--accent-soft);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.name{
  margin:0 0 4px;
  font-size:clamp(24px,6.5vw,30px);
  font-weight:800;
  line-height:1.25;
}
.role{
  margin:0 0 10px;
  font-size:15px;
  font-weight:600;
  color:var(--accent);
}
.bio{
  margin:0 auto;
  max-width:32ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-muted);
}

/* ---------- Actions ---------- */
.actions{ margin-bottom:28px; }
.btn{
  border:0; cursor:pointer;
  font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  border-radius:var(--radius-sm);
  font-size:14.5px; font-weight:700;
  padding:13px 10px;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  width:100%;
  background:var(--gold);
  color:var(--gold-contrast);
  margin-bottom:10px;
}
.actions-row{ display:flex; gap:8px; }
.actions-row .btn{ flex:1; min-width:0; }
.btn-outline{
  background:var(--accent-soft);
  color:var(--ink);
}
.btn-outline span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic{ width:18px; height:18px; flex:none; }
.ic-wa{ color:#25D366; }

/* ---------- Details ---------- */
.label{
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-muted);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.details{ margin-bottom:24px; }
.detail-list{ display:flex; flex-direction:column; gap:12px; }
.detail-row{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px;
  color:var(--ink);
  text-decoration:none;
}
.detail-row .ic-badge{
  width:36px; height:36px; flex:none;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.detail-row .ic-badge svg{ width:17px; height:17px; }
.detail-row .txt{ word-break:break-word; }
.detail-row .txt small{ display:block; color:var(--ink-muted); font-weight:500; font-size:12.5px; }

/* ---------- Social ---------- */
.social-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.social-badge{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:transform .15s ease;
}
.social-badge:active{ transform:scale(.92); }
.social-badge svg{ width:22px; height:22px; }

/* ---------- Footer ---------- */
.footer{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:12.5px;
  color:var(--ink-muted);
}
.footer a{ color:var(--accent); font-weight:700; text-decoration:none; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

[hidden]{ display:none !important; }