/* styles.css (FULL) */
:root{
  --bg:#060310;
  --p:#6D28D9;
  --dp:#4C1D95;
  --lp:#A78BFA;
  --y:#FBBF24;
  --t:#EDE9FE;
  --mut:rgba(237,233,254,.72);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 14px 40px rgba(109,40,217,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--t);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(980px,92%);margin-inline:auto}

.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(167,139,250,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(167,139,250,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 0%, black 0 55%, transparent 75%);
  opacity:.85;
}
.orb{position:absolute;border-radius:999px;filter: blur(30px);opacity:.75}
.orb-1{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle at 30% 30%, var(--lp), transparent 60%)}
.orb-2{width:560px;height:560px;right:-180px;top:120px;background:radial-gradient(circle at 30% 30%, var(--p), transparent 62%)}
.orb-3{width:520px;height:520px;left:20%;bottom:-240px;background:radial-gradient(circle at 30% 30%, rgba(251,191,36,.22), transparent 62%)}
#stars{position:absolute;inset:0;opacity:.75}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(6,3,16,.55);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(167,139,250,.10);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--p),var(--dp));
  box-shadow: var(--shadow2);
  position:relative;overflow:hidden;
}
.brand__mark::after{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(251,191,36,.35), transparent 60%);
  transform: rotate(18deg);
}
.brand__text b{font-size:16px;font-weight:900}
.brand__text small{display:block;margin-top:2px;color:var(--mut);font-weight:700}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:999px;
  font-weight:900;letter-spacing:.2px;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(135deg,var(--p),var(--dp));
  box-shadow: 0 18px 45px rgba(109,40,217,.30);
  color:#fff;
}
.btn--ghost{
  background:rgba(255,255,255,.05);
  border-color: rgba(167,139,250,.18);
  color: rgba(237,233,254,.92);
}
.btn--primary:hover{box-shadow: 0 22px 60px rgba(109,40,217,.38)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}

.card{
  border-radius: 26px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(167,139,250,.14);
  box-shadow: var(--shadow);
}

.formWrap{padding:44px 0}
.section__head{margin-bottom:14px}
.h2{margin:0 0 8px;font-size:28px;font-weight:950}
.muted{margin:0;color:var(--mut);line-height:1.9;font-weight:800}
.formCard{padding:16px}

form{display:grid;gap:12px;margin-top:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 820px){ .row{grid-template-columns:1fr} }

label{font-weight:950}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  background:#1D0D36;
  border:1px solid rgba(167,139,250,.18);
  color:rgba(237,233,254,.92);
  outline:none;
  font-family: inherit;
  font-weight:800;
}
input::placeholder, textarea::placeholder{color:rgba(237,233,254,.45)}
textarea{min-height:110px;resize:vertical}
.help{color:rgba(237,233,254,.70);font-weight:800;line-height:1.8;margin:0}

.block{
  padding:14px;border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(167,139,250,.14);
}
.qtitle{font-weight:950;margin:0 0 10px;color:rgba(237,233,254,.92)}
.opts{display:grid;gap:10px}
.opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(167,139,250,.12);
}
.opt input{width:auto}
.tiny{font-size:13px;color:rgba(237,233,254,.65);font-weight:800;margin:8px 0 0}

.ok{
  display:none;
  padding:14px;border-radius:18px;
  background:rgba(251,191,36,.10);
  border:1px solid rgba(251,191,36,.18);
  color:rgba(251,191,36,.95);
  font-weight:950;
}

.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.waAfter{display:none;margin-top:10px}
.footer{margin-top:14px;font-size:13px}

/* Mobile upgrades */
@media (max-width: 820px){
  .wrap{width:min(720px,94%)}
  .topbar__inner{padding:12px 0}
  .brand__text b{font-size:15px}
  .brand__text small{font-size:12px}
  .btn{padding:12px 14px}
  .formWrap{padding:22px 0}
  .h2{font-size:22px}
  .muted{font-size:14px}
  .card{border-radius:20px}
  .formCard{padding:12px}
  input, select, textarea{
    padding:14px 12px;
    border-radius:14px;
    font-size:16px; /* prevent iOS zoom */
  }
  .actions{gap:10px}
  .actions .btn{width:100%}
}
@media (max-width: 420px){
  .brand__mark{width:38px;height:38px;border-radius:12px}
  .h2{font-size:20px}
}

/* ===== Popup Modal (copy to any page that needs popups) ===== */
.modal{position:fixed;inset:0;z-index:999;display:none}
.modal.is-open{display:block}

.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.modal__card{
  position:relative;
  width:min(560px,92%);
  margin: 16vh auto 0;
  padding:14px;
  border-radius:22px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

.modal__top{display:flex;gap:12px;align-items:flex-start}
.modal__icon{
  width:42px;height:42px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  background: rgba(255,90,90,.15);
  border:1px solid rgba(255,90,90,.28);
  color: rgba(255,190,190,.98);
}
.modal__title{font-weight:950;font-size:18px}
.modal__msg{margin-top:4px;color:rgba(237,233,254,.78);font-weight:800;line-height:1.7}

.modal__x{
  margin-inline-start:auto;
  border:0;
  background:transparent;
  color:rgba(237,233,254,.85);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
}

.modal__list{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(167,139,250,.12);
  color:rgba(237,233,254,.82);
  font-weight:850;
  line-height:1.9;
}
.modal__list b{color:#fff}
.modal__actions{display:flex;justify-content:flex-end;margin-top:12px}

@media (max-width: 420px){
  .modal__card{margin-top: 14vh}
  .modal__title{font-size:16px}
}