/* ====== الأساسيات ====== */
:root{
  --bg-dark: #0d0d0d;
  --bg-darker: #0b0b0b;
  --bg-card: #1a1a1a;
  --bg-card-2: #202020;
  --text: #eaeaea;
  --muted: #bdbdbd;

  --gold: #f5c542;
  --gold-2: #e6b93c;
  --gold-3: #cda02a;

  --green: #25d366;
  --red: #e74c3c;
  --blue: #2d9cdb;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
  --blur: saturate(120%) blur(2px);
  --tr: .3s ease;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #1e1e1e 0%, #111 60%, #0b0b0b 100%);
  color:var(--text);
}

/* ====== شاشة الترحيب ====== */
.welcome{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:
    radial-gradient(800px 400px at 80% -10%, #2a2a2a 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #1c1c1c 0%, transparent 60%),
    linear-gradient(180deg, #121212, #0b0b0b);
  z-index:9999;
  animation: fadeIn .6s ease;
}
.welcome__inner{
  text-align:center;
  max-width:760px;
  padding: 32px 22px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  border: 1px solid rgba(245,197,66,.18);
  backdrop-filter: blur(6px);
  animation: rise .7s ease both .15s;
}
.welcome__logo{
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(245,197,66,.35);
  animation: glow 2.8s ease-in-out infinite;
}
.welcome__title{
  margin:.3rem 0 .2rem;
  font-size: clamp(22px, 4vw, 34px);
  font-weight:700;
}
.welcome__title span{
  color: var(--gold);
  background: linear-gradient(90deg, var(--gold), #fff8d2, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome__subtitle{
  color: var(--muted);
  margin: .2rem 0 1rem;
  font-size: clamp(14px, 2.4vw, 18px);
}
.welcome__help{
  color:#d6d6d6;
  margin: 0 0 1.2rem;
}

.welcome__actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.btn{
  border:none; cursor:pointer; transition:var(--tr);
  border-radius: 12px; padding: 12px 18px; font-weight:700;
  letter-spacing:.2px;
}
.btn--gold{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#1a1a1a;
  box-shadow: 0 8px 20px rgba(245,197,66,.25);
}
.btn--gold:hover{ transform: translateY(-2px); filter:brightness(1.05); }
.btn--glass{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(245,197,66,.25);
}
.btn--glass:hover{ background: rgba(255,255,255,.12); }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes rise{ from{ transform: translateY(16px); opacity:.0 } to{ transform:translateY(0); opacity:1 } }
@keyframes glow{
  0%,100%{ text-shadow: 0 0 10px rgba(245,197,66,.25), 0 0 28px rgba(245,197,66,.15); }
  50%{ text-shadow: 0 0 20px rgba(245,197,66,.35), 0 0 40px rgba(245,197,66,.25); }
}

/* ====== الهيدر ====== */
.app-header{
  position: sticky; top:0; z-index:100;
  background: rgba(16,16,16,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245,197,66,.12);
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__icon{ font-size:24px; color:var(--gold); }
.brand__text h1{ margin:0; font-size:18px; }
.brand__text span{ font-size:12px; color:var(--muted); display:block; }

.nav .btn--ghost{
  background: transparent; color: var(--gold);
  border:1px solid rgba(245,197,66,.25);
  padding:8px 12px; border-radius:10px;
}
.nav .btn--ghost:hover{ background: rgba(245,197,66,.08); }

/* ====== الحاوية ====== */
.container{
  width:min(1100px, 92%);
  margin: 24px auto 40px;
}

/* ====== البطاقات ====== */
.card{
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid rgba(245,197,66,.12);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  animation: fadeUp .5s ease both;
}
.card__title{
  margin: 0 0 12px;
  font-size: 18px;
  border-right: 4px solid var(--gold);
  padding-right: 10px;
}

@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* ====== الشبكة والحقول ====== */
.grid{ display:grid; gap:14px; }
.grid--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 760px){ .grid--2{ grid-template-columns:1fr; } }

.field{}
.field__label{ display:block; margin:4px 0 6px; font-weight:700; color:#f3f3f3; }
.field__hint{ display:block; color: var(--muted); font-size: .9rem; }

input, select{
  width:100%; padding:12px 14px; border-radius: 12px;
  background: #151515; color: var(--text);
  border:1px solid #2a2a2a; outline:none; transition: var(--tr);
}
input:focus, select:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(245,197,66,.15);
}

/* ====== أزرار الأدوات ====== */
.inline{ display:flex; gap:10px; flex-wrap:wrap; }
.btn--danger{ background: linear-gradient(180deg, #ff7a6f, #e74c3c); color:#fff; }
.btn--danger:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.btn--success{ background: linear-gradient(180deg, #33e08f, #1dbb6e); color:#0c1913; font-weight:800; }
.btn--success:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn--info{ background: linear-gradient(180deg, #72c6ff, #2d9cdb); color:#061018; }
.btn--info:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.btn--ghost-dark{
  background: transparent; color: var(--text);
  border:1px solid #3a3a3a;
}
.btn--ghost-dark:hover{ background:#151515; }

/* ====== عناصر الورثة ====== */
.heirs{ display:grid; gap:10px; margin-top: 10px; }
.heir{
  display:grid; grid-template-columns: 2.2fr 1.6fr auto;
  gap:10px; padding:12px; border-radius:12px;
  background: #151515;
  border:1px solid #2a2a2a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  animation: fadeUp .4s ease;
}
.heir .delete{
  padding: 10px 12px;
  background: #2a2a2a; color:#eee; border-radius:10px; border:none; cursor:pointer; transition:var(--tr);
}
.heir .delete:hover{ background: #3a3a3a; }

/* ====== النتائج (جدول + كروت) ====== */
.results__header{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
}
.tabs{ display:flex; gap:8px; }
.tab{
  background:#151515; color:#ddd; border:1px solid #333; border-radius:10px;
  padding:8px 12px; cursor:pointer; transition:var(--tr);
}
.tab.active, .tab:hover{ border-color: var(--gold); color: var(--gold); }

.table-wrap{ overflow:auto; border-radius: 12px; border:1px solid #2a2a2a; }
.table{
  width:100%; border-collapse: collapse; min-width: 820px;
}
.table thead th{
  position: sticky; top:0;
  background: #121212; color:#f5f5f5;
  border-bottom: 1px solid #2a2a2a; padding:10px;
}
.table td{ padding:10px; border-bottom:1px solid #242424; color:#e9e9e9; }
.table tr:nth-child(even){ background: #161616; }

#summaryRow{
  color:#f1e5c4;
  background: linear-gradient(180deg, #1b1b1b, #161616);
  border-top: 1px solid rgba(245,197,66,.15);
  font-weight:700;
}

/* كروت النتائج (للموبايل وأيضًا للعرض الجمالي) */
.results-cards{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top: 10px;
}
@media (max-width: 820px){
  .results-cards{ grid-template-columns: 1fr; }
  .table{ display:none; } /* على الموبايل نعتمد الكروت */
}
.card.result{
  border:1px solid #2a2a2a; border-radius:14px; padding:14px;
  background: linear-gradient(180deg, #151515, #1a1a1a);
  box-shadow: var(--shadow-soft);
  transition: var(--tr);
}
.card.result:hover{ transform: translateY(-2px); }
.card.result .title{ color: var(--gold); font-weight:700; margin: 0 0 6px; }
.card.result .meta{ color:#cfcfcf; font-size:.95rem; margin: 3px 0; }
.card.result .reason{ color:#dcdcdc; font-size:.92rem; margin-top:6px; }
.card.result.inheriting{ box-shadow: 0 0 0 1px rgba(37, 208, 121, .25), 0 10px 24px rgba(12, 66, 36, .25); }
.card.result.blocked{ opacity:.85; box-shadow: 0 0 0 1px rgba(231, 76, 60, .25), 0 10px 24px rgba(72, 14, 9, .25); }

/* ألوان الحالة في الجدول */
.inheriting-row{ background: #0d2018 !important; }
.blocked-row{ background: #201010 !important; }

/* ====== الديالوج ====== */
.dialog{
  border:none; padding:0; border-radius:16px;
  background: linear-gradient(180deg, #171717, #131313);
  color: var(--text);
  border:1px solid rgba(245,197,66,.15);
  box-shadow: var(--shadow);
}
.dialog::backdrop{ background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.dialog__content{ padding: 0; }
.dialog__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom: 1px solid #2a2a2a;
}
.icon-btn{
  background: #1f1f1f; color:#ddd; border:1px solid #2f2f2f; border-radius:10px;
  padding:6px 10px; cursor:pointer;
}
.dialog__body{ padding: 14px 16px; }
.dialog__footer{ padding: 12px 16px; border-top: 1px solid #2a2a2a; text-align:left; }
.steps{ margin:0; padding-right: 1.1rem; }
.steps li{ margin:.4rem 0; }
.note{ color:#dcdcdc; }

/* ====== أنيميشن عامة ====== */
@keyframes shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}

/* ====== تحسينات اللمس على الموبايل ====== */
@media (hover: none){
  .btn:hover{ transform:none; filter:none; }
}

/* ====== مساعدات ====== */
.hidden{ display:none !important; }
/* ===================== خلفية بزخارف إسلامية شفافة ===================== */
body {
  background-color: #0d0d0d;
  background-image:
    url('https://i.ibb.co/4Nn2hsp/islamic-pattern-gold.png'),
    radial-gradient(1200px 600px at 20% -10%, #1e1e1e 0%, #111 60%, #0b0b0b 100%);
  background-repeat: repeat;
  background-size: 280px 280px, auto;
  background-attachment: fixed;
  background-blend-mode: overlay;
}

/* ===================== قسم اختبر نفسك ===================== */
.quiz-card {
  text-align: center;
  margin-top: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(245,197,66,.15);
  backdrop-filter: blur(6px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(245,197,66,.15);
}
.quiz-card .card__title {
  text-align: center;
  font-size: 20px;
  color: var(--gold);
}
.quiz__text {
  color: #d9d9d9;
  margin: 8px 0 16px;
  font-size: 1rem;
}
.quiz__notice {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(245,197,66,.25);
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
  text-align: center;
}