/* بلمو — صفحه اتصال / بوت PWA */
:root {
  --blemo-conn-green: #1f7a53;
  --blemo-conn-green-dark: #155c3e;
  --blemo-conn-bg: #fafffb;
  --blemo-conn-bg-edge: #d4ebe0;
  --blemo-conn-font: 'Vazirmatn', system-ui, Tahoma, sans-serif;
}

html.blemo-connecting-active,
body.blemo-connecting-active,
body.auth-booting,
body.portal-booting {
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

.blemo-connecting {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  z-index: 100000;
  margin: 0;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  font-family: var(--blemo-conn-font);
  color: #0c1a14;
  overflow: hidden;
  isolation: isolate;
}

.blemo-connecting.hidden {
  display: none !important;
}

.blemo-connecting__scene {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 0% 50%, rgba(31, 122, 83, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 80%, rgba(34, 197, 94, 0.1) 0%, transparent 45%),
    linear-gradient(165deg, var(--blemo-conn-bg) 0%, #eef8f2 40%, var(--blemo-conn-bg-edge) 100%);
}

.blemo-connecting__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  animation: blemoConnOrb 11s ease-in-out infinite alternate;
}

.blemo-connecting__orb--1 {
  width: min(480px, 88vw);
  height: min(480px, 88vw);
  background: rgba(31, 122, 83, 0.2);
  top: -16%;
  right: -10%;
}

.blemo-connecting__orb--2 {
  width: min(340px, 68vw);
  height: min(340px, 68vw);
  background: rgba(52, 211, 153, 0.16);
  bottom: -10%;
  left: -8%;
  animation-delay: 3.5s;
}

@keyframes blemoConnOrb {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(12px, -10px) scale(1.06); }
}

/* وسط‌چین قطعی — مستقل از RTL و flex در PWA */
.blemo-connecting__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  padding: 32px 28px 28px;
  width: min(320px, calc(100% - 32px));
  max-width: 320px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 24px 64px rgba(12, 26, 20, 0.1),
    0 2px 8px rgba(12, 26, 20, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.blemo-connecting__logo-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 18px rgba(31, 122, 83, 0.16);
  border: 1px solid rgba(31, 122, 83, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: blemoConnLogo 2.4s ease-in-out infinite;
}

@keyframes blemoConnLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.blemo-connecting__logo {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.blemo-connecting__brand {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blemo-conn-green);
}

.blemo-connecting__title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.blemo-connecting__spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid rgba(31, 122, 83, 0.18);
  border-top-color: var(--blemo-conn-green);
  animation: blemoConnSpin 0.8s linear infinite;
}

@keyframes blemoConnSpin {
  to { transform: rotate(360deg); }
}

.blemo-connecting__sub {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.6;
}

body.auth-booting .auth-wrap,
body.portal-booting #appScreen {
  visibility: hidden !important;
  pointer-events: none;
}

@media (max-width: 480px) {
  .blemo-connecting__card {
    padding: 28px 22px 24px;
    border-radius: 20px;
  }
  .blemo-connecting__logo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
  .blemo-connecting__logo {
    width: 46px;
    height: 46px;
  }
  .blemo-connecting__brand { font-size: 18px; }
  .blemo-connecting__title { font-size: 13px; }
}