@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html, body, input, button, label { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { outline-width: 0; }
body { margin: 0; background: #f5f4f2; }
form { position: static; height: auto; text-align: left; }

#container { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 16px; box-sizing: border-box; }

#inviteContainer {
  display: flex; width: 760px; max-width: 100%;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(17,26,51,.14);
  animation: cardIn .6s ease both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- left brand panel ---------- */
.logoContainer {
  flex: 0 0 290px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 16px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #1b2554 0%, #0b1230 70%);
  transform: none !important;
}
.logoContainer:before { display: none; }
.logoContainer a { display: block; height: auto; }
.logoContainer img { width: 200px; height: auto; max-height: none; object-fit: contain; margin: 0; display: block; animation: vfloat 6s ease-in-out infinite; }
@keyframes vfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.brand { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.brand svg { width: 48px; height: 43px; overflow: visible; }
.brand b { color: #fff; font-size: 27px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.brand-sub { font-size: 9px; letter-spacing: .42em; color: #aab3d6; margin: 9px 0 0 4px; }

.brand .p { opacity: 0; transform-box: fill-box; transform-origin: center; animation: vpop 4s ease-in-out infinite; }
.brand .p:nth-child(1) { animation-delay: 0s; }
.brand .p:nth-child(2) { animation-delay: .12s; }
.brand .p:nth-child(3) { animation-delay: .24s; }
.brand .p:nth-child(4) { animation-delay: .36s; }
.brand .p:nth-child(5) { animation-delay: .48s; }
.brand .p:nth-child(6) { animation-delay: .6s; }
@keyframes vpop {
  0%       { opacity: 0; transform: translateY(-10px) scale(.6); }
  12%, 80% { opacity: 1; transform: none; }
  92%,100% { opacity: 0; transform: translateY(6px) scale(.9); }
}

/* ---------- right form ---------- */
#inviteContainer .acceptContainer {
  flex: 1; box-sizing: border-box; padding: 40px 38px;
  margin: 0 !important; height: auto !important; opacity: 1 !important; overflow: visible; width: auto;
}
#inviteContainer .acceptContainer:before { display: none; }

form h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: #111a33; opacity: 1 !important; left: 0 !important; }
form h1:before { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; margin-bottom: 22px;
  background: linear-gradient(90deg,#ff9a1f,#f2552e,#d9307f,#5b4be6,#2f6ff0,#21b8f2); }
.sub { margin: 0 0 22px; font-size: 12px; color: #6b7280; }

.formContainer .formDiv { margin-bottom: 14px; opacity: 1 !important; left: 0 !important; padding: 0; }
.formContainer .formDiv:last-child { padding-top: 0; margin-bottom: 0; }
.formContainer p { margin: 0 0 4px; font-size: 11px; font-weight: 500; color: #4b5563; }

.formContainer input[type=text], .formContainer input[type=password] {
  width: 100%; height: 42px; padding: 0 12px; box-sizing: border-box;
  background: #f4f3f0; border: 1px solid transparent; border-radius: 10px; box-shadow: none;
  color: #111a33; font-size: 13px; transition: .15s;
}
.formContainer input[type=text]:focus, .formContainer input[type=password]:focus {
  background: #fff; border-color: #2f6ff0; box-shadow: 0 0 0 3px rgba(47,111,240,.16);
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f4f3f0 inset !important; -webkit-text-fill-color: #111a33 !important; }

.formContainer .acceptBtn {
  width: 100%; height: 44px; margin-top: 6px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg,#2f6ff0,#5b4be6); color: #fff; font-size: 14px; font-weight: 500;
  transition: .15s;
}
.acceptBtn:hover { background: linear-gradient(90deg,#2f6ff0,#5b4be6); filter: brightness(1.08); }
.acceptBtn:disabled { opacity: .6; cursor: wait; }

.remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: #4b5563; }
.remember input { width: 15px; height: 15px; margin: 0; accent-color: #2f6ff0; }
.remember label { margin: 0; cursor: pointer; }

span#ver { display: inline-block; margin-top: 16px; font-size: 11px; color: #9aa3af; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  #inviteContainer { flex-direction: column; }
  .logoContainer { flex: none; padding: 22px 16px 18px; }
  .logoContainer img { width: 120px; }
  #inviteContainer .acceptContainer { padding: 28px 22px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .p { animation: none; opacity: 1; }
  .logoContainer img, #inviteContainer { animation: none; }
}

html body, html body #container, #fullscreen_bg, .fullscreen_bg {
  background: #f5f4f2 !important;
  background-image: none !important;
}


/* ---------- 2FA code popup (bootbox) ---------- */
.bootbox .modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 8px 6px 6px; text-align: center; }
.bootbox .modal-header { border: 0; justify-content: center; padding: 22px 20px 6px; display: block; }
.bootbox .modal-header:before { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; margin: 0 auto 16px;
  background: linear-gradient(90deg,#ff9a1f,#f2552e,#d9307f,#5b4be6,#2f6ff0,#21b8f2); }
.bootbox .modal-title { font-size: 15px; font-weight: 600; color: #111a33; }
.bootbox .modal-body { padding: 8px 24px 4px; }
.bootbox .bootbox-input {
  height: 52px; border-radius: 10px; border: 1px solid transparent; background: #f4f3f0; box-shadow: none;
  text-align: center; font-size: 24px; font-weight: 500; letter-spacing: .5em; text-indent: .5em; color: #111a33;
}
.bootbox .bootbox-input:focus { background: #fff; border-color: #2f6ff0; box-shadow: 0 0 0 3px rgba(47,111,240,.16); }
.bootbox .bootbox-input::-webkit-outer-spin-button, .bootbox .bootbox-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bootbox .bootbox-input { -moz-appearance: textfield; }
.bootbox .modal-footer { border: 0; justify-content: center; padding: 10px 24px 22px; }
.bootbox .modal-footer .btn { width: 100%; height: 44px; margin: 0; border: 0; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: linear-gradient(90deg,#2f6ff0,#5b4be6); color: #fff; }
.bootbox .modal-footer .btn:hover { filter: brightness(1.08); }
.bootbox .bootbox-body { font-size: 13px; color: #111a33; }   /* alerts: "Invalid Credentials" etc. */
.modal-backdrop.show { opacity: .5; background: #0b1230; }

/* ---------- V loader ---------- */
.vloader svg { width: 56px; height: 50px; overflow: visible; }
.vloader .p { transform-box: fill-box; transform-origin: center; animation: vload 1.2s ease-in-out infinite; }
.vloader .p:nth-child(2) { animation-delay: .1s; }
.vloader .p:nth-child(3) { animation-delay: .2s; }
.vloader .p:nth-child(4) { animation-delay: .3s; }
.vloader .p:nth-child(5) { animation-delay: .4s; }
.vloader .p:nth-child(6) { animation-delay: .5s; }
@keyframes vload { 0%,100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }