/* ============================================================
   FUTUREVERSE — PREMIUM SIGN IN EXPERIENCE
   Mobile-first | Desktop split layout
   CSS-only illustration | No SVG / PNG / JPG
   ============================================================ */

/* ======================== 01. DESIGN TOKENS ======================== */

:root {
  --fv-purple: #6037d5;
  --fv-purple-dark: #4921b5;
  --fv-violet: #8656f4;
  --fv-blue: #5274f3;
  --fv-blue-light: #8eb9ff;

  --fv-text: #171729;
  --fv-muted: #85869a;
  --fv-border: #e5e3ed;
  --fv-input: #fbfbfd;
  --fv-white: #ffffff;
  --fv-error: #dc3545;

  --fv-gradient: linear-gradient(
    105deg,
    #6338d5 0%,
    #6550df 46%,
    #5274f3 100%
  );

  --fv-radius: 17px;
  --fv-transition: 220ms ease;
  --fv-shadow: 0 24px 70px rgba(61, 47, 128, 0.10);
}

/* ======================== 02. RESET ======================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;

  color: var(--fv-text);
  background: #fff;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}

button,
input,
a {
  font: inherit;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(96, 55, 213, 0.28);
  outline-offset: 4px;
}

::selection {
  color: #fff;
  background: #6944d9;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ======================== 03. PAGE BACKGROUND ======================== */

.login-page {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(0, 1fr);

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(136, 102, 242, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(102, 124, 255, 0.09),
      transparent 27%
    ),
    #ffffff;
}

.login-page::before,
.login-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.login-page::before {
  width: 300px;
  height: 300px;
  top: -215px;
  right: -155px;

  background:
    radial-gradient(
      circle,
      rgba(146, 108, 245, 0.16),
      rgba(146, 108, 245, 0.015) 70%
    );
}

.login-page::after {
  width: 310px;
  height: 310px;
  left: -205px;
  bottom: -230px;

  background:
    radial-gradient(
      circle,
      rgba(110, 129, 247, 0.12),
      transparent 70%
    );
}

/* ======================== 04. LOGIN PANEL ======================== */

.login-panel {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  min-width: 0;
  max-width: 520px;

  margin: 0 auto;
  padding: 30px 21px 32px;
}

/* ======================== 05. BRAND ======================== */

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 11px;

  width: fit-content;
  margin: 0 auto 28px;

  color: var(--fv-purple);
}

.brand-symbol {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 33px;
  height: 33px;

  border-radius: 11px;
  background: var(--fv-gradient);

  box-shadow: 0 6px 16px rgba(96, 55, 213, 0.23);

  transform: rotate(-5deg);
}

.brand-symbol::before,
.brand-symbol::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  background: #fff;
}

.brand-symbol::before {
  width: 15px;
  height: 4px;
  top: 10px;
  left: 9px;
}

.brand-symbol::after {
  width: 4px;
  height: 13px;
  top: 10px;
  left: 9px;
}

.brand-symbol-inner {
  position: absolute;
  width: 12px;
  height: 4px;
  left: 12px;
  bottom: 8px;

  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
}

.brand-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1.5;
}

/* ======================== 06. HEADING ======================== */

.login-header {
  margin: 0 0 25px;
  text-align: center;
}

.welcome-label {
  margin: 0 0 9px;

  color: var(--fv-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
}

.login-header h1 {
  margin: 0;

  color: #171727;

  font-family:
    "Segoe UI",
    Inter,
    Arial,
    sans-serif;

  font-size: clamp(34px, 8vw, 43px);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.16;
}

.login-subtitle {
  max-width: 360px;
  margin: 10px auto 0;

  color: var(--fv-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

/* ======================== 07. FORM ======================== */

#loginForm {
  display: flex;
  flex-direction: column;
  gap: 15px;

  width: 100%;
  min-width: 0;
}

.form-group {
  width: 100%;
  min-width: 0;
}

.input-wrapper {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 61px;

  border: 1.5px solid var(--fv-border);
  border-radius: var(--fv-radius);

  background: var(--fv-input);

  transition:
    border-color var(--fv-transition),
    background var(--fv-transition),
    box-shadow var(--fv-transition);
}

.input-wrapper:hover {
  border-color: #d4c9f3;
}

.input-wrapper:focus-within {
  border-color: #8a70e2;
  background: #fff;

  box-shadow:
    0 0 0 4px rgba(96, 55, 213, 0.07);
}

.input-wrapper input {
  width: 100%;
  min-width: 0;
  height: 59px;

  padding: 0 17px 0 55px;

  border: 0;
  border-radius: inherit;
  outline: none;

  color: #202033;
  background: transparent;

  font-size: 15px;
  font-weight: 500;

  box-shadow: none;
}

.input-wrapper input::placeholder {
  color: #89899a;
  opacity: 1;
  font-weight: 400;
}

.input-wrapper input:focus {
  outline: none;
  box-shadow: none;
}

.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: #202033;
  transition: background-color 9999s ease-in-out 0s;
}

/* ======================== 08. EMAIL ICON ======================== */

.field-icon {
  position: absolute;
  z-index: 1;
  left: 18px;
  top: 50%;

  width: 23px;
  height: 23px;

  transform: translateY(-50%);
  pointer-events: none;
}

.email-icon {
  width: 23px;
  height: 17px;

  border: 2.3px solid #68697e;
  border-radius: 4px;
}

.email-icon::before,
.email-icon::after {
  content: "";
  position: absolute;
  top: 1px;

  width: 12px;
  height: 2px;

  background: #68697e;
  border-radius: 2px;
}

.email-icon::before {
  left: 0;
  transform: rotate(36deg);
  transform-origin: left center;
}

.email-icon::after {
  right: 0;
  transform: rotate(-36deg);
  transform-origin: right center;
}

/* ======================== 09. PASSWORD ICON ======================== */

/* CSS-drawn lock icon; no image required */

.password-icon {
  width: 22px;
  height: 24px;
}

.password-icon-body {
  position: absolute;
  left: 1px;
  bottom: 0;

  width: 20px;
  height: 15px;

  border: 2.4px solid #68697e;
  border-radius: 4px;
  background: transparent;
}

.password-icon-shackle {
  position: absolute;
  left: 5px;
  top: 0;

  width: 12px;
  height: 13px;

  border: 2.4px solid #68697e;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

/* ======================== 10. PASSWORD EYE ======================== */

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  padding: 0;
  border: 0;
  border-radius: 11px;

  color: #62647a;
  background: transparent;

  transform: translateY(-50%);

  transition:
    color var(--fv-transition),
    background var(--fv-transition);
}

.password-toggle:hover {
  color: var(--fv-purple);
  background: #f0ebff;
}

.password-toggle:active {
  background: #e9e1ff;
}

.eye-icon {
  position: relative;

  display: block;

  width: 24px;
  height: 17px;

  border: 2.4px solid currentColor;
  border-radius: 75% 25% / 70% 30%;

  transform: rotate(45deg) scale(0.94);
}

.eye-pupil {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 7px;
  height: 7px;

  border: 2px solid currentColor;
  border-radius: 50%;

  transform: translate(-50%, -50%);
}

/* ======================== 11. LOGIN OPTIONS ======================== */

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
  margin: 1px 0 2px;

  flex-wrap: wrap;
}

.remember-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  min-width: 0;

  color: #4f5064;
  font-size: 13px;
  line-height: 1.5;

  cursor: pointer;
}

.remember-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.custom-checkbox {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 21px;
  width: 21px;
  height: 21px;

  border: 1.5px solid #cfccd9;
  border-radius: 5px;

  background: #fff;

  transition:
    background var(--fv-transition),
    border-color var(--fv-transition);
}

.custom-checkbox span {
  width: 10px;
  height: 6px;

  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;

  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.remember-option input:checked + .custom-checkbox {
  border-color: var(--fv-purple);
  background: var(--fv-purple);
}

.remember-option input:checked + .custom-checkbox span {
  opacity: 1;
}

.remember-option input:focus-visible + .custom-checkbox {
  outline: 3px solid rgba(96, 55, 213, 0.24);
  outline-offset: 3px;
}

.forgot-password {
  flex-shrink: 0;

  color: var(--fv-purple-dark);
  font-size: 13px;
  font-weight: 600;

  transition: color var(--fv-transition);
}

.forgot-password:hover {
  color: var(--fv-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ======================== 12. ERROR MESSAGES ======================== */

.error-message {
  display: none;
  align-items: flex-start;
  gap: 7px;

  margin: 7px 2px 0;

  color: var(--fv-error);
  font-size: 12px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.error-message.show {
  display: flex;
}

.error-message.show::before {
  content: "!";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 15px;
  width: 15px;
  height: 15px;

  margin-top: 1px;

  border: 1.5px solid var(--fv-error);
  border-radius: 50%;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.input-wrapper.field-error {
  border-color: #e3a0a6;
  background: #fffafa;
  box-shadow: none;
  animation: none;
}

.login-message {
  display: none;

  margin: 0;
  padding: 11px 13px;

  border: 1px solid #f1c7cb;
  border-radius: 10px;

  color: #b42332;
  background: #fff7f7;

  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.login-message.show {
  display: block;
}

/* No shaking or blinking for validation */

.field-error,
.error-message,
.login-message {
  animation: none !important;
}

/* ======================== 13. SIGN IN BUTTON ======================== */

.primary-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 62px;

  margin-top: 2px;
  padding: 15px 58px;

  border: 0;
  border-radius: 16px;

  color: #fff;
  background: var(--fv-gradient);

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;

  box-shadow:
    0 13px 28px rgba(93, 63, 204, 0.19);

  transition:
    transform var(--fv-transition),
    box-shadow var(--fv-transition),
    filter var(--fv-transition);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);

  filter: saturate(1.07);

  box-shadow:
    0 17px 34px rgba(93, 63, 204, 0.25);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.button-arrow {
  position: absolute;
  right: 21px;

  font-size: 26px;
  font-weight: 400;
  line-height: 1;

  transition: transform var(--fv-transition);
}

.primary-button:hover:not(:disabled) .button-arrow {
  transform: translateX(3px);
}

.button-spinner {
  display: none;

  width: 18px;
  height: 18px;

  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;

  animation: fvSpin 0.7s linear infinite;
}

.primary-button.is-loading .button-spinner {
  display: inline-block;
}

.primary-button.is-loading .button-arrow {
  display: none;
}

.primary-button.is-loading .button-label {
  margin-right: 10px;
}

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

/* ======================== 14. DIVIDER ======================== */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  width: 100%;
  margin: 24px 0;

  color: #9393a3;
}

.divider span {
  flex: 1;
  height: 1px;
  background: #dedce7;
}

.divider p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* ======================== 15. OTP BUTTON ======================== */

.otp-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  min-height: 64px;

  padding: 13px 43px;

  border: 1.5px solid #ded8f1;
  border-radius: 17px;

  color: #202033;
  background: rgba(255, 255, 255, 0.82);

  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;

  box-shadow: 0 5px 17px rgba(65, 46, 130, 0.025);

  transition:
    border-color var(--fv-transition),
    background var(--fv-transition),
    box-shadow var(--fv-transition),
    transform var(--fv-transition);
}

.otp-button:hover {
  border-color: #bca9ef;
  background: #faf8ff;

  box-shadow: 0 8px 22px rgba(80, 51, 165, 0.07);
  transform: translateY(-1px);
}

.otp-button-icon {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 25px;
  width: 25px;
  height: 19px;

  border: 2.4px solid var(--fv-purple);
  border-radius: 4px;
}

.otp-button-icon::before,
.otp-button-icon::after {
  content: "";
  position: absolute;
  top: 1px;

  width: 13px;
  height: 2.3px;

  border-radius: 2px;
  background: var(--fv-purple);
}

.otp-button-icon::before {
  left: 0;
  transform: rotate(35deg);
  transform-origin: left center;
}

.otp-button-icon::after {
  right: 0;
  transform: rotate(-35deg);
  transform-origin: right center;
}

.otp-button-label {
  flex: 0 1 auto;
}

.otp-button-arrow {
  position: absolute;
  right: 17px;

  color: #56576b;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;

  transition: transform var(--fv-transition);
}

.otp-button:hover .otp-button-arrow {
  transform: translateX(3px);
}

/* ======================== 16. CREATE ACCOUNT ======================== */

.create-account {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;

  margin: 24px 0 0;

  color: #85869a;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.create-account a {
  color: var(--fv-purple-dark);
  font-weight: 650;

  transition: color var(--fv-transition);
}

.create-account a:hover {
  color: var(--fv-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ======================== 17. FOOTER ======================== */

.login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin-top: 26px;

  color: #a09fb0;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.footer-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: #8b70e5;
}

/* ============================================================
   18. CSS-ONLY FUTUREVERSE EDUCATION ILLUSTRATION
   No image assets
   ============================================================ */

.visual-panel {
  display: none;
}

/* ======================== DESKTOP ILLUSTRATION ======================== */

@media (min-width: 901px) {

  .login-page {
    grid-template-columns:
      minmax(430px, 0.91fr)
      minmax(430px, 1.09fr);

    align-items: stretch;

    min-height: 100vh;
    min-height: 100dvh;
  }

  .login-page::before {
    width: 440px;
    height: 440px;
    top: -300px;
    right: -210px;
  }

  .login-page::after {
    width: 420px;
    height: 420px;
    left: -280px;
    bottom: -290px;
  }

  .login-panel {
    justify-content: center;

    width: 100%;
    max-width: 610px;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0 auto;
    padding: 36px clamp(35px, 4vw, 68px);
  }

  .brand {
    align-self: flex-start;
    justify-content: flex-start;

    margin: 0 0 33px;
  }

  .login-header {
    margin-bottom: 25px;
    text-align: left;
  }

  .welcome-label {
    margin-bottom: 9px;
  }

  .login-header h1 {
    font-size: clamp(35px, 3vw, 45px);
  }

  .login-subtitle {
    margin: 10px 0 0;
    font-size: 14px;
  }

  #loginForm {
    gap: 14px;
  }

  .input-wrapper {
    min-height: 57px;
  }

  .input-wrapper input {
    height: 55px;
    font-size: 15px;
  }

  .primary-button {
    min-height: 57px;
  }

  .divider {
    margin: 20px 0;
  }

  .otp-button {
    min-height: 59px;
    font-size: 14px;
  }

  .create-account {
    justify-content: flex-start;
    margin-top: 19px;
    text-align: left;
  }

  .login-footer {
    justify-content: flex-start;
    margin-top: 22px;
    text-align: left;
  }

  /* Right visual area */

  .visual-panel {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 45px 28px 105px;

    overflow: hidden;

    background:
      radial-gradient(
        ellipse at 48% 39%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(247, 246, 255, 0.96) 34%,
        rgba(240, 241, 255, 0.98) 70%,
        rgba(248, 249, 255, 0.98) 100%
      );
  }

  .visual-panel::before,
  .visual-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
  }

  .visual-panel::before {
    width: 560px;
    height: 560px;
    top: -280px;
    right: -240px;

    background:
      radial-gradient(
        circle,
        rgba(139, 102, 246, 0.16),
        transparent 68%
      );
  }

  .visual-panel::after {
    width: 600px;
    height: 600px;
    bottom: -390px;
    left: -230px;

    background:
      radial-gradient(
        circle,
        rgba(83, 118, 246, 0.15),
        transparent 68%
      );
  }

  /* Atmospheric glows */

  .visual-background {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
  }

  .visual-glow-one {
    width: 400px;
    height: 400px;
    top: 17%;
    left: 50%;

    background:
      radial-gradient(
        circle,
        rgba(148, 119, 255, 0.13),
        transparent 68%
      );

    transform: translateX(-50%);
  }

  .visual-glow-two {
    width: 350px;
    height: 350px;
    top: 37%;
    left: 48%;

    background:
      radial-gradient(
        circle,
        rgba(91, 153, 255, 0.12),
        transparent 70%
      );

    transform: translateX(-50%);
  }

  /* ======================== 19. ORBIT SYSTEM ======================== */

  .orbit {
    position: absolute;
    z-index: 0;

    border: 1px solid rgba(121, 104, 226, 0.16);
    border-radius: 50%;

    pointer-events: none;
  }

  .orbit-one {
    width: min(78%, 590px);
    aspect-ratio: 1;

    top: 12%;
    left: 50%;

    transform: translateX(-50%) rotate(-24deg);
  }

  .orbit-two {
    width: min(86%, 650px);
    aspect-ratio: 1;

    top: 14%;
    left: 50%;

    border-color: rgba(86, 145, 243, 0.13);

    transform: translateX(-50%) rotate(34deg) scaleY(0.65);
  }

  .orbit-three {
    width: min(69%, 520px);
    aspect-ratio: 1;

    top: 17%;
    left: 50%;

    border-color: rgba(148, 104, 244, 0.12);

    transform: translateX(-50%) rotate(68deg) scaleY(0.74);
  }

  /* ======================== 20. FLOATING DETAILS ======================== */

  .floating-symbol {
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .symbol-star {
    top: 12%;
    left: 19%;

    color: #9870ef;
    font-size: 34px;

    text-shadow: 0 0 25px rgba(145, 105, 245, 0.4);

    animation: fvFloat 5s ease-in-out infinite;
  }

  .symbol-plus {
    top: 26%;
    right: 13%;

    color: #6188ee;
    font-size: 32px;
    font-weight: 300;

    animation: fvFloat 6s ease-in-out infinite reverse;
  }

  .symbol-dot {
    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: linear-gradient(135deg, #a56ef3, #5e78ef);

    box-shadow: 0 0 19px rgba(121, 101, 244, 0.35);
  }

  .dot-one {
    top: 31%;
    left: 12%;
  }

  .dot-two {
    top: 18%;
    right: 25%;

    width: 15px;
    height: 15px;
  }

  .dot-three {
    top: 49%;
    right: 12%;

    width: 8px;
    height: 8px;
  }

  /* ======================== 21. MAIN ART ======================== */

  .education-art {
    position: relative;

    width: min(100%, 540px);
    aspect-ratio: 1 / 0.92;

    flex: 0 0 auto;

    margin: -20px auto 8px;

    filter: drop-shadow(0 18px 35px rgba(76, 63, 166, 0.08));
  }

  /* ======================== 22. KNOWLEDGE PLANET ======================== */

  .knowledge-planet {
    position: absolute;
    z-index: 2;

    width: 43%;
    aspect-ratio: 1;

    top: 19%;
    left: 28.5%;

    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;

    background:
      radial-gradient(
        circle at 31% 23%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(221, 221, 255, 0.96) 8%,
        rgba(160, 141, 251, 0.96) 22%,
        rgba(101, 108, 242, 0.98) 46%,
        rgba(63, 86, 207, 0.98) 70%,
        rgba(40, 58, 159, 1) 100%
      );

    box-shadow:
      inset -19px -18px 38px rgba(33, 38, 123, 0.40),
      inset 10px 8px 25px rgba(255, 255, 255, 0.55),
      0 0 0 12px rgba(134, 110, 240, 0.045),
      0 0 0 26px rgba(109, 127, 242, 0.035),
      0 0 65px rgba(111, 101, 239, 0.25);

    overflow: hidden;
  }

  .knowledge-planet::before {
    content: "";
    position: absolute;
    inset: -5%;

    border-radius: 50%;

    background:
      repeating-linear-gradient(
        18deg,
        transparent 0,
        transparent 15px,
        rgba(255, 255, 255, 0.09) 16px,
        transparent 18px
      );

    opacity: 0.8;
  }

  .knowledge-planet::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
      linear-gradient(
        130deg,
        transparent 22%,
        rgba(255, 255, 255, 0.24) 40%,
        transparent 53%
      );
  }

  .planet-highlight {
    position: absolute;

    width: 38%;
    height: 22%;

    top: 9%;
    left: 12%;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.38);
    filter: blur(13px);
  }

  .planet-latitude {
    position: absolute;
    z-index: 2;

    left: -5%;
    width: 110%;
    height: 30%;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    transform: rotate(-14deg);
  }

  .latitude-one {
    top: 32%;
  }

  .latitude-two {
    top: 51%;
    transform: rotate(15deg);
  }

  .planet-longitude {
    position: absolute;
    z-index: 2;

    top: -5%;
    left: 23%;

    width: 54%;
    height: 110%;

    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;

    transform: rotate(25deg);
  }

  .longitude-two {
    left: 34%;
    transform: rotate(-25deg);
  }

  .planet-core {
    position: absolute;
    z-index: 3;

    width: 13%;
    aspect-ratio: 1;

    top: 42%;
    left: 43.5%;

    border-radius: 50%;

    background:
      radial-gradient(
        circle at 35% 30%,
        #fff,
        #d7e9ff 26%,
        #9bbaff 58%,
        #7867f0 100%
      );

    box-shadow:
      0 0 17px rgba(255, 255, 255, 0.9),
      0 0 34px rgba(114, 158, 255, 0.75);
  }

  .planet-light {
    position: absolute;
    width: 34%;
    height: 34%;
    top: 18%;
    left: 18%;

    border-radius: 50%;
    background: #fff;
  }

  /* ======================== 23. FLOATING GLASS TILES ======================== */

  .art-tile {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22%;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.94),
        rgba(238, 235, 255, 0.75)
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 14px 32px rgba(77, 63, 166, 0.12),
      0 0 0 5px rgba(255, 255, 255, 0.19);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .graduation-tile {
    top: 13%;
    left: 6%;

    width: 22%;
    aspect-ratio: 1;

    background:
      linear-gradient(
        145deg,
        rgba(178, 144, 255, 0.96),
        rgba(113, 85, 222, 0.91)
      );

    transform: rotate(-10deg);

    animation: fvFloat 6s ease-in-out infinite;
  }

  .document-tile {
    top: 13%;
    right: 5%;

    width: 22%;
    aspect-ratio: 1;

    background:
      linear-gradient(
        145deg,
        rgba(151, 204, 255, 0.96),
        rgba(96, 143, 237, 0.91)
      );

    transform: rotate(9deg);

    animation: fvFloat 6.8s ease-in-out infinite reverse;
  }

  .analytics-tile {
    top: 48%;
    right: 0%;

    width: 21%;
    aspect-ratio: 1;

    background:
      linear-gradient(
        145deg,
        #aa8cf6,
        #7354df
      );

    transform: rotate(8deg);

    animation: fvFloat 5.7s ease-in-out infinite;
  }

  .play-tile {
    top: 48%;
    left: 0%;

    width: 21%;
    aspect-ratio: 1;

    background:
      linear-gradient(
        145deg,
        #91c7ff,
        #537be9
      );

    transform: rotate(-8deg);

    animation: fvFloat 6.4s ease-in-out infinite reverse;
  }

  .book-tile {
    top: 64%;
    right: 12%;

    width: 21%;
    aspect-ratio: 1;

    background:
      linear-gradient(
        145deg,
        #b5a2ff,
        #7e70e9
      );

    transform: rotate(10deg);

    animation: fvFloat 5.5s ease-in-out infinite;
  }

  /* ======================== 24. CSS GRADUATION CAP ======================== */

  .graduation-cap {
    position: relative;
    width: 70%;
    height: 48%;
  }

  .cap-top {
    position: absolute;

    top: 12%;
    left: 2%;

    width: 96%;
    height: 52%;

    background: linear-gradient(135deg, #fff, #e8e7ff);

    clip-path: polygon(50% 0, 100% 48%, 50% 100%, 0 48%);

    filter: drop-shadow(0 3px 3px rgba(39, 28, 100, 0.12));
  }

  .cap-base {
    position: absolute;

    top: 55%;
    left: 20%;

    width: 60%;
    height: 26%;

    border-radius: 0 0 50% 50%;

    background: linear-gradient(180deg, #f8f7ff, #dcd9ff);
  }

  .cap-tassel {
    position: absolute;

    top: 39%;
    right: 1%;

    width: 3px;
    height: 40%;

    border-radius: 4px;
    background: #fff;

    transform: rotate(-4deg);
  }

  .cap-tassel::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -2px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #fff;
  }

  /* ======================== 25. CSS DOCUMENT ======================== */

  .document-paper {
    display: flex;
    flex-direction: column;
    gap: 9%;

    width: 49%;
    height: 63%;

    padding: 12% 10%;

    border-radius: 8%;

    background: linear-gradient(145deg, #fff, #f0f5ff);

    box-shadow: 0 4px 12px rgba(42, 77, 157, 0.15);
  }

  .document-paper span {
    display: block;

    width: 82%;
    height: 5px;

    border-radius: 5px;
    background: #8ca8ee;
  }

  .document-paper .document-heading {
    width: 64%;
    height: 7px;
    background: #6b65e6;
  }

  .document-paper span:last-child {
    width: 55%;
  }

  /* ======================== 26. CSS ANALYTICS CHART ======================== */

  .chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8%;

    width: 65%;
    height: 56%;

    padding-bottom: 3%;

    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  }

  .chart-bars span {
    display: block;

    width: 17%;
    height: 35%;

    border-radius: 5px 5px 1px 1px;

    background: linear-gradient(180deg, #fff, #dcd4ff);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  }

  .chart-bars span:nth-child(2) {
    height: 62%;
  }

  .chart-bars span:nth-child(3) {
    height: 46%;
  }

  .chart-bars span:nth-child(4) {
    height: 100%;
  }

  /* ======================== 27. CSS PLAY BUTTON ======================== */

  .play-triangle {
    width: 0;
    height: 0;

    margin-left: 6%;

    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 26px solid #fff;

    filter: drop-shadow(0 3px 3px rgba(34, 62, 140, 0.12));
  }

  /* ======================== 28. CSS OPEN BOOK ======================== */

  .open-book {
    position: relative;

    display: flex;
    align-items: flex-end;

    width: 70%;
    height: 48%;
  }

  .book-left,
  .book-right {
    position: relative;

    display: block;

    width: 50%;
    height: 84%;

    border: 1px solid rgba(98, 84, 196, 0.18);

    background: linear-gradient(145deg, #fff, #e8e8ff);
  }

  .book-left {
    border-radius: 8px 3px 3px 3px;
    transform: skewY(8deg);
    transform-origin: bottom right;
  }

  .book-right {
    border-radius: 3px 8px 3px 3px;
    transform: skewY(-8deg);
    transform-origin: bottom left;
  }

  .book-spine {
    position: absolute;

    left: calc(50% - 1px);
    bottom: 0;

    width: 2px;
    height: 88%;

    background: #a69af0;
    border-radius: 2px;
  }

  /* ======================== 29. ENERGY STREAMS ======================== */

  .energy-stream {
    position: absolute;
    z-index: 1;

    width: 90%;
    height: 15%;

    left: 5%;

    border-top: 2px solid rgba(145, 112, 246, 0.45);
    border-radius: 50%;

    pointer-events: none;

    filter: drop-shadow(0 0 5px rgba(130, 104, 255, 0.25));
  }

  .stream-one {
    top: 39%;
    transform: rotate(-13deg);
  }

  .stream-two {
    top: 47%;
    border-color: rgba(89, 154, 255, 0.40);
    transform: rotate(9deg);
  }

  .stream-three {
    top: 55%;
    border-color: rgba(171, 112, 255, 0.35);
    transform: rotate(-5deg);
  }

  /* ======================== 30. ILLUSTRATION CAPTION ======================== */

  .visual-caption {
    position: relative;
    z-index: 4;

    width: min(100%, 480px);

    margin: -2px auto 0;

    text-align: center;
  }

  .visual-eyebrow {
    margin: 0 0 13px;

    color: var(--fv-purple);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
  }

  .visual-caption h2 {
    margin: 0;

    color: #1d1b37;

    font-size: clamp(29px, 3vw, 39px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.22;
  }

  .visual-caption h2 span {
    color: transparent;

    background:
      linear-gradient(
        100deg,
        #6740d5,
        #5278ee,
        #8c5fe7
      );

    -webkit-background-clip: text;
    background-clip: text;
  }

  .visual-description {
    max-width: 370px;

    margin: 15px auto 0;

    color: #77798f;

    font-size: 13px;
    line-height: 1.8;
  }

  .visual-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 22px;
  }

  .visual-indicators span {
    width: 6px;
    height: 6px;

    border-radius: 20px;
    background: #d4cbed;
  }

  .visual-indicators .indicator-active {
    width: 23px;
    background: linear-gradient(90deg, #7045dc, #6880f0);
  }

  /* ======================== 31. LEARNING BADGE ======================== */

  .learning-badge {
    position: absolute;
    z-index: 5;

    right: 7%;
    bottom: 5%;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 17px;

    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.78);

    box-shadow: 0 12px 32px rgba(68, 54, 139, 0.09);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .badge-orb {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 11px;

    color: #fff;
    background: var(--fv-gradient);

    box-shadow: 0 5px 14px rgba(96, 55, 213, 0.2);
  }

  .badge-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .badge-copy strong {
    color: #27213f;
    font-size: 12px;
    font-weight: 750;
  }

  .badge-copy small {
    color: #88879a;
    font-size: 10px;
  }

}

/* ======================== 32. FLOAT ANIMATION ======================== */

@keyframes fvFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -9px;
  }
}

/* ============================================================
   33. MEDIUM DESKTOP
   ============================================================ */

@media (min-width: 901px) and (max-width: 1120px) {

  .login-page {
    grid-template-columns:
      minmax(390px, 0.96fr)
      minmax(360px, 1.04fr);
  }

  .login-panel {
    padding: 28px 35px;
  }

  .brand {
    margin-bottom: 25px;
  }

  .login-header h1 {
    font-size: 36px;
  }

  .visual-panel {
    padding-left: 20px;
    padding-right: 20px;
  }

  .education-art {
    width: min(100%, 455px);
  }

  .visual-caption h2 {
    font-size: 31px;
  }

  .learning-badge {
    right: 4%;
    bottom: 3%;
  }

}

/* ============================================================
   34. LAPTOP HEIGHT OPTIMIZATION
   ============================================================ */

@media (min-width: 901px) and (max-height: 790px) {

  .login-panel {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .brand {
    margin-bottom: 20px;
  }

  .login-header {
    margin-bottom: 18px;
  }

  .login-header h1 {
    font-size: 34px;
  }

  .login-subtitle {
    margin-top: 7px;
  }

  #loginForm {
    gap: 11px;
  }

  .input-wrapper {
    min-height: 51px;
  }

  .input-wrapper input {
    height: 49px;
  }

  .primary-button {
    min-height: 53px;
  }

  .divider {
    margin: 15px 0;
  }

  .otp-button {
    min-height: 53px;
  }

  .create-account {
    margin-top: 14px;
  }

  .login-footer {
    margin-top: 13px;
  }

  .education-art {
    width: min(100%, 430px);
    margin-top: -8px;
  }

  .visual-caption h2 {
    font-size: 30px;
  }

  .visual-caption .visual-description {
    margin-top: 10px;
  }

  .visual-indicators {
    margin-top: 14px;
  }

  .learning-badge {
    bottom: 2%;
  }

}

/* ============================================================
   35. TABLET / NARROW DESKTOP
   ============================================================ */

@media (min-width: 701px) and (max-width: 900px) {

  .login-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-panel {
    width: min(100%, 510px);
    max-width: 510px;

    min-height: 100vh;
    min-height: 100dvh;

    justify-content: center;

    padding: 32px 30px;
  }

  .brand {
    margin-bottom: 28px;
  }

  .visual-panel {
    display: none;
  }

  .login-header h1 {
    font-size: 40px;
  }

  .input-wrapper {
    min-height: 58px;
  }

  .input-wrapper input {
    height: 56px;
  }

}

/* ============================================================
   36. MOBILE — REFERENCE-INSPIRED LAYOUT
   ============================================================ */

@media (max-width: 700px) {

  .login-page {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 0;
  }

  .login-panel {
    width: 100%;
    max-width: 520px;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0 auto;

    padding:
      28px
      20px
      30px;

    justify-content: flex-start;
  }

  .brand {
    align-self: center;
    margin-bottom: 27px;
  }

  .brand-symbol {
    width: 29px;
    height: 29px;
    border-radius: 9px;
  }

  .brand-symbol::before {
    top: 8px;
    left: 8px;
  }

  .brand-symbol::after {
    top: 8px;
    left: 8px;
  }

  .brand-symbol-inner {
    left: 11px;
    bottom: 7px;
  }

  .brand-text {
    font-size: 12px;
    letter-spacing: 3.5px;
  }

  .login-header {
    margin-bottom: 25px;
    text-align: center;
  }

  .welcome-label {
    display: none;
  }

  .login-header h1 {
    font-size: clamp(34px, 8.6vw, 44px);
    letter-spacing: -1.2px;
  }

  .login-subtitle {
    max-width: 340px;
    margin-top: 9px;

    font-size: 14px;
    line-height: 1.6;
  }

  #loginForm {
    gap: 16px;
  }

  .input-wrapper {
    min-height: 63px;
    border-radius: 17px;
  }

  .input-wrapper input {
    height: 61px;
    padding-left: 56px;
    padding-right: 14px;

    font-size: 15px;
  }

  .field-icon {
    left: 18px;
  }

  .password-toggle {
    right: 9px;
  }

  .login-options {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 1px;
  }

  .remember-option {
    gap: 8px;
    font-size: 13px;
  }

  .custom-checkbox {
    flex-basis: 21px;
    width: 21px;
    height: 21px;
  }

  .forgot-password {
    font-size: 13px;
  }

  .primary-button {
    min-height: 64px;
    margin-top: 2px;
    border-radius: 17px;
    font-size: 17px;
  }

  .primary-button .button-arrow {
    right: 20px;
  }

  .divider {
    gap: 15px;
    margin: 27px 0;
  }

  .divider p {
    font-size: 14px;
  }

  .otp-button {
    min-height: 65px;
    padding: 13px 38px;

    gap: 10px;
    border-radius: 17px;

    font-size: 14px;
    line-height: 1.5;
  }

  .otp-button-icon {
    flex-basis: 24px;
    width: 24px;
  }

  .otp-button-arrow {
    right: 13px;
    font-size: 23px;
  }

  .create-account {
    gap: 5px;
    margin-top: 24px;
    font-size: 13px;
  }

  .login-footer {
    margin-top: 25px;
    font-size: 10px;
  }

  /* Illustration is CSS-only; the desktop illustration is not shown
     on mobile, keeping the reference-style login layout compact. */

  .visual-panel {
    display: none;
  }

}

/* ============================================================
   37. SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

  .login-panel {
    padding: 23px 15px 26px;
  }

  .brand {
    margin-bottom: 24px;
  }

  .brand-text {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .login-header {
    margin-bottom: 22px;
  }

  .login-header h1 {
    font-size: 32px;
  }

  .login-subtitle {
    font-size: 12.5px;
  }

  #loginForm {
    gap: 14px;
  }

  .input-wrapper {
    min-height: 58px;
  }

  .input-wrapper input {
    height: 56px;
    font-size: 14px;
  }

  .remember-option,
  .forgot-password {
    font-size: 11px;
  }

  .remember-option {
    gap: 6px;
  }

  .custom-checkbox {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
  }

  .primary-button {
    min-height: 59px;
    font-size: 16px;
  }

  .divider {
    margin: 23px 0;
  }

  .otp-button {
    min-height: 59px;
    padding-left: 29px;
    padding-right: 34px;
    font-size: 12px;
  }

  .otp-button-arrow {
    right: 10px;
    font-size: 21px;
  }

  .create-account {
    margin-top: 20px;
    font-size: 11.5px;
  }

  .login-footer {
    margin-top: 22px;
    font-size: 9px;
  }

}

/* ============================================================
   38. EXTRA-SHORT MOBILE SCREENS
   ============================================================ */

@media (max-width: 700px) and (max-height: 720px) {

  .login-panel {
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .brand {
    margin-bottom: 18px;
  }

  .login-header {
    margin-bottom: 18px;
  }

  .login-header h1 {
    font-size: 32px;
  }

  .login-subtitle {
    margin-top: 6px;
  }

  #loginForm {
    gap: 12px;
  }

  .input-wrapper {
    min-height: 54px;
  }

  .input-wrapper input {
    height: 52px;
  }

  .primary-button {
    min-height: 55px;
  }

  .divider {
    margin: 19px 0;
  }

  .otp-button {
    min-height: 56px;
  }

  .create-account {
    margin-top: 17px;
  }

  .login-footer {
    margin-top: 17px;
  }

}

/* ============================================================
   39. ACCESSIBILITY / REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

}

/* ============================================================
   END — FUTUREVERSE MAIN PAGE STYLES
   ============================================================ */

   /* ===== FUTUREVERSE LEFT CONTENT: MOVE UP ===== */

@media (min-width: 901px) {
  .login-panel {
    justify-content: flex-start;
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .brand {
    margin-bottom: 22px;
  }

  .login-header {
    margin-bottom: 19px;
  }

  #loginForm {
    gap: 11px;
  }

  .divider {
    margin: 16px 0;
  }

  .create-account {
    margin-top: 16px;
  }

  .login-footer {
    margin-top: 15px;
  }
}

/* Short PC screens: fit the full form */

@media (min-width: 901px) and (max-height: 800px) {
  .login-panel {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .brand {
    margin-bottom: 16px;
  }

  .login-header {
    margin-bottom: 14px;
  }

  .login-header h1 {
    font-size: 33px;
  }

  .login-subtitle {
    margin-top: 6px;
  }

  #loginForm {
    gap: 9px;
  }

  .input-wrapper {
    min-height: 49px;
  }

  .input-wrapper input {
    height: 47px;
  }

  .primary-button {
    min-height: 50px;
  }

  .divider {
    margin: 12px 0;
  }

  .otp-button {
    min-height: 49px;
  }

  .create-account {
    margin-top: 11px;
  }

  .login-footer {
    margin-top: 10px;
  }
}











/* ==================================================
   FUTUREVERSE — MOBILE DESIGN OVERRIDE
   Compact inputs | Reference-inspired spacing
   Desktop CSS unchanged
   ================================================== */

@media (max-width: 700px) {

  /* Main page */
  .login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
  }

  /* Form content */
  .login-panel {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0 auto;
    padding: 24px 20px 25px;

    justify-content: flex-start;
  }

  /* Brand */
  .brand {
    align-self: center;
    margin: 0 auto 24px;
    gap: 10px;
  }

  .brand-symbol {
    width: 29px;
    height: 29px;
    border-radius: 9px;
  }

  .brand-text {
    font-size: 12px;
    letter-spacing: 3.5px;
  }

  /* Welcome Back */
  .login-header {
    margin: 0 0 25px;
    text-align: center;
  }

  .welcome-label {
    display: none;
  }

  .login-header h1 {
    font-size: clamp(32px, 8vw, 39px);
    line-height: 1.18;
    letter-spacing: -1.1px;
  }

  .login-subtitle {
    max-width: 360px;
    margin: 8px auto 0;
    font-size: 14px;
    line-height: 1.55;
  }

  /* Form spacing */
  #loginForm {
    width: 100%;
    gap: 13px;
  }

  .form-group {
    width: 100%;
  }

  /* Compact email and password boxes */
  .input-wrapper {
    width: 100%;
    min-height: 56px;
    border-width: 1.5px;
    border-radius: 15px;
  }

  .input-wrapper input {
    width: 100%;
    height: 54px;

    padding: 0 48px 0 52px;

    font-size: 15px;
  }

  /* Email icon */
  .field-icon {
    left: 17px;
    transform: translateY(-50%) scale(0.92);
    transform-origin: center;
  }

  /* Password visibility button */
  .password-toggle {
    right: 7px;
    width: 37px;
    height: 37px;
  }

  .eye-icon {
    transform: rotate(45deg) scale(0.9);
  }

  /* Keep me signed in + Forgot password */
  .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;

    margin: 1px 0 2px;
  }

  .remember-option {
    gap: 8px;
    font-size: 13px;
  }

  .custom-checkbox {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    border-radius: 5px;
  }

  .forgot-password {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Sign In button */
  .primary-button {
    width: 100%;
    min-height: 57px;

    margin-top: 1px;
    padding: 13px 48px;

    border-radius: 15px;
    font-size: 17px;
  }

  .button-arrow {
    right: 18px;
    font-size: 24px;
  }

  /* OR divider */
  .divider {
    width: 100%;
    gap: 14px;
    margin: 23px 0;
  }

  .divider span {
    height: 1px;
  }

  .divider p {
    font-size: 14px;
  }

  /* Continue with OTP */
  .otp-button {
    width: 100%;
    min-height: 58px;

    gap: 10px;
    padding: 12px 37px;

    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .otp-button-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 19px;
  }

  .otp-button-label {
    flex: 0 1 auto;
    text-align: center;
  }

  .otp-button-arrow {
    right: 12px;
    font-size: 22px;
  }

  /* Create New Account */
  .create-account {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;

    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
  }

  .create-account a {
    font-weight: 650;
  }

  /* Footer */
  .login-footer {
    justify-content: center;
    margin-top: 24px;
    font-size: 10px;
    text-align: center;
  }

  /* Hide desktop illustration completely on mobile.
     No illustration movement or animation. */
  .visual-panel {
    display: none !important;
  }

}

/* Smaller phones */
@media (max-width: 380px) {

  .login-panel {
    padding: 21px 15px 23px;
  }

  .brand {
    margin-bottom: 21px;
  }

  .login-header {
    margin-bottom: 21px;
  }

  .login-header h1 {
    font-size: 31px;
  }

  .login-subtitle {
    font-size: 12.5px;
  }

  #loginForm {
    gap: 12px;
  }

  .input-wrapper {
    min-height: 53px;
    border-radius: 14px;
  }

  .input-wrapper input {
    height: 51px;
    padding-left: 48px;
    font-size: 14px;
  }

  .field-icon {
    left: 15px;
  }

  .remember-option,
  .forgot-password {
    font-size: 11px;
  }

  .remember-option {
    gap: 6px;
  }

  .custom-checkbox {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
  }

  .primary-button {
    min-height: 53px;
    font-size: 16px;
  }

  .divider {
    margin: 20px 0;
  }

  .otp-button {
    min-height: 54px;
    gap: 8px;
    padding: 10px 32px;
    font-size: 11.5px;
  }

  .otp-button-arrow {
    right: 9px;
    font-size: 20px;
  }

  .create-account {
    margin-top: 19px;
    font-size: 11.5px;
  }

  .login-footer {
    margin-top: 20px;
    font-size: 9px;
  }

}

/* Short mobile screens: reduce vertical gaps */
@media (max-width: 700px) and (max-height: 760px) {

  .login-panel {
    padding-top: 17px;
    padding-bottom: 18px;
  }

  .brand {
    margin-bottom: 17px;
  }

  .login-header {
    margin-bottom: 17px;
  }

  .login-header h1 {
    font-size: 31px;
  }

  .login-subtitle {
    margin-top: 6px;
  }

  #loginForm {
    gap: 10px;
  }

  .input-wrapper {
    min-height: 51px;
  }

  .input-wrapper input {
    height: 49px;
  }

  .primary-button {
    min-height: 51px;
  }

  .divider {
    margin: 17px 0;
  }

  .otp-button {
    min-height: 51px;
  }

  .create-account {
    margin-top: 17px;
  }

  .login-footer {
    margin-top: 17px;
  }

}

/* Disable floating animation on any mobile viewport */
@media (max-width: 900px) {

  .visual-panel,
  .visual-panel *,
  .education-art,
  .art-tile,
  .knowledge-planet,
  .floating-symbol {
    animation: none !important;
    transition: none !important;
  }

}







/* ==========================================================
   FUTUREVERSE — ACADEMIC ILLUSTRATION v FINAL
   Profile + Academic Document + Open Book + Graduation Cap
   Pure CSS | No SVG | No PNG | No JPG | No animation
   ========================================================== */

@media (max-width: 700px) {

  /* ---------- 1. ILLUSTRATION AREA ---------- */

  .visual-panel {
    order: -1 !important;
    position: relative !important;
    isolation: isolate;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    flex: 0 0 150px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Soft glow blends into the login page */
  .visual-panel::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 290px;
    height: 150px;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    border-radius: 50%;

    background:
      radial-gradient(
        ellipse at 50% 65%,
        rgba(116, 79, 231, .15),
        transparent 65%
      ),
      radial-gradient(
        ellipse at 85% 15%,
        rgba(185, 167, 255, .16),
        transparent 55%
      );
  }

  .visual-panel::after {
    content: "";
    position: absolute;
    z-index: -1;

    width: 180px;
    height: 60px;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);

    border-radius: 50%;
    background: rgba(115, 83, 225, .08);
    filter: blur(12px);
  }

  /* ---------- 2. ARTWORK CANVAS ---------- */

  .education-art {
    position: relative !important;
    display: block !important;

    width: min(100%, 300px) !important;
    height: 138px !important;
    flex: 0 0 auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    inset: auto !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;

    /*
      BACKGROUND LAYERS:
      1. Decorative dots
      2. Profile icon circle and person
      3. Academic document
      4. Document text lines
    */

    background:

      /* Small floating dots */
      radial-gradient(
        circle at 31% 28%,
        #bba8ff 0 3px,
        transparent 4px
      ),

      radial-gradient(
        circle at 37% 24%,
        #9475ee 0 4px,
        transparent 5px
      ),

      radial-gradient(
        circle at 43% 24%,
        #7652dc 0 5px,
        transparent 6px
      ),

      /* Profile: white head */
      radial-gradient(
        circle at 30% 43%,
        #ffffff 0 7px,
        transparent 8px
      ),

      /* Profile: white shoulders/body */
      radial-gradient(
        ellipse at 30% 57%,
        #ffffff 0 12px,
        transparent 13px
      ),

      /* Profile: purple circular badge */
      radial-gradient(
        circle at 30% 49%,
        #8a69ed 0 26px,
        #6540d4 27px 32px,
        transparent 33px
      ),

      /* Document surface */
      linear-gradient(
        145deg,
        #ffffff,
        #f8f6ff
      ) 43% 20% / 43% 59% no-repeat,

      /* Document profile thumbnail */
      linear-gradient(
        145deg,
        #d9ceff,
        #b8a4ff
      ) 47% 29% / 8% 15% no-repeat,

      /* Document heading */
      linear-gradient(
        90deg,
        #9275e9,
        #b5a5f6
      ) 60% 30% / 20% 4px no-repeat,

      /* Document text */
      linear-gradient(
        90deg,
        #b4a4f3,
        #d5ccff
      ) 61% 39% / 27% 4px no-repeat,

      linear-gradient(
        90deg,
        #b4a4f3,
        #d5ccff
      ) 61% 47% / 27% 4px no-repeat,

      linear-gradient(
        90deg,
        #c8bdf8,
        #e3dcff
      ) 61% 55% / 21% 4px no-repeat;

    animation: none !important;
    transition: none !important;
  }

  /* ---------- 3. OPEN BOOK IN FOREGROUND ---------- */

  .education-art::before {
    content: "";
    position: absolute;
    z-index: 3;

    left: 25%;
    top: 65%;

    width: 51%;
    height: 27%;

    border-radius: 5px 5px 12px 12px;

    /*
      Separate layers form the left and right pages,
      page lines, center crease and purple cover.
    */

    background:

      /* Left-page text */
      repeating-linear-gradient(
        180deg,
        transparent 0 5px,
        #d2c5ff 5px 7px
      ) 20% 30% / 48% 50% no-repeat,

      /* Right-page text */
      repeating-linear-gradient(
        180deg,
        transparent 0 5px,
        #d2c5ff 5px 7px
      ) 80% 30% / 48% 50% no-repeat,

      /* Left page */
      linear-gradient(
        160deg,
        #ffffff,
        #eee8ff
      ) left top / 50% 78% no-repeat,

      /* Right page */
      linear-gradient(
        200deg,
        #ffffff,
        #e7deff
      ) right top / 50% 78% no-repeat,

      /* Lower purple cover */
      linear-gradient(
        180deg,
        #9475ef,
        #5834ce
      ) center bottom / 100% 25% no-repeat;

    clip-path: polygon(
      0 27%,
      42% 8%,
      50% 22%,
      58% 8%,
      100% 27%,
      100% 77%,
      58% 69%,
      50% 100%,
      42% 69%,
      0 77%
    );

    filter: drop-shadow(
      0 5px 5px rgba(68, 42, 151, .16)
    );

    animation: none !important;
    transition: none !important;
  }

  /* ---------- 4. GRADUATION CAP ---------- */

  .education-art::after {
    content: "";
    position: absolute;
    z-index: 4;

    left: 66%;
    top: 7%;

    width: 26%;
    height: 37%;

    background:

      /* Gold tassel tip */
      radial-gradient(
        circle at 89% 91%,
        #f5b844 0 3px,
        transparent 4px
      ),

      /* Gold tassel string */
      linear-gradient(
        180deg,
        #e9ae35,
        #f2c65f
      ) 89% 48% / 2px 48% no-repeat,

      /* Cap lower band */
      linear-gradient(
        180deg,
        #7550e5,
        #4b2ab8
      ) 50% 62% / 62% 27% no-repeat,

      /* Cap top surface */
      linear-gradient(
        155deg,
        #a994ff 0%,
        #8059ec 45%,
        #5933cf 100%
      );

    clip-path: polygon(
      0 28%,
      50% 0,
      100% 28%,
      52% 54%,
      0 28%,
      14% 43%,
      16% 68%,
      35% 83%,
      66% 83%,
      85% 68%,
      87% 43%,
      52% 64%
    );

    filter: drop-shadow(
      0 5px 6px rgba(70, 44, 169, .19)
    );

    animation: none !important;
    transition: none !important;
  }

  /* ---------- 5. REMOVE OLD ILLUSTRATION PARTS ---------- */

  .knowledge-planet,
  .planet-highlight,
  .planet-latitude,
  .planet-longitude,
  .planet-core,
  .energy-stream,
  .graduation-tile,
  .document-tile,
  .analytics-tile,
  .play-tile,
  .book-tile,
  .visual-background,
  .orbit,
  .visual-caption,
  .learning-badge,
  .open-book,
  .book-left,
  .book-right,
  .book-spine,
  .graduation-cap,
  .cap-top,
  .cap-base,
  .cap-tassel {
    display: none !important;
  }

  /* Remove old decorative stars that looked unrelated */
  .symbol-star,
  .symbol-plus,
  .symbol-dot,
  .dot-one,
  .dot-two,
  .dot-three {
    display: none !important;
  }

  /* Do not create a separate card around the login form */
  .login-panel {
    position: relative;
    z-index: 1;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Entire artwork stays still */
  .visual-panel *,
  .education-art,
  .education-art::before,
  .education-art::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 6. SMALL PHONES ---------- */

@media (max-width: 380px) {

  .visual-panel {
    height: 128px !important;
    min-height: 128px !important;
    flex-basis: 128px !important;
  }

  .education-art {
    width: min(100%, 270px) !important;
    height: 120px !important;
  }
}









/* =====================================================
   FUTUREVERSE DESKTOP LOGIN — FINAL LAYOUT OVERRIDE
   Left: Welcome panel | Right: Login form
   ===================================================== */

@media screen and (min-width: 901px) {

  html,
  body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  body {
    min-height: 100vh;
    background: #f0f4ff;
  }

  /* One unified rounded box */
  .login-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;

    width: min(1380px, calc(100% - 64px)) !important;
    height: calc(100vh - 64px) !important;
    min-height: 650px !important;

    margin: 32px auto !important;
    padding: 0 !important;

    overflow: hidden !important;
    border: 1px solid #e0e7f8 !important;
    border-radius: 24px !important;

    background: #ffffff !important;
    box-shadow: 0 24px 75px rgba(28, 56, 117, 0.13) !important;
  }

  /* LEFT: Welcome to FutureVerse */
  .visual-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 0 !important;

    position: relative !important;
    isolation: isolate !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 35px 30px !important;
    overflow: hidden !important;

    color: #ffffff !important;
    background:
      radial-gradient(
        circle at 85% 15%,
        rgba(88, 155, 255, 0.35),
        transparent 32%
      ),
      radial-gradient(
        circle at 10% 90%,
        rgba(59, 117, 240, 0.35),
        transparent 38%
      ),
      linear-gradient(145deg, #10265d, #17499f 58%, #2368cf) !important;
  }

  /* Decorative shapes inspired by the reference */
  .visual-panel::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 340px;
    height: 340px;
    top: -160px;
    right: -130px;

    border-radius: 44% 56% 62% 38%;
    background: rgba(255, 255, 255, 0.07);
    transform: rotate(28deg);
  }

  .visual-panel::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 280px;
    height: 280px;
    bottom: -150px;
    left: -110px;

    border-radius: 50%;
    background: rgba(90, 157, 255, 0.13);
    pointer-events: none;
  }

  /* Left-side logo */
  .visual-panel .brand {
    position: absolute !important;
    top: 35px !important;
    left: 35px !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    color: #ffffff !important;
  }

  .visual-panel .brand-text {
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }

  .visual-panel .brand-symbol {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
  }

  /* Keep the existing CSS academic illustration */
  .education-art {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    width: min(90%, 450px) !important;
    height: auto !important;
    aspect-ratio: 1 / 0.82 !important;
    flex: 0 1 auto !important;

    margin: 0 auto 10px !important;
    transform: none !important;
  }

  /* Hide old extra caption; show the required welcome text */
  .visual-panel .visual-caption {
    display: none !important;
  }

  .visual-panel .welcome-copy {
    display: block !important;
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 430px;
    margin: 10px auto 0;
    text-align: left;
  }

  .visual-panel .welcome-copy h2 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
  }

  .visual-panel .welcome-copy p {
    max-width: 360px;
    margin: 0;
    color: rgba(255, 255, 255, 0.77);
    font-size: 15px;
    line-height: 1.8;
  }

  /* RIGHT: Complete login flow */
  .login-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 25px clamp(30px, 4vw, 65px) !important;

    overflow: hidden !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .login-panel > .brand {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 0 20px !important;
  }

  .login-header {
    margin: 0 0 20px !important;
    text-align: left !important;
  }

  .welcome-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #3767cc !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
  }

  .login-header h1 {
    margin: 0 !important;
    color: #17213a !important;
    font-size: clamp(30px, 2.5vw, 39px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
  }

  .login-subtitle {
    margin: 8px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #818ba2 !important;
  }

  #loginForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    width: 100% !important;
  }

  .input-wrapper {
    min-height: 51px !important;
    border-radius: 11px !important;
    background: #f8faff !important;
    border-color: #dce4f4 !important;
  }

  .input-wrapper input {
    height: 49px !important;
    font-size: 14px !important;
  }

  .login-options {
    margin: 0 !important;
    gap: 8px !important;
  }

  .remember-option,
  .forgot-password {
    font-size: 12px !important;
  }

  .primary-button {
    min-height: 52px !important;
    margin-top: 1px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }

  .divider {
    margin: 14px 0 !important;
  }

  .divider p {
    font-size: 12px !important;
  }

  .otp-button {
    min-height: 52px !important;
    padding: 10px 34px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  .create-account {
    justify-content: flex-start !important;
    margin: 16px 0 0 !important;
    font-size: 12px !important;
    text-align: left !important;
  }

  .login-footer {
    justify-content: flex-start !important;
    margin-top: 13px !important;
    font-size: 10px !important;
    text-align: left !important;
  }

  /* No movement in the illustration */
  .visual-panel *,
  .education-art,
  .education-art::before,
  .education-art::after {
    animation: none !important;
  }
}

