* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #2C2A4A;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
    }

    .signup-container {
      background: rgba(255, 255, 255, 0.98);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      width: 100%;
      max-width: 800px;
      display: flex;
      min-height: 500px;
      backdrop-filter: blur(8px);
    }

    .left-section {
      flex: 1;
      background: linear-gradient(135deg, #2C2A4A 0%, #3F3D7A 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .left-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
      animation: rotate 15s linear infinite;
    }

    .geometric-pattern {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
    }

    .logo-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      animation: float 4s ease-in-out infinite;
    }

    .logo-inner {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #2C2A4A;
    }

    .welcome-text {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .welcome-subtitle {
      font-size: 13px;
      opacity: 0.85;
      font-weight: 400;
    }

    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 30%;
      animation: float-shapes 5s ease-in-out infinite;
    }

    .shape:nth-child(1) {
      width: 60px;
      height: 60px;
      top: 15%;
      left: 25%;
      animation-delay: 0s;
    }

    .shape:nth-child(2) {
      width: 40px;
      height: 40px;
      top: 55%;
      right: 20%;
      animation-delay: 1.5s;
    }

    .shape:nth-child(3) {
      width: 25px;
      height: 25px;
      bottom: 25%;
      left: 10%;
      animation-delay: 3s;
    }

    .right-section {
      flex: 1;
      padding: 25px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: white;
    }

    .form-header {
      text-align: center;
      margin-bottom: 15px;
    }

    .form-header h2 {
      font-size: 22px;
      font-weight: 700;
      color: #2C2A4A;
      margin-bottom: 5px;
    }

    .form-header p {
      color: #5C5B7C;
      font-size: 12px;
      font-weight: 500;
    }

    .form-group {
      margin-bottom: 12px;
      position: relative;
    }

    .form-row {
      display: flex;
      gap: 8px;
    }

    .form-row .form-group {
      flex: 1;
    }

    .form-control {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #D8D8E8;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: #F6F6FA;
      color: #2C2A4A;
    }

    .form-control::placeholder {
      color: #8D8DB4;
      font-weight: 500;
    }

    .form-control:focus {
      outline: none;
      border-color: #3F3D7A;
      background: white;
      box-shadow: 0 0 0 3px rgba(63, 61, 122, 0.1);
      transform: translateY(-1px);
    }

    .form-control.error {
      border-color: #D32F2F;
      background: #FFF5F5;
    }

    .password-field {
      position: relative;
    }

    .password-field .form-control {
      padding-right: 35px;
    }

    .eye-button {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5C5B7C;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .eye-button:hover {
      color: #2C2A4A;
      background: rgba(0, 0, 0, 0.05);
    }

    .eye-icon {
      width: 16px;
      height: 16px;
    }

    .error-message {
      color: #D32F2F;
      font-size: 11px;
      font-weight: 500;
      margin-top: 3px;
      display: block !important;
      /* Force display */
    }

    .referral-toggle {
      text-align: center;
      margin-bottom: 12px;
    }

    .referral-link {
      color: #3F3D7A;
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 5px 10px;
      border-radius: 6px;
      display: inline-block;
    }

    .referral-link:hover {
      color: #2C2A4A;
      background: rgba(63, 61, 122, 0.1);
      transform: translateY(-1px);
    }

    .referral-field {
      max-height: 0;
      overflow: hidden;
      margin-bottom: 0;
      opacity: 0;
      transform: translateY(-15px);
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .referral-field.show {
      max-height: 80px;
      margin-bottom: 12px;
      opacity: 1;
      transform: translateY(0);
    }

    .btn-primary {
      width: 100%;
      padding: 10px;
      background: linear-gradient(135deg, #3F3D7A 0%, #2C2A4A 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    .btn-primary:hover::before {
      left: 100%;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 15px rgba(63, 61, 122, 0.3);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .divider {
      display: flex;
      align-items: center;
      margin: 12px 0;
      color: #8D8DB4;
      font-size: 12px;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #D8D8E8;
    }

    .divider span {
      padding: 0 15px;
      font-weight: 500;
    }

    .google-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border: 1px solid #D8D8E8;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.9);
      color: #2C2A4A;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      position: relative;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .google-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
    }

    .google-btn:hover::before {
      left: 100%;
    }

    .google-btn:hover {
      border-color: #3F3D7A;
      background: #F6F6FA;
      transform: translateY(-1px);
      box-shadow: 0 5px 15px rgba(63, 61, 122, 0.2);
    }

    .google-icon {
      width: 16px;
      height: 16px;
    }

    .login-link {
      text-align: center;
      font-size: 12px;
      color: #5C5B7C;
      font-weight: 500;
      padding: 10px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      border: 1px solid #D8D8E8;
    }

    .login-link a {
      color: #3F3D7A;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.2s ease;
      padding: 3px 6px;
      border-radius: 4px;
    }

    .login-link a:hover {
      color: #2C2A4A;
      background: rgba(63, 61, 122, 0.1);
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    @keyframes float-shapes {

      0%,
      100% {
        transform: translateY(0px) scale(1);
      }

      50% {
        transform: translateY(-12px) scale(1.05);
      }
    }

    @media (max-width: 768px) {
      .signup-container {
        flex-direction: column;
        max-width: 350px;
        border-radius: 10px;
      }

      .left-section {
        min-height: 150px;
        padding: 15px;
      }

      .logo-circle {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
      }

      .logo-inner {
        width: 30px;
        height: 30px;
        font-size: 14px;
      }

      .welcome-text {
        font-size: 18px;
      }

      .welcome-subtitle {
        font-size: 12px;
      }

      .right-section {
        padding: 20px 15px;
      }

      .form-header h2 {
        font-size: 18px;
      }

      .form-header p {
        font-size: 11px;
      }

      .form-control {
        padding: 8px 10px;
        font-size: 12px;
      }

      .btn-primary,
      .google-btn {
        padding: 8px;
        font-size: 12px;
      }

      .divider span {
        font-size: 11px;
      }
    }

    @media (max-width: 480px) {
      .signup-container {
        padding: 10px;
        border-radius: 8px;
      }

      .right-section {
        padding: 15px 10px;
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }