/* === Vars === */
:root{
  --bg:#0d1021;
  --paper: rgba(255,255,255,.78);
  --paper-border: rgba(255,255,255,.20);
  --ink:#0f1422;
  --ink-soft:#2a3142;
  --btn:#7c6cff;
  --btn-ink:#0c0c16;
}

/* الخلفية + طبقة تعتيم لطيفة */
.bg{
  margin:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto;
  direction:rtl; color:#e9e9ef;
  background:#0d1021 url('bg.jpg') center/cover fixed no-repeat;
  position:relative;
}
.bg::after{content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,12,26,.55), rgba(8,12,26,.35)); z-index:1}

/* هالة ألوان متحركة */
#fx-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(80px);
  background:
    radial-gradient(600px 600px at 10% 20%, rgba(124,108,255,.28), transparent 60%),
    radial-gradient(700px 700px at 80% 10%, rgba(0,229,255,.22), transparent 60%),
    radial-gradient(600px 600px at 30% 90%, rgba(255,110,199,.20), transparent 60%);
  animation:floatAurora 18s ease-in-out infinite alternate}
@keyframes floatAurora{
  0%{transform:translate(-2%,-2%)}50%{transform:translate(2%,2%)}100%{transform:translate(0,-1%)}}

/* حاوية وتمركز */
.container{max-width:1200px;margin:0 auto;padding:24px;min-height:100%;position:relative;z-index:2}
.main-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}

/* الهيدر */
header{display:flex;justify-content:center;margin-bottom:18px}
.hero-badge{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.9);
  color:var(--ink);border-radius:18px;padding:10px 14px;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.logo{width:88px;height:88px;background:#fff;padding:12px;border-radius:18px;
  object-fit:contain;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.brand{line-height:1.1}
.brand b{font-size:26px;color:#0f1422}
.brand small{display:block;font-size:13px;color:#2a3142}

/* ووترمارك الشعار */
.wm-shield{position:absolute;z-index:0;opacity:.07;width:min(38vw,420px);
  filter:grayscale(100%) contrast(120%);transform:translate(-6%,-8%) rotate(-12deg);pointer-events:none}

/* الكرت بحد متدرّج + سبوت لايت */
.card-neo{
  position:relative; z-index:2;
  border-radius:28px;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(120deg, #8a7cff, #00e5ff, #ff6ec7) border-box;
  border:1.5px solid transparent;
  box-shadow:0 28px 68px rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(1.15);
}
.card-xl{padding:32px;max-width:900px;width:100%}
.grid{display:grid;gap:16px}

/* سبوت لايت يتحرك مع الماوس */
.spotlight::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px 460px at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%), rgba(255,255,255,.38), transparent 60%);
  mix-blend-mode:soft-light}

/* عناوين وحقول */
.headline{margin:0 0 6px;font-size:40px;color:#12121a}
.headline span{background:linear-gradient(90deg,#7f76ff,#00e1ff,#ff6ec7);
  -webkit-background-clip:text;background-clip:text;color:transparent}
label{font-weight:800;color:#1a1f2a}
input{
  width:100%;padding:16px 18px;border-radius:14px;border:1px solid rgba(0,0,0,.12);
  background:#fff;color:#0f1422;font-size:18px;transition:box-shadow .15s ease,border-color .15s ease
}
input::placeholder{color:#9aa0a6}
input:focus{outline:0;border-color:#8a7cff;box-shadow:0 0 0 6px rgba(138,124,255,.16), 0 8px 22px rgba(0,0,0,.08)}

/* ترتيب الحقول عمودي */
.form{display:grid;gap:14px}
.field label{font-weight:800;color:#1a1f2a}

/* فاصل ناعم */
.soft{
  border:0;height:1px;margin:8px 0 6px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 280px}

/* أزرار */
.btn{display:inline-block;padding:14px 18px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;font-size:16px}
.btn.grad{background:linear-gradient(90deg,#8a7cff,#00e5ff);color:#0c0c16;font-weight:900}
.btn.ghost{background:#1f2440;color:#e9e9ef;border:1px solid rgba(255,255,255,.18)}
.btn:active{transform:translateY(1px)}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#f1f3f7;color:#111;font-weight:700}
.captcha{display:flex;gap:10px;align-items:center}

/* الأزرار بالنص + عرض مناسب */
.actions{justify-content:center}
.actions .btn{min-width:180px}

/* ملاحظات ومعلومات */
.note{font-size:13px;color:#223}
.small{font-size:13px}
.address{white-space:pre-wrap;color:#223}

/* شريط معلومات أسفل الكرت */
.meta{
  margin-top:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
}

.msg{min-height:24px}
.success{color:#61ffb0}.error{color:#ff7b7b}
footer{margin-top:18px;text-align:center;opacity:.9;color:#dfe3ea}

/* نتيجة المطابقة */
.photo{width:96px;height:96px;border-radius:16px;object-fit:cover;border:1px solid #d7dbe2}

/* Overlay الكاميرا */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:3}
.overlay .box{width:min(760px,92vw);background:#0f1228;padding:18px;border-radius:18px}
video{width:100%;border-radius:12px}

/* جدول للأدمن (توافقاً) */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(0,0,0,.1);padding:10px;text-align:right}