/* Shorter PC/laptop screens */
@media screen and (min-width: 901px) and (max-height: 760px) {
  .login-page {
    height: calc(100vh - 32px) !important;
    min-height: 0 !important;
    margin: 16px auto !important;
  }

  .login-panel {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .login-panel > .brand {
    margin-bottom: 13px !important;
  }

  .login-header {
    margin-bottom: 13px !important;
  }

  #loginForm {
    gap: 8px !important;
  }

  .divider {
    margin: 10px 0 !important;
  }

  .create-account {
    margin-top: 11px !important;
  }

  .login-footer {
    margin-top: 9px !important;
  }

  .education-art {
    width: min(85%, 370px) !important;
  }
}















/* Hide welcome text on mobile only */
@media screen and (max-width: 700px) {
  .welcome-copy {
    display: none !important;
  }
}









/* =========================================
   FUTUREVERSE — PASSWORD EYE ICON FIX
========================================= */

.password-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #68677b !important;
  box-shadow: none !important;
  outline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease !important;
}

.password-toggle:hover {
  background: transparent !important;
  color: #6039d4 !important;
}

.password-toggle:active {
  background: transparent !important;
  box-shadow: none !important;
}

.password-toggle[aria-pressed="false"] {
  background: transparent !important;
  color: #68677b !important;
}

.password-toggle[aria-pressed="true"] {
  background: transparent !important;
  color: #6039d4 !important;
}

.password-toggle .eye-icon {
  display: block;
  width: 23px;
  height: 23px;
  pointer-events: none;
}

.password-toggle .eye-hidden {
  display: none;
}

.password-toggle[aria-pressed="true"] .eye-visible {
  display: none;
}

.password-toggle[aria-pressed="true"] .eye-hidden {
  display: block;
}

/* =========================================
   KEEP ME SIGNED IN — NO TEXT FLASH
========================================= */

.remember-option {
  -webkit-tap-highlight-color: transparent !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.remember-option > span:last-child {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.remember-option:hover,
.remember-option:active,
.remember-option:focus-within {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.remember-option > .custom-checkbox {
  animation: none !important;
  transform: none !important;
}

/* Only the checkbox's checked state changes */
#rememberMe {
  animation: none !important;
  transform: none !important;
}




/* Password Eye — SVG Icon */

.password-toggle {
  background: transparent;
  color: #62647a;
  border: none;
  box-shadow: none;
}

.password-toggle:hover,
.password-toggle:active {
  background: transparent;
  box-shadow: none;
}

.password-toggle .eye-icon {
  display: block;
  width: 23px;
  height: 23px;
  border: none;
  border-radius: 0;
  transform: none;
}


.remember-option {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.remember-option > span {
  -webkit-tap-highlight-color: transparent;
}

.remember-option:active {
  background: transparent;
}



/* Password eye: correct slash direction and default state */

#togglePassword .eye-icon {
  width: 23px !important;
  height: 23px !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Initially: password hidden, crossed eye visible */
#togglePassword[aria-pressed="false"] .eye-visible {
  display: none !important;
}

#togglePassword[aria-pressed="false"] .eye-hidden {
  display: block !important;
}

/* On click: password visible, normal eye visible */
#togglePassword[aria-pressed="true"] .eye-visible {
  display: block !important;
}

#togglePassword[aria-pressed="true"] .eye-hidden {
  display: none !important;
}

/* Cross-line: top-left to bottom-right */
#togglePassword .eye-hidden path:first-child {
  d: path("M3 3 L21 21");
}
/* Eye slash direction: / */

#togglePassword .eye-hidden path:first-child {
  d: path("M3 21 L21 3") !important;
}