@font-face {
  font-family: Amiri;
  src: url('./fonts/amiri-v30-arabic_latin-regular.woff2');
  font-display: swap
}
:root {
  --soft-rose: #fff1f2;
  --deep-rose: #fb7185;
  --dusty-rose: #fda4af;
  --text-main: #4b5563
}
body {
  background: linear-gradient(180deg,#fffafb 0,#fff1f2 100%);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--text-main);
  min-height: 100vh;
  transition: background .3s ease;
  overflow-x: hidden
}
#langSelect {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(251,113,133,.1);
  padding: 6px 16px;
  border-radius: 20px;
  color: #e11d48;
  font-weight: 700;
  border: 1px solid rgba(251,113,133,.2);
  outline: 0;
  text-align: center
}
#langSelect option {
  background-color: #fff;
  color: #334155
}
body.dark {
  background: #1a1617;
  color: #fecdd3
}
body.dark #langSelect {
  background: rgba(255,255,255,.05);
  color: #fecdd3;
  border-color: rgba(255,255,255,.1)
}
body.dark #langSelect option {
  background-color: #2d2426;
  color: #fecdd3
}
body.dark .status-orb {
  background: #241e1f;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  border-color: #332a2c
}
body.dark #modalContent {
  background: #1f1a1b;
  border-top: 1px solid #3d2e31
}
.status-orb {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 20px 50px rgba(251,113,133,.15);
  border: 8px solid #fff;
  position: relative;
  transition: all .5s cubic-bezier(.175, .885, .32, 1.275)
}
.status-orb::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed var(--deep-rose);
  opacity: .3;
  animation: rotate 20s linear infinite
}
@keyframes rotate {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}
.status-hayd-pulse {
  animation: softPulse 3s infinite ease-in-out
}
@keyframes softPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 20px 50px rgba(251,113,133,.2)
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(251,113,133,.4)
  }
}
.action-btn {
  color: #fff;
  padding: 16px 48px;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(251,113,133,.2);
  transition: all .2s ease
}
.action-btn:active {
  transform: scale(.95)
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.animate-fade-in {
  animation: fadeIn .4s ease-out forwards
}