:root{
  --arqam-primary:#1c2e6b;
  --arqam-secondary:#0a1128;
  --arqam-accent:#ffd700;
  --arqam-ink:#0b1220;
  --arqam-bg:#060b16;
}
html,body{height:100%;}
body{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(246,195,67,.25), transparent 55%),
              radial-gradient(900px 600px at 0% 0%, rgba(14,124,102,.25), transparent 50%),
              linear-gradient(135deg, #050814, #0b1b3a 50%, #081024);
  color:#fff;
}
.arqam-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}


.arqam-badge{
  background: rgba(246,195,67,.15);
  border: 1px solid rgba(246,195,67,.35);
  color: #ffe7a6;
}
.option{
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.option:hover{ transform: translateY(-2px); border-color: rgba(246,195,67,.6); }
.option.selected{
  border-color: rgba(246,195,67,.9);
  background: rgba(246,195,67,.12);
  box-shadow: 0 0 0 2px rgba(246,195,67,.18);
}
.glow{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.arqam-btn{
  background: linear-gradient(90deg, var(--arqam-accent), #ffd36d);
  color:#141414;
  border:0;
}
.arqam-btn:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.arqam-btn:active{ transform: translateY(0); }
.arqam-btn-outline{
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}
.arqam-btn-outline:hover{ border-color: rgba(246,195,67,.65); }
.tiny{
  font-size:.82rem;
  opacity:.85;
}
.pattern{
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.22;
  background-image:
    url('../img/pattern.svg'),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.06) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 60% 25%, rgba(255,255,255,.05) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 20% 70%, rgba(255,255,255,.04) 0 2px, transparent 2px 100%);
  background-size: 220px 220px, 180px 180px, 260px 260px;
}
.count-pill{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
}
.toast{
  position: fixed;
  bottom: 18px;
  left: 18px;
  right: 18px;
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 50;
}
.toast.show{ display:block; animation: pop .18s ease-out; }
@keyframes pop{ from{ transform: translateY(8px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* Print helpers for posters/certificates */
.print-area{ background:#fff; color:#111; }
@media print{
  body{ background:#fff !important; color:#111 !important; }
  .no-print{ display:none !important; }
  .print-area{ box-shadow:none !important; border:none !important; }
}


@keyframes pattern-float{0%{transform:translateY(0)}100%{transform:translateY(-120px)}}
.pattern{animation:pattern-float 18s linear infinite;}