@charset "utf-8";

#join-form { font-family: "Google Sans", Roboto, Arial, sans-serif; }

#join-form .jf-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px; padding: 32px 36px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 24px, rgba(0, 0, 0, 0.04) 0px 1px 4px; max-width: 360px; transition: 0.5s cubic-bezier(0.2, 0.6, 0.3, 1); }

#join-form .jf-title { font-size: 20px; font-weight: 500; color: rgb(31, 31, 31); margin: 0px 0px 4px; }

#join-form .jf-sub { font-size: 13px; color: rgb(95, 99, 104); margin: 0px 0px 20px; }

#join-form .jf-input { -webkit-font-smoothing: antialiased; width: 100%; padding: 14px 16px; border: 1.5px solid rgb(218, 220, 224); border-radius: 12px; font-size: 14px; font-family: "Google Sans", Roboto, Arial, sans-serif; outline: none; background: rgba(255, 255, 255, 0.7); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; box-sizing: border-box; }

#join-form .jf-input:focus { border-color: rgb(26, 115, 232); box-shadow: rgba(26, 115, 232, 0.15) 0px 0px 0px 3px; background: rgb(255, 255, 255); }

#join-form .jf-input::placeholder { color: rgb(154, 160, 166); }

#join-form .jf-btn { width: 100%; padding: 12px; margin-top: 16px; background: rgb(26, 115, 232); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 12px; font-size: 14px; font-weight: 500; font-family: "Google Sans", Roboto, Arial, sans-serif; cursor: pointer; transition: background 0.3s, transform 0.2s, box-shadow 0.3s; }

#join-form .jf-btn:hover { background: rgb(21, 87, 176); box-shadow: rgba(26, 115, 232, 0.3) 0px 2px 12px; transform: translateY(-1px); }

#join-form .jf-btn:active { transform: translateY(0px); }

#join-form .jf-btn:disabled { background: rgb(218, 220, 224); color: rgb(154, 160, 166); cursor: not-allowed; transform: none; box-shadow: none; }

#join-form .jf-step { transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.3, 1), transform 0.4s cubic-bezier(0.2, 0.6, 0.3, 1), filter 0.4s cubic-bezier(0.2, 0.6, 0.3, 1); }

#join-form .jf-icon { width: 36px; height: 36px; background: linear-gradient(135deg, rgb(66, 133, 244), rgb(26, 115, 232)); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

#join-form .jf-icon svg { width: 20px; height: 20px; fill: rgb(255, 255, 255); }