.cloud-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background: radial-gradient(circle at 25% 18%, #f6edc7 0, transparent 35%),
    radial-gradient(circle at 80% 20%, #cfe6dd 0, transparent 38%),
    linear-gradient(160deg, #f5f4e7, #c4dbd0);
}
.cloud-gate[hidden], .cloud-gate [hidden] { display: none !important; }
.cloud-gate::before {
  content: '';
  position: fixed;
  left: -10%;
  right: -10%;
  bottom: -13vh;
  height: 35vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(#b7d2c2, #7fa897);
  pointer-events: none;
}
.cloud-gate-card {
  position: relative;
  width: min(100%, 430px);
  padding: clamp(27px, 5vw, 43px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 32px;
  background: rgba(255,255,248,.88);
  box-shadow: 0 26px 75px rgba(65,99,90,.19);
  text-align: center;
  color: #3c5555;
}
.cloud-gate-card .cloud-gate-mark { font-size: 36px; line-height: 1; color: #d7a965; }
.cloud-gate-card h2 { margin: 13px 0 8px; font: 700 clamp(29px, 6vw, 38px)/1.12 'Playfair Display', Georgia, serif; }
.cloud-gate-card p { color: #667e7a; line-height: 1.55; }
.cloud-login-form { display: grid; gap: 13px; margin-top: 22px; text-align: left; }
.cloud-login-form label { display: grid; gap: 6px; color: #496461; font-size: 13px; font-weight: 700; }
.cloud-login-form input { width: 100%; min-height: 47px; border: 1px solid #b7ccc4; border-radius: 13px; padding: 11px 14px; background: #fffefa; color: #314b49; font: inherit; }
.cloud-login-form button { min-height: 48px; margin-top: 5px; border: 0; border-radius: 14px; background: linear-gradient(135deg,#6b9389,#4a7372); color: white; font: 700 15px 'DM Sans', sans-serif; cursor: pointer; }
.cloud-login-form button:disabled { opacity: .65; cursor: wait; }
.cloud-gate-error { margin: 15px 0 0; color: #9c3a3a !important; font-size: 14px; }
html[data-theme="night"] .cloud-gate { background: radial-gradient(circle at 75% 15%,#3c6471,transparent 37%), linear-gradient(160deg,#142b39,#1a3b42); }
html[data-theme="night"] .cloud-gate::before { background: linear-gradient(#355b55,#204844); }
html[data-theme="night"] .cloud-gate-card { background: rgba(29,53,62,.96); border-color: rgba(216,236,219,.22); color: #edf3e8; box-shadow: 0 30px 75px rgba(0,10,20,.35); }
html[data-theme="night"] .cloud-gate-card p { color: #c2d6cf; }
html[data-theme="night"] .cloud-login-form label { color: #d4e6dc; }
html[data-theme="night"] .cloud-login-form input { background: #183541; border-color: #5b7d77; color: #fff; }
@media (prefers-reduced-motion: no-preference) { .cloud-gate-card { animation: cloudArrive .7s both; } @keyframes cloudArrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } }